javascript 调试技巧

背景

在写代码的过程中，难免会出现一些问题，那么如何查找问题以及找到问题出现在什么地方至关重要。可能平常在开发过程中，大家可能并没有怎么在意调试代码，大部分都是通过 console.log 来打印日志进行查找。这种方式不是说不行，只能说不够优雅（装逼）。这里就介绍下如何借助 vscode 插件来实现代码的调试以及一些常见的调试方法，方便大家找到代码中的问题。

Debugger for Chrome

利用在 vscode 插件进行 js 代码的调试，这个是笔者比较推荐的。可以在 vscode 的代码中看到你想要看到的内容，变量值，运行堆栈什么的。熟练使用绝对是开发调试一大利器。具体使用方式如下

• 第一步当然是去 vscode 的扩展中心搜索 Debugger for Chrome 插件进行安装

• 点击左侧调试按钮进入调试文件的配置

• 选择之后就会在项目根目录生成一个.vscode 的文件夹并且会生产一个默认的配置文件

调试的时候主要是通过 url 来进行调试的，所以一定要保证你的服务启动端口和这个 url 中的一致，如果不一致就改为你启动服务的端口。

• 这里需要注意一点 webRoot 是相对于你的主目录根路径的，如果你是调试主目录中的某个子项目就需要配置这个路径

"webRoot" : "${workspceFolder}/app1"

• 简单说下这里参数的意思

"type": "调试的宿主类型"
"request": "打开新的浏览器标签的方式"
"name": "调试窗口定义的名字"
"url": "需要调试的url"
"webRoot": "调试的主目录"

• 开始调试，选择你配置的调试文件，然后点击左侧的绿色的三角按钮

• 出现如下操作栏就是开启调试成功了

• 这里需要注意的情况是，一般现在都是前后端分离的项目，需要先把项目运行起来，启动本地开发服务器，然然后在点击调试按钮，这样会新打开一个浏览器，就可以进行愉快的调试了，在你想调试的代码前面打断点，就可以了

这样就可以在编辑器中进行代码调试，非常方便

JavaScript Debugger

这个是 vscode 的另一个插件，是内置在 vscode 中的。优点就是少配置就可以跑起来调试，这里就看大家的喜好程度了，介绍下这个插件的使用过程

• 这个插件是内置的，所以默认就是开启的，也支持一些自定义配置，打开用户设置然后搜索 debug 就会出现设置选项如图

用户的自定义设置就显示在右侧的配置项里，大家可以自行设置

• 开启 debug 模式

当我们打开项目的 package.json 的时候，默认在 npm script 脚本命令的上方会出现一个调试的按钮，然后点击选择调试的命令就可以进入调试模式了

当点击这个调试之后，会出现一个选择框选择一个命令运行调试环境

然后选择 serve 开启本地服务器，就可以进行本地代码调试了，会开启一个新的浏览器。大致现象和上一个插件相似。具体的调试步骤也可参考上个插件，这个插件的好处就是少配置，开机可用。大概率不需要多自定义配置，而且调试和启动本地服务两个步骤合二为一，更加简便