debugger for chrome 调试前端 js 必须正确配置 launch.json：url 需匹配实际服务地址（如 vite 用 http://localhost:5173，cra 用 http://localhost:3000），webroot 应设为源码根目录（如 "${workspacefolder}/src"），并确保 source map 已启用且调试器成功 attach。
Debugger for Chrome 是前端 JS 调试最直接有效的入口，但它不是开箱即用的“点开就跑”，配置错一步，断点就失效、变量不显示、源码映射丢失——你看到的是白屏或 Uncaught SyntaxError，而不是你想查的 data 值。
launch.json 配置必须匹配实际运行环境
本地开发通常走 http://localhost:3000 或 http://127.0.0.1:8080，但插件默认的 url 值是 http://localhost:8080，不改就 404；更隐蔽的问题是 webRoot 指向错误路径，导致断点打在构建后代码（如 dist/main.js）上，却无法映射回 src/index.js。
-
webRoot应设为源码根目录，比如"${workspaceFolder}/src"，而非"${workspaceFolder}" - 若用 Vite，
url通常是"http://localhost:5173"；Create React App 则多为"http://localhost:3000" - 启用 source map：确保构建工具生成
.map文件（Vite 默认开启，Webpack 需确认devtool: 'source-map'）
断点不触发？先看调试器是否真正 attach 上
常见现象：点了 F5，浏览器弹出来了，但断点灰色、debugger 语句被跳过、控制台没输出任何调试日志。这不是代码问题，而是调试器没连上 DevTools。
- 检查 VS Code 右下角状态栏，出现
Debugger for Chrome图标且显示 “Running” 才算成功 attach - 如果只看到 “Launching…” 卡住，大概率是端口被占，换一个
port（如加"port": 9223） - Chrome 必须关闭所有其他实例（尤其后台残留进程），否则调试协议冲突
变量作用域和异步调试容易被忽略
在 async/await 或 Promise.then() 里打断点，常发现 this、event 或响应数据为空——不是没传，是断点位置没选对。
- 不要在
fetch()行打断点，它只返回 Promise，数据还没回来；要打在.then(res => { /* 这里 */ })或const data = await fetch(...)后一行 -
console.log和断点混用时，注意执行顺序：debugger会暂停，但console.log已执行完毕，变量可能已被 GC - React/Vue 组件内，
props和state在 DevTools 的 “Scope” 面板里才完整可见，编辑器内 hover 查看可能只显示初始值
调试器不是万能的，它依赖正确的环境链路：构建 → 服务 → 浏览器 → VS Code → source map。任一环出问题，你看到的就不是逻辑 bug，而是配置 bug。真正在意效率的人，会花 5 分钟配好 launch.json，而不是每次手动刷新 + 控制台查 10 分钟。
