Chrome调试需命令行启动并配置pwa-chrome、正确webRoot和sourceMapPathOverrides；旧版Debugger for Chrome已弃用，JavaScript Debugger内置即可。
装插件本身不难，难的是装完发现断点灰色、连不上、跳转错文件——根本原因不是插件没装对，而是调试协议没打通，或者配置和 Chrome 实际运行状态不匹配。
Chrome 调试插件已内置，不用单独装 Debugger for Chrome
VS Code 1.80+ 版本起，JavaScript Debugger 已作为核心功能内置，不再需要手动安装旧版 Debugger for Chrome 扩展。如果你在扩展市场搜到它，说明你看到的是遗留版本，装了反而可能引发冲突。
- 打开命令面板（
Ctrl+Shift+P或Cmd+Shift+P），输入Developer: Toggle Developer Tools，确认右下角没有报错，说明调试器正常加载 - 扩展市场里搜
JavaScript Debugger，看到“By Microsoft”且状态为 “Enabled (Built-in)” 就够了 - 如果误装了旧插件，建议禁用或卸载，避免
type: "chrome"这类已弃用配置被意外激活
launch.json 必须用 pwa-chrome，且 port 和 url 要对齐
pwa-chrome 是当前唯一支持现代前端（ESM、Source Map v3、Vite/HMR）的调试类型。用错类型会导致断点变灰、无法停靠、变量显示为空。
-
"type": "pwa-chrome"—— 不是"chrome"，也不是"firefox"（除非你真用 Firefox） -
"url": "http://localhost:5173"—— 必须是真实可访问的 HTTP 地址，不能是file:///（除非纯静态 HTML 且配了file字段） -
"port": 9222—— 这个端口必须和 Chrome 启动时的--remote-debugging-port=9222完全一致 - 如果项目用 Vite，
"webRoot": "${workspaceFolder}"；如果是 Webpack + src 目录结构，通常要写成"webRoot": "${workspaceFolder}/src"
Chrome 必须命令行启动，双击图标无效
双击桌面图标打开的 Chrome 完全不响应 VS Code 的调试连接请求，会报 Unable to launch browser: "Could not connect to localhost:9222"。这不是插件问题，是远程调试协议根本没开。
- 先彻底关掉所有 Chrome 进程：
taskkill /f /im chrome.exe（Windows）或pkill -f "Google Chrome"（macOS/Linux） - 用命令行启动（端口与
launch.json中一致）：chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug（macOS/Linux）"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\tmp\chrome-debug"（Windows） -
--user-data-dir是强制项，不加 Chrome 会拒绝以调试模式启动 - 端口被占？换
9223或9224，但launch.json里的port和url（若含端口）必须同步改
断点灰色？优先查 webRoot 和 source map 映射
断点变灰 = VS Code 看到了断点，但不知道该映射到哪行源码。常见于构建工具场景，比如 Vite 或 Webpack 输出的 bundle.js 与源码路径不匹配。
- 打开开发者工具 → Sources 面板，看左侧是否能展开你的源码文件（如
src/App.tsx）。如果只看到webpack://或app://前缀，说明 source map 没正确解析 - Vite 项目常用：
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" } - Webpack 项目可能需要：
"sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/src/*" } - 检查生成的
.map文件里sources字段内容，再反推怎么写sourceMapPathOverrides
真正卡住人的从来不是“怎么装”，而是 Chrome 没用命令行启动、launch.json 里用了过时的 type: "chrome"、或者 webRoot 指向了构建产物目录而非源码目录——这三处错一个，断点就进不去。
