前端调试

github项目地址

一.为什么需要调试

解决bug通常要对代码进行调试，这样才能比较容易的找出关键性问题。掌握一个好的调试技巧是一个开发人员必备的基本技能。

二.基本调试（pc端）

这里我们拿一套iview-admin 的源码来进行调试

1.肉眼调试

所谓肉眼调试就是指直接看代码进行调试，这种方式效率非常低下。

2.console

• log(...)

  查看console.log(...)打印出的日志应该是目前大多数前端惯用的调试方法。但是这种方式对于缕清程序运行的步骤和过程来说是比较困难的。

  比如，我要查看一个函数被调用的位置，这就比较难找出。查看下面代码

  我们需要找到 updateMenulist() 被调用了几次，在哪被调用的。当然，被调用了几次我们很容易查看，只需要在函数内打印一下即可。

  updateMenulist (state) {
    console.log("我被调用了")
  }
  复制代码

  浏览器控制台中就会显示出来

  但是我们想知道它是在哪里被调用的，这时我们会想到，直接在文件夹里搜索这个函数不就可以了吗，如

  搜索到的结果是有4个地方调用了这个函数，但是控制台里只打印了两次，那么，继续往下看。

• trace(...)

  这个console.trace()的概述是：向Web控制台输出一个堆栈跟踪。意思就是打印当前执行位置到console.trace()的路径信息.使用console.trace()可以打印出详细的调用堆栈：

3.断点调试

如果是使用webpack打包了需要将打开map模式，否则断点断不到具体文件。

• 浏览器中断点

  之前我们console.log()打印的时候，后面会出现打印的具体文件位置。