使用 Chrome DevTools 调试 Node.js

Chrome DevTools 提供 GUI 调试体验，比命令行调试器更直观高效。

启动调试模式

启动 inspect 服务

# 启动调试服务器
node --inspect app.js

# 端口: 9229 (默认)
# 输出: Debugger listening on ws://127.0.0.1:9229/...

# 启动时立即暂停
node --inspect-brk app.js

# 指定端口和主机
node --inspect=127.0.0.1:9229 app.js

连接 DevTools

方式一：Chrome DevTools

1. 启动 Node.js 调试模式
2. 打开 Chrome 浏览器
3. 访问 chrome://inspect
4. 点击 "Configure" 确保包含 localhost:9229
5. 在 Remote Target 中找到 Node.js 进程并点击 inspect

方式二：自动打开

# macOS
open -a "Google Chrome" http://localhost:9229

# 或访问
# chrome-devtools://devtools/bundled/inspector.html?ws=...

调试功能

断点设置

// 代码中设置断点
function processData(data) {
  debugger;  // 程序在此暂停
  return data.map(item => item.value);
}

// 或在 DevTools Sources 面板点击行号设置

断点类型

调试控制

变量查看

Scope 面板

function example() {
  const local = '局部变量';
  const obj = { name: 'test' };

  debugger; // 在 Scope 面板查看所有变量
}

Watch 表达式

// 在 Watch 面板添加表达式
data.length
obj.name
JSON.stringify(response)

调用栈追踪

Call Stack 面板

function level3() {
  debugger; // 查看调用栈
}

function level2() {
  level3();
}

function level1() {
  level2();
}

level1();

// Call Stack 显示:
// level3
// level2
// level1
// (anonymous)

Console 面板

调试时执行代码

// 在断点暂停时
// Console 面板可以执行任意代码

// 查看变量
local

// 执行表达式
Object.keys(obj)

// 修改变量
local = 'new value'

内存分析

Heap Snapshot

// 1. 打开 Memory 面板
// 2. 选择 Heap snapshot
// 3. 点击 Take snapshot
// 4. 分析内存占用

CPU 性能分析

Profiler 面板

// 1. 打开 Profiler 面板
// 2. 点击 Start
// 3. 操作应用
// 4. 点击 Stop
// 5. 分析函数执行时间

注意事项

• --inspect-brk 适合调试启动阶段问题
• 断点修改后可能需要重启进程
• 生产环境谨慎使用，性能有损耗
• 使用 .vscode/launch.json 可集成 VS Code

要点总结

• node --inspect 启动调试服务器
• 访问 chrome://inspect 连接 DevTools
• Sources 面板设置断点和单步调试
• Scope 查看变量，Watch 监视表达式
• Call Stack 追踪函数调用链