一.为什么需要调试
解决bug通常要对代码进行调试,这样才能比较容易的找出关键性问题。掌握一个好的调试技巧是一个开发人员必备的基本技能。
二.基本调试(pc端)
这里我们拿一套iview-admin 的源码来进行调试
1.肉眼调试
所谓肉眼调试就是指直接看代码进行调试,这种方式效率非常低下。
2.console
-
log(...)
查看console.log(...)打印出的日志应该是目前大多数前端惯用的调试方法。但是这种方式对于缕清程序运行的步骤和过程来说是比较困难的。
比如,我要查看一个函数被调用的位置,这就比较难找出。查看下面代码
我们需要找到 updateMenulist() 被调用了几次,在哪被调用的。当然,被调用了几次我们很容易查看,只需要在函数内打印一下即可。
浏览器控制台中就会显示出来
但是我们想知道它是在哪里被调用的,这时我们会想到,直接在文件夹里搜索这个函数不就可以了吗,如
-
搜索到的结果是有4个地方调用了这个函数,但是控制台里只打印了两次,那么,继续往下看。
-
trace(...)
这个console.trace()的概述是:向Web控制台输出一个堆栈跟踪。意思就是打印当前执行位置到console.trace()的路径信息.使用console.trace()可以打印出详细的调用堆栈:
3.断点调试
如果是使用webpack打包了需要将打开map模式,否则断点断不到具体文件。
4.vscode 调试
使用vscode的朋友们可以很方便的在vscode上面进行调试
5.chrome 插件调试
首先