在 Vscode 编辑器里调试浏览器网页

背景

在浏览器 devTools 中可以进行调试，打断点、监控变量等可以方便辅助我们日常开发。客户端项目可以在浏览器 devTools 中调试，但 bff 后端服务，我们若想调试打断点，就需要在编辑器中打断点了。

编辑器里调试

在 vscode 1.4.2+ 的版本，内置了 JavaScript Debugger 插件，能在 Node.js, Chrome, Edge, WebView2, VS Code extensions 等等下调试打断点。

• 以往若需要在 Chrome 运行的项目，断点信息同步到编辑器，需要借助 Debugger for Chrome

以场景做区分

1. 打开新的浏览器实例（隐私模式）；
2. 在现有浏览器下，打开新的标签页。

这两种场景对应着两种 request 类型
- launch 模式：启动一个新的进程
- attach 模式：会连接到一个已经运行的调试进程，并开始监听调试事件

这里不介绍 launch 模式，可以傻瓜式一键开启：

• !17 bff 后端服务直接用这种方式即可，不过多说明!
  

attach 模式

launch.json 配置：

1. 浏览器需要开启调试端口，举例 port: 9222，在命令行窗口 cmd 输入

chrome --remote-debugging-port=9222

在打开的浏览器下，输入 localhost:9222 检查一下是否成功

2. 与浏览器开放的调试端口建立连接

• 编辑器配置 launch.json 文件

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Chrome",
      "port": 9222,		// 目标调试端口
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"	// 指定 web 项目路径地址
    }
  ]
}

• 配置好后选中此配置启动
  

• 成功的话可以看到此进程
  

dev 启动服务需要追加调试进程

运行所需调试的 web 项目，需要在调试进程中看到 node 进程
- 打开设置项 debug: auto attach filter，让在启用 node 进程中，自动附加一个调试进程

- 运行项目，你会看到调试面板中有个 node 的调试进程