2017-08-15发表2024-09-27更新开发工具8 分钟读完 (大约1218个字)

Node.js 调试方式集锦

本文讨论了几个流行的 Node.js 调试方式，包括 Chrome，VSCODE，ATOM，WebStorm

Chrome：

优势

不依赖编辑器；
不依赖配置；
Node.js 默认已经集成，官方推荐；
与前端代码调试工具一致；
dev-tools 工具强大

劣势

无法在源文件上进行断点

VSCODE：

优势

可在源文件上进行断点

劣势

需要一定的配置

WebStorm：

优势

可在源文件上进行断点

劣势

需要一定的配置

ATOM：

优势

可在源文件上进行断点

劣势

功能比较弱，不如 VSCODE

个人建议：如果本身就使用 VSCODE，WebStorm 的话，建议继续使用对应的 Node.js 调试方式；如果使用 ATOM，Sublime 调试不便的编辑器，推荐使用 Chrome 进行调试。

CHROME 调试配置

步骤一：安装 nodemon，监听文件变化以重启 node 服务

$> npm install nodemon -g

步骤二：以 —inspect 参数启动调试

$> NODE_ENV=development nodemon --inspect -w config -w server -x node server/server.js

注：

NODE_ENV=development // 传入环境变量
—inspect // 配合 Chrome 进行调试，当同时调试多个 node 服务时，可设置端口以避免冲突：—inspect=9291
-w config -w server // 监听 config 与 server 目录，当上述两个目录内文件发生变化时，自动重启服务
-x node // 默认为 node，可不配置，必要时可配置为 babel-node：-x babel-node
server/server.js // node 项目入口文件

步骤三：启动前端调试服务(如果有的话)

步骤四：建议将上述命令配置为 scripts 脚本（此时可在项目内单独安装 nodemon）：

"scripts": {
    "start": "npm run server & npm run dev",
    "server": "NODE_ENV=development nodemon -w config -w server server/server.js",
    "start-debug": "npm run server-debug & npm run dev",
    "server-debug": "NODE_ENV=development nodemon --inspect -w config -w server server/server.js",
    "dev": "nodemon -w config -w scripts scripts/server.js"
  }

步骤五：打开 Chrome，并打开 dev tool，当你的 Chrome 足够新（60 以上），可点击如下 node.js 图标，进入调试

步骤六：如果当前 Chrome 不支持，请更新，或者使用插件 NIM

VSCODE 调试配置

步骤一：打开项目目录

步骤二：切换到 debug tab：

步骤三：打开 launch.json 文件

步骤四：配置 launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node2", // 新增类型，方便调试 await/async 语法
            "request": "launch",
            "name": "启动程序",
            "verboseDiagnosticLogging": false,
            "program": "${workspaceRoot}/server/server.js", // 此为 node 工程的入口文件
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node", // 若未使用 babel-node，例如使用 node8 以上版本，请移除本行
            "env": {
                "NODE_ENV": "development"
            },
            "sourceMaps": true
        }
    ]
}