vscode内置js-debug已替代debugger for chrome：1.47版起默认启用，需卸载旧插件、设"debug.javascript.usepreview": true、launch.json用pwa-*类型、必配skipfiles、webpack/vite开source-map、rxjs调试用tap、启用javascript.legacyasyncstacks为false。
VSCode内置js-debug已替代Debugger for Chrome
VSCode从1.47版起默认启用vscode-js-debug，不再依赖第三方插件如Debugger for Chrome。如果你还在用旧配置，调试时可能遇到断点不命中、Source Map失效或异步堆栈为空的问题。
确认方式：打开任意JS文件，按F5启动调试，看调试控制台顶部是否显示“js-debug”字样；若显示“chrome”或报错找不到chrome类型，说明你仍在用过时插件。
- 卸载
Debugger for Chrome插件（它已被官方弃用） - 检查
settings.json中是否残留"debug.javascript.usePreview": false，删掉或设为true - 确保项目根目录有
.vscode/launch.json，且type字段为"pwa-node"（Node.js）或"pwa-chrome"（浏览器），不是"chrome"
launch.json里必须加skipFiles才能正常步入async/await
不加skipFiles，按下F11步入时会卡进async_hooks.js或internal/async_hooks.js，根本看不到你自己的async函数体——这是最常被忽略的配置项。
正确写法（Node.js环境）：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch",
"program": "${workspaceFolder}/index.js",
"skipFiles": ["<node_internals>/**"]
}
]
}</node_internals>
-
"<node_internals>/**"</node_internals>是通配写法，比单独列async_hooks.js更可靠 - 前端调试（
pwa-chrome）也建议加上，避免跳进zone.js或rxjs/internal等框架内部 - 如果用了Webpack/Vite，确保
devtool: 'source-map'开启，否则skipFiles再全也没用
RxJS或复杂Promise链调试要靠tap，不是打断点
在.pipe(map(...), filter(...), switchMap(...))里直接点行号加断点，99%情况下不会触发——因为操作符返回的是新Observable，执行发生在订阅后，且闭包上下文不可见。
真正有效的做法是插入tap并打点：
fromEvent(input, 'input')
.pipe(
map(e => e.target.value),
<strong>tap(val => { debugger; })</strong>, // ← 这里断点必停
debounceTime(300),
tap(val => console.log('debounced:', val)),
switchMap(q => fetch(`/api?q=${q}`))
)
.subscribe(...)
-
tap是唯一能让你在流中间“插入可中断点”的标准操作符 - 别在
tap里写await或异步逻辑，会破坏同步可观测性 - 配合
console.table()输出结构化数据，比console.log更易追踪流状态
异步堆栈跟踪默认关闭，需手动启用
Chrome DevTools里勾选“Async”就能看到完整异步调用链，但VSCode默认关着这个开关——导致你在await后看到的调用栈只有当前函数，找不到上层async源头。
启用方法：
- 打开VSCode设置，搜索
javascript.legacyAsyncStacks - 把值从
true改为false（注意：是false才启用新式异步堆栈） - 重启调试会话，断点暂停后，在“调用栈”面板底部会出现灰色异步帧，点击可跳转到对应
await或then位置
这个开关不显眼，但没开它，你就永远在猜“这个Promise到底是谁发出来的”。
