前端调试

2018-08-29 本文已影响0人 hhooke

今天分享一个超级不错的前端调试技巧，还在为前端端点调试而烦恼吗

为什么需要调试

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

如何调试

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

1.肉眼调试

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

2.console.log(...)

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

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

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

updateMenulist (state) {
  console.log("我被调用了")
}

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

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

搜索到的结果是有4个地方调用了这个函数，但是控制台里只打印了两次，而且如果我们想知道它的调用循序，这就很难办啦。那么接下来就请看下面的调试方法。

3.断点调试

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

浏览器中断点

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

点击之后会跳到这个文件的具体位置。之后点击我箭头所指的位置就断点了

之后就可以按F5刷新断点调试了，程序运行到这个地方会被卡住，然后你就可以查看当前的环境中的一些信息，如下

查看调用栈

我们可以很明显的查看函数第一次是在main.js的34行调用的。

然后我们可以按下F11或者：

于是我们再次点击，就又跳到了第二次执行这个函数的地方。

代码中的断点

有时候我们不想用console.log()去打印然后在浏览器中找到文件设置断点，那还有一种方法可以快速的实现断点

debugger 关键之

在代码中直接使用 debugger 关键字可以快速的实现断点。

效果和浏览器中的断点效果是一样的。

vscode 调试

使用vscode的朋友们可以很方便的在vscode上面进行调试

配置launch.json文件

在项目根目录配置.vscode文件夹。下有个launch.json文件

文件内容

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/HT/javascript/test.js"
        }
    ]
}

点击F5或者：