使用 VSCode 编辑和调试 Js 文件

---

前置条件

1. 首先执行如下命令将项目克隆到本地

git clone https://github.com/jessun1990/VSCode-debug-nodejs

2. VSCode 安装扩展 debugger-for-chrome

3. 安装依赖

# 进入项目目录
yarn install
# or
npm insatll

VSCode 调试方案

方案一：启动一个独立的无插件的 chrome 以调试 client

1. 在终端中运行 yarn run client or npm run client，保证 web server 运行，能够访问 http://127.0.0.1:8091/(whatever) 下内容。

2. VSCode 编辑器进入 Debug 的界面，调试配置选择启动一个独立的 Chrome 以调试 client这个选项。

如果是第一次运行调试，且项目目录下 .vscode/launch.json 文件没有相应配置，debugger-for-chrome 插件会自动生成相应的 JSON 配置选项。

3. 能够正确 debug 后（可以打duan dai n），会有一个无插件模式的 chrome 来启动，并且访问 http://localhost:8091/client/index.html 和相应的 Js 文件。

8091 端口必须在 web sever 中开启访问，同时在 launch.json 文件的设置选项中设置： "file": "${workspaceFolder}/client/index.html"。
此时是没有 web server 服务的。

.vscode/launch.json 中的内容

{
    "type": "chrome",
    "request": "launch",
    "name": "启动一个独立的 Chrome 以调试 client",
    // "url": "http://localhost:8091/client/index.html",
    "webRoot": "${workspaceRoot}",
    "file": "${workspaceFolder}/client/index.html",
    "sourceMaps": true
}

方案二：监听一个已经启动调试模式的 Chrome 以调试 client （推荐）

1. 在终端中运行：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
# 或者
/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary --remote-debugging-port=9222

确保 Google Chrome / Google Chrome Canary 事先没有启动，如果已经启动，可能无效。

2. 在终端中运行：

yarn run client

此时应该可以使用上述的浏览器访问 http://127.0.0.1:8091/

3. VSCode 编辑器进入 Debug 的界面，调试配置选择监听一个已经启动调试模式的 Chrome这个选项。

4. 能够正确 debug 后（可以打断点），会出现一个选择框来选择 tab 来调试，选择地址为 http://127.0.0.1:8091/client/index.html

5. 浏览器中在 http://127.0.0.1:8091/client/index.html 地址下刷新。在 VSCode 编辑器中进行编辑和调试 JS 文件。

.vscode/launch.json 中的内容

{
    "type": "chrome",
    "request": "attach",
    "name": "监听一个已经启动调试模式的 Chrome",
    "port": 9222,
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
}

方案三：启动调试 Node 服务器以调试 server

1. VSCode 编辑器打开 ./server/app.js 文件。进入调试界面，选择启动调试 Node 服务器。

2. 可以设置断点。

.vscode/launch.json 中的内容

{
    "type": "node",
    "request": "launch",
    "name": "启动 Node 服务器",
    "program": "${workspaceRoot}/server/app.js"
}

方案四：Nodemon 启动服务器（inspect 模式）以调试 server

1. 终端中运行：

yarn run server:inspect

2. 访问http://localhost:8092。

3. VSCode 进入调试模式，选择附加于已启动的 Node 服务器（insepect 模式）。终端中显示Debugger attached信息。

4. 在 VSCode 编辑中加断点（或者在 Chrome 浏览器的 DevTools 中加断点），刷新网页进行断点调试。