VSCode通过JavaScript Debugger插件+Chrome DevTools协议直接分析JS执行性能，无需手动埋点；需配置launch.json、确保Node≥14.18或Chrome端口可用，在断点后启用Performance Profiler获取火焰图与函数耗时占比。
怎么用 VSCode 直接分析 JS 执行性能？
VSCode 本身不内置 JS 性能剖析器，但通过 JavaScript Debugger 插件（Microsoft 官方维护，已预装或默认启用）+ Chrome DevTools 协议，就能在编辑器内完成函数耗时、内存分配、调用栈深度等关键指标的采集。不需要切到浏览器开发者工具，也不用写 console.time() 手动埋点——前提是你的 JS 能在 Node.js 或浏览器环境运行。
JavaScript Debugger 启动前必须确认的三件事
很多人点“调试”后没反应，根本原因是启动配置缺失或环境错配：
- 项目根目录下必须有
.vscode/launch.json，且至少含一个type: "pwa-node"（Node）或"pwa-chrome"（浏览器）配置项 - Node.js 版本需 ≥ 14.18（旧版不支持 V8 Inspector 协议），可通过终端执行
node --version验证 - 若调试浏览器端代码，确保 Chrome 已关闭所有实例（包括后台进程），否则调试端口
9222可能被占用
在代码里打“性能断点”比 console.time() 更准
传统计时依赖手动加减，容易漏掉异步回调、Promise 微任务开销；而 Debugger 的“性能断点”能捕获真实执行路径：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 在想测的函数首行左侧 gutter 点击，设普通断点 → 启动调试 → 进入后按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac），输入Debug: Toggle Performance Profiler - 继续执行（
F5），操作触发目标逻辑 → 停下后自动打开Performance标签页，显示火焰图（Flame Chart）和函数耗时占比 - 注意：该 profiler 仅在断点暂停后激活一次，不是全局常驻监控；反复测试需重新触发
为什么不用 npm install --dev devtools-frontend 这类第三方包？
VSCode 的 JavaScript Debugger 底层复用 Chromium DevTools Protocol（CDP），所有数据来自 V8 引擎原生采样。自行引入前端性能库（如 web-vitals）只能测 LCP、FID 等页面级指标，无法定位到某次 Array.prototype.map 调用为何卡顿 12ms——后者必须靠 CDP 的 call frame 和 heap snapshot 支持。
真正容易被忽略的是：Profiler 默认关闭“内存堆快照（Heap Snapshot）”，而内存泄漏往往藏在闭包引用里。如需排查，必须在 Performance 标签页右上角勾选 Capture memory allocation stacks，否则只看到“内存增长”，看不到“谁在持续 new Object()”。
