JavaScript 断点调试技巧( 三 ) _JavaScript

node 默认的 websocket 端口是 9229 ，如果有需要的话(比如端口被占用了) ，我们可以通过一些方式改变这个端口。
node --inspect=9228 debug.js Debugger listening on ws://127.0.0.1:9228/30f21d45-9806-47b8-8a0b-5fb97cf8bb87 For help, see: https://nodejs.org/en/docs/inspector在我们打开 Devtool 时， Chrome 默认检查 9229 端口，但当我们改变了端口号后，就需要手动去指定 Chrome 检查的地址了。点击下图中的 Configure 按钮，输入 127.0.0.1:9228 ，然后点击 Done 。这时候 Remote Target 中就会出现刚才启动的 node 进程，点击 inspect 就可以进入调试了。

文章插图

使用 VS Code 调试 Nodejs到此为止，我们已经达成调试 node 的目的，但还有些繁琐，不够自动化。我们可以使用 VS Code ，来一键启动调试。
用 VS Code 打开刚才的工程，然后在 launch.json 中输入这些：

{"version": "0.2.0","configurations": [{"type": "pwa-node","request": "launch","name": "Launch Program","skipFiles": ["<node_internals>/**"],// ${file} 的意思是 ， 当我们启动调试的时候 ， 调试的程序就是当前 focus 的文件 。"program": "${file}"}] }

这时候切换到 index.js 文件，按 f5 启动调试程序，当运行到第二行 debugger 语句的时候，就会自动暂停执行。也可以点击代码行数的左侧来打断点。
另外，这个配置是支持 TypeScript 的，我们只需要 index.js 重命名为 index.ts ，然后正常启动调试就行。

Conditional Breakpoint 条件断点在某些情况下，我们不希望打上的每个断点都发挥作用，而是在执行到断点那行，且满足某个条件再中断代码执行。这就是条件断点。
for (let i = 0; i < 10; i++) {console.log("i", i); }比如上面的代码，假设我们在第二行 console.log 打了断点，那么这个断点总计会中断十次。这往往是我们不希望看到的，可能我们需要的仅仅是其中某一次循环而非所有。这时候可以右键点击并选择 Add Conditional Breakpoint 。

文章插图

这时会有一个输入框出现，我们在其中输入 i === 5 。

文章插图
【JavaScript 断点调试技巧】
这时候启动调试，就会跳过 i 为 0 - 4 ，直接在在 i 为 5 的时候中断代码执行。恢复代码执行后，会略过 i 为 6 - 9 的情况。
Conditional Breakpoint 在调试带有大量循环和 if else 判断时极为有用，特别是当某处的逻辑整体上是符合预期的，仅有个别特殊情况的输出错误，使用条件断点就可以略过这些正常的情况，只在个别特殊情况出现的时候，再中断执行，供我们查看各个变量是否计算正常。

总结调试是日常工作中非常重要的能力，因为除了开发新功能外，日常有很大一部分都在调整旧的代码，处理特别条件下的逻辑错误。熟练掌握调试可以很好地提升搬砖幸福感，一个复杂的 bug 卡几小时，很容易让人心里崩溃。但也不是说断点调试是任何情况下都适用的银弹，简单的逻辑还是可以愉快地 console.log 的。
文章介绍了使用 Chrome Devtools 和 VS Code 断点调试的方法，整体上还是更推荐使用 VS Code 。launch.json 只需要一次配置，后续都可以 f5 一键启动调试。另外，文中提到的各种 launch.json 文件的配置，都可以使用 VS Code 自带的工具一键生成。只要打开 launch.json ，编辑器的右下角就会出现 Add Configuration 按钮，点击就可以选择自己需要添加的调试配置。