根本原因是未启用live server等扩展且调试配置缺失；需安装live server启动页面，再配置launch.json使用pwa-chrome连接对应端口，并确保sourcemap与webroot路径正确匹配。
VSCode里打不开浏览器DevTools面板
根本原因是没启用内置的“Preview”或“Live Preview”扩展，且调试配置没指向浏览器。VSCode原生不带DevTools界面，得靠扩展桥接。
- 必须安装官方
Live Server或微软出品的Preview扩展（推荐前者，更稳定） - 用
Live Server启动页面后，右键选择Open with Live Server，它会自动在默认浏览器打开，并监听文件变化 - 此时再按
F12，调出的是浏览器自己的DevTools，不是VSCode里的——VSCode目前不内嵌完整DevTools UI，所谓“集成”其实是联动调试 - 真想在VSCode里看DOM/Console，得配合
Debugger for Chrome或Debugger for Edge扩展，再配launch.json
配置launch.json启动浏览器并自动附加调试器
这是实现“VSCode控制浏览器DevTools行为”的关键一步。不配这个，断点不会停，console.log 也不会出现在VSCode的Debug Console里。
- 项目根目录下建
.vscode/launch.json，内容模板如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"trace": false
}
]
}
url 必须和你实际服务地址一致（比如 Live Server 默认是 :5500，Vite是 :5173）type 值必须是 pwa-chrome（新版Chrome调试器）或 pwa-msedge，旧版 chrome 已弃用，否则报错 Cannot connect to runtime process
断点不触发、源码映射失败
常见于用了构建工具（Vite、Webpack）但没正确生成 sourcemap，或 webRoot 路径写错，导致VSCode找不到原始TS/JS文件。
- 检查浏览器开发者工具的
Sources面板里是否显示webpack://或vite://协议路径；如果只看到压缩后的index.abc123.js，说明 sourcemap 没生效 - Vite项目需确认
vite.config.ts中有build: { sourcemap: true }（开发模式默认开启，但 build 后调试需显式设） -
webRoot必须指向源码所在文件夹，不是构建输出目录（如不要写成"${workspaceFolder}/dist"） - 如果用
import引入了 node_modules 里的库，且想调试其源码，需在launch.json加上"resolveSourceMapLocations": ["!**/node_modules/**"]，否则跳转失败
Console输出不进VSCode Debug Console
这是个典型误解：VSCode的Debug Console默认只显示调试器主动评估的表达式结果（比如你在断点处敲 document.body），而不是浏览器全局 console 日志流。
- 想让
console.log出现在VSCode里，必须勾选调试配置里的"showAsyncStacks": true并确保"outputCapture": "console"（部分版本需手动加） - 更可靠的做法是：在浏览器DevTools的
Console面板里右键 →Save as...导出日志，或用console.table()/console.group()提高可读性 - 注意
console.debug()默认被浏览器过滤，需在浏览器Console面板点击Default Levels下拉菜单，勾选Debug
launch.json 里 url 和实际服务地址不一致，以及构建工具 sourcemap 输出路径与 webRoot 不匹配——这两个问题占了八成以上“断点无效”反馈。
