vscode启动node必须带--inspect,否则火焰图无法连接;vscode不采集cpu数据,仅暴露调试端口,chrome devtools performance面板需启用js stack traces并触发业务逻辑后录制,导出.cpuprofile分析。

VSCode启动Node必须带--inspect,否则火焰图根本连不上
VSCode本身不采集CPU数据,它只负责启动进程并暴露调试端口。直接运行node app.js或nodemon app.js(没传--inspect),Chrome DevTools 就连不上调试器,Performance 面板灰掉,录制全是空的。
常见错误包括:
-
nodemon app.js没加--inspect,或写了--inspect-brk但想分析用户交互——它卡在第一行,业务逻辑根本没跑 - launch.json里漏了
"runtimeArgs": ["--inspect"],或者写成"--inspect-brk" - 用了旧版
"type": "node",推荐统一用"pwa-node",稳定性更好
最小可用配置只要三行关键字段:
{
"type": "pwa-node",
"request": "launch",
"runtimeArgs": ["--inspect"]
}
Chrome DevTools里不勾JS stack traces,火焰图全是(anonymous)
点开chrome://inspect → Open dedicated DevTools for Node.js后,别急着点Performance面板的●开始录制。默认模式不抓JS调用栈,函数名全显示为(anonymous),根本没法定位。
必须手动开启:
- 右上角三个点 →
More tools→Rendering→ 勾选JS stack traces - 再回到Performance标签页,点击●开始
- 务必先触发目标逻辑(比如发一次HTTP请求、点一个按钮),再停止录制
停止后优先看Bottom-Up视图,展开耗时最高的函数,注意区分self time(自身执行)和total time(含子调用)——优化先盯self time高的函数。
想抓内存快照?Debug Console里require('v8').writeHeapSnapshot()会失败
报错Protocol error (HeapProfiler.takeHeapSnapshot): Not supported不是代码问题,而是进程启动方式不对。VSCode用program直接启动时,V8调试协议初始化太晚,HeapProfiler模块被禁用。
正确路径是手动启动+attach:
- 终端执行:
node --inspect=9229 --max-old-space-size=1024 app.js - launch.json设
"type": "attach"、"port": 9229、"localRoot"和"remoteRoot"都填"${workspaceFolder}" - 断点暂停后,在Debug Console输入:
require('v8').writeHeapSnapshot('./snap.heapsnapshot')(路径必须绝对或有写权限,不能只写./snap.heapsnapshot)
Node.js版本低于12.0不支持v8.writeHeapSnapshot(),记得检查。
.cpuprofile才是唯一通用入口,VSCode内置查看器功能极简
Chrome DevTools导出的.cpuprofile文件,才是分析火焰图的通用载体。VSCode里装再多“一键火焰图”插件,实际也只是把该文件拖进去展示——但它的查看器不支持折叠、无法跳转源码、没有Bottom-Up/Call Tree切换。
真要深度分析,必须:
- 把
.cpuprofile拖进Chrome DevTools的Performance面板(用Load profile) - 或用
pprof、0x等命令行工具转换为SVG火焰图 - VSCode里只能做基础过滤,别指望靠它定位
process.nextTick反复调度这类隐性瓶颈
容易被忽略的是:火焰图横向长度代表时间,纵向是调用栈深度,但红色区块不一定就是瓶颈——得结合self time占比和调用频次交叉判断。单看颜色容易误判。











