JavaScript 断点调试技巧( 二 ) _JavaScript

然后使用 cmd+q 退出你正在运行的 Chrome(这步很重要，不能跳过) ，按 f5 启动 VS Code 的调试功能。VS Code 就会帮你启动一个 Chrome 窗口，并访问上述配置的中的 url 。这时候我们的断点就生效了，可以一步一步地控制代码的运行，找出 bug 来源。

文章插图

这里有一个实用的小技巧，就是在 BREAKPOINTS 中，把 Uncaught Exceptions 勾上，这样在代码报错的地方，就会自动中断执行。当我们遇到一个报错时，采用这个方法可以省去定位问题代码的时间。

文章插图

另外我们可以发现，在 VS Code 断点生效时， Chrome Devtools 也会同步这个展示这个断点。

文章插图

在 VS Code 中，调试有两种模式，分别是 launch 和 attach 。由于真正执行代码的是 Chrome 中的 JS 引擎，所以是否中断代码的控制权是在 Chrome 手里的。那为什么 VS Code 的断点可以控制代码的中断呢?是因为 VS Code 通过 devtools-protocol 向 Chrome 发起指令，告诉 Chrome 需要在哪一行代码暂停执行。这个发送指令的过程，被称作 attach 。而 launch 的过程包含 attach ，即先 launch(启动) 浏览器，然后 attach(附加) 断点信息。所以 attach 模式是 launch 模式的子集。
听起来好像 launch 模式会更方便，为我们省去了手动启动浏览器的过程。但是这存在一个问题，如果同时开发多个前端工程会怎样?每个工程启动一个调试进程，就会打开多个浏览器，那么在多个浏览器之间切换就会显得很麻烦。我们可以使用 attach 模式解决这个问题。
首先我们使用命令行启动 Chrome 。使用命令行的原因是，我们需要给 Chrome 的启动传参。

# 运行这条命令前需要cmd+q退出已运行的Chrome /Applications/google Chrome.app/Contents/macOS/Google Chrome --remote-debugging-port=9222 # 如果看到这个输出 ， 说明传参成功 。DevTools listening on ws://127.0.0.1:9222/devtools/browser/856a3533-ca5c-474f-a0cf-88b7ae94c75b

VS Code 和 Chrome 是通过 websocket 交流， --remote-debugging-port 指定了 websocket 使用的端口。然后我们将 launch.json 文件修改成这样：

{"version": "0.2.0","configurations": [{"type": "pwa-chrome","request": "attach","name": "Vue Application",// 项目访问的 url"url": "http://localhost:3000",// websocket 端口 ， 需要与 --remote-debugging-port 参数保持一致 。"port": 9222,"webRoot": "${workspaceFolder}"},] }

注意在启动 VS Code 调试之前，需要在 Chrome 中打开 http://localhost:3000 这个页面。然后我们在 VS Code 中打上断点，刷新浏览器，代码就成功停在断点处了。第二个、第n个工程都可以采用相同的配置，区别是 url 字段要根据项目配置进行修改。

Chrome 调试 Nodejs上文讲的是如何调试页面，接下来我们聊如何调试 nodejs 应用。首先来一个最容易上手的例子，创建一个 hello world：
// debug.js 文件 const greeting = 'hello nodejs debugger' debugger console.log(greeting)然后运行这个文件

node --inspect-brk debug.js Debugger listening on ws://127.0.0.1:9229/b9a6d6bf-baaa-4ad5-8cc6-01eb69e99f0a For help, see: https://nodejs.org/en/docs/inspector

--inspect-brk 表示运行这个 js 文件的同时，在文件的第一行打上断点。然后打开 Chrome ，进入 Devtools 。点击红框处的按钮，就会打开一个 nodejs 专用的调试窗口，并且代码在第一行中断了。