真正起作用的是 chrome devtools + node.js profiler，vscode 插件仅封装调用链路、降低门槛；因js性能瓶颈需真实运行时捕获v8采样数据，而vscode本身不执行js。
没有插件能“深度挖掘 JS 代码性能”——真正起作用的是 Chrome DevTools + Node.js profiler，VSCode 插件只负责把它们串起来、降低调用门槛。
为什么不能靠插件直接分析性能？
JS 性能瓶颈（如长任务、内存泄漏、过度重渲染）必须在真实运行时捕获，依赖 V8 引擎的底层采样数据。VSCode 本身不执行 JS，它只是编辑器。所谓“性能插件”，本质是封装了 node --inspect、chrome://tracing 或 Lighthouse 的调用链路，而非替代这些工具。
真正有用的三类插件：调试桥接、内存快照、自动化 profiling
-
Debugger for Chrome / Edge：不是“分析插件”，但它是连接 VSCode 和 Chrome DevTools Performance 面板的唯一可靠通道。必须配合
launch.json中的"url"和"webRoot"正确配置，否则无法映射 sourcemap，火焰图里全是eval或匿名函数。 -
JavaScript Booster：不测性能，但能快速重构掉常见性能陷阱。比如把
for (let i = 0; i 转成 <code>for (const item of arr)（避免每次循环读取.length），或把重复计算的表达式提取为常量。它的灯泡提示（light bulb）出现在实际代码上，比静态扫描更精准。 -
Node.js Profiler（官方插件，非第三方）：仅适用于 Node 环境。启用后右键选择
Start profiling，会生成.cpuprofile文件，双击即可在 VSCode 内打开火焰图——但它依赖node --inspect-brk启动，且不支持 ESM 模块的完整 symbol 映射，遇到import语法时堆栈可能断裂。
容易被忽略的关键配置点
所有性能相关插件都卡在同一个地方：sourcemap 路径对不上。Webpack/Vite 默认生成的 sourceMappingURL 是相对路径，而 VSCode 调试器需要绝对路径或正确 sources 映射。常见错误现象：DevTools shows "VMxxx" instead of real filenames。
解决方法只有两个：
- 在
webpack.config.js或vite.config.ts中显式设置devtool: 'source-map'（不要用cheap-module-source-map） - 在
launch.json里加"sourceMapPathOverrides"，例如：{"webpack:///src/*": "${workspaceFolder}/src/*"}
漏掉任一环节，你看到的就不是自己的代码，而是编译后的混乱堆栈。
