Node项目调试的几种方式

web项目在调试模式下可以很轻松的通过chrome dev tool或者在编辑器中使用debugger语句进行断点调试，下面将列举5种Node程序的调试方法:

debugger官方文档： https://nodejs.org/dist/latest-v16.x/docs/api/debugger.html

使用v8内建的inspector命令行调试

node inspect app.js

例如这个求和最终返回NaN,通过调试找到问题:

let orders = [341, 454, 198, 264, 307];

let totalOrders = 0;

for (let i = 0; i <= orders.length; i++) {
  totalOrders += orders[i];
}

console.log(totalOrders);

进入命令行调试模式后会有如下提示,并从文件第一行代码开始

shell

< Debugger listening on ws://127.0.0.1:9229/4d19c873-2588-48b3-9fc0-188b93fe6ba2
< For help, see: https://nodejs.org/en/docs/inspector
<
 ok
< Debugger attached.
<
Break on start in badge.js:1
> 1 let orders = [341, 454, 198, 264, 307];
  2 let totalOrders = 0;
  3
debug>

可以通过watch('result') + n来逐步调试【watch可以监听多个变量，每次回车不会有提示反馈】，最终排查问题代码:

在命令行调试模式有以下命令方便用于断点调试(可通过输入help获取更多命令):

cont or c: 继续执行
next or n: 执行下一行命令
step or s: 跳入将被调用的函数中
out or o: 跳出函数并返回调用语句
pause: 暂停运行代码
watch(‘variable’): 监听变量
setBreakPoint() or sb(): 设置断点
restart: 重新启动脚本
.exit or Ctrl | Cmd + D: 退出调试

shell

debug> watch('totalOrders') // 监听totalOrders的值
debug> watch('i')          // 监听索引值
debug> n                  // 一直下一步到第6行
debug> setBreakPoint()   // 设置断点
debug> c                // 单点调试，直到问题所在

Watchers:
  0: totalOrders = 0
  1: i = 0

  3 let totalOrders = 0;
  4
  5 for (let i = 0; i <= orders.length; i++) {
> 6   totalOrders += orders[i];
  7 }

这种调试仅限于逻辑简单或者在远程服务器上没有安装其他调试工具时使用,对于复杂的场景太过笨拙。

chrome-devtools

上面的inspect内建指令执行后同时会创建一个web socket服务，它还启动了一个基于文本的调试客户端，但页可以使用例如chrome、edge、firfox等内置的图形客户端

以一个简单的服务为例：

const http = require("http");

const greetings = ["Hello world", "Hola mundo", "Bonjour le monde", "Hallo Welt", "Salve mundi"];
const getGreeting = function () {
  let greeting = greetings[Math.floor(Math.random() * greetings.length)];
  return greeting
}

const requestListener = function (req, res) {
  let message = getGreeting();
  res.setHeader("Content-Type", "application/json");
  res.writeHead(200);
  res.end(`{"message": "${message}"}`);
};

const port = 6000;
const host = 'localhost';
const server = http.createServer(requestListener);

server.listen(port, host, () => {
  console.log(`Server is running on http://${host}:${port}`);
});

cli debugger命令与chrome debugger命令不同，--inspect

shell

node --inspect server.js

Output
Debugger listening on ws://127.0.0.1:9229/cb2baf75-5344-43c8-a332-137302be811c
For help, see: https://nodejs.org/en/docs/inspector
Server is running on http://localhost:9000

以chrome为例:

任意页面唤出chrome-dev-tool(或者在终端点击server启动的端口地址同样可以自动唤出)，此时审查元素旁边会多出一个nodejs图标点击即可进入熟悉的调试界面

dev-tool

使用chrome://inspect调试当前web socket开启的服务

inspect

webstorm断点调试

官方文档说明： https://www.jetbrains.com/help/webstorm/running-and-debugging-node-js.html

操作步骤:

选择右上角的Edit Configuration或者从toolbar > Run > Edit Configuration
点击添加加node解释器，自己本地安装的或者nvm当前使用的版本
选择主程序入口文件，一般是项目启动入口或者是你要调试的文件
三个参数配置:
- Node Parameters: 用来开启当前node版本提供的实验性功能
- Application Parameters: 指定运行时process.argv所接收的参数，用于调试命令行工具(cli)的命令时比较有用
- Environment Variable: 指定环境变量

webstorm

webstorm同时也可以监听到使用 node --inspect 开启的socket端口进行调试，和上面chrome dev tool类似，可以查看官方文档说明.

vscode断点调试

官方文旦更说明： https://code.visualstudio.com/docs/introvideos/debugging

操作步骤:

点击左侧debug按钮选择Nodejs
此时会出现VARIABLES、WATCH、CALL STACK、BREAKPOINTS可供查看和操作
点击Add Configuration配置launch.json的执行程序文件及设置stopOnEntry(启动时立即中断)
在debug窗口上方点击运行按钮RUN Launch Program进行断点调试

vscode

launch.json中的配置项及占位符可分别查阅官方文档的GET STARTED > Settings和USER GUID > Debugging部分