今天分享一个超级不错的前端调试技巧，还在为前端端点调试而烦恼吗
为什么需要调试
解决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或者：
关于vscode 调试的 查阅 https://go.microsoft.com/fwlink/?linkid=830387， 一般是进行服务端后台开发的用vscode调试的比较多。
chrome 插件调试
首先，下载vscode 插件
debugger for chrome
然后点击调试按钮
找到你的项目添加配置
如我的是MyApp，点击添加
然后会跳到一个文件里
将url改成你的项目开发环境调试的地址，
然后 驱动项目 一般的启动命令配置都是 npm run dev，具体的启动命令自行查看package.json文件中。
启动完成之后 按f5启动 chorme调试，这样就可以在 vscode 中打断点进行调试了。
网友评论