VS Code 通过 Debugger for Chrome 扩展与 Chrome 的 DevTools 协议通信实现调试，需正确配置 launch.json 和 Chrome 启动参数（如 --remote-debugging-port=9222、--user-data-dir），并匹配 webRoot、url 及 sourceMaps 设置，否则断点不命中、source map 失效；实时刷新依赖 Live Reload 或 HMR，与调试器解耦。
VS Code 本身不直接“管理” Chrome，而是通过 Debugger for Chrome 扩展与 Chrome 的 DevTools 协议通信，实现断点、变量查看、实时编辑同步等能力。关键不是装插件就完事，而是配置对 launch.json 和 Chrome 启动参数，否则改了代码没反应、断点不命中、source map 找不到文件是常态。
Chrome 必须启用远程调试端口
VS Code 的调试器靠 Chrome 开放的 --remote-debugging-port=9222 端口通信。不加这个参数，VS Code 连都连不上，会报错 Unable to launch browser: "Could not connect to debug port"。
- 手动启动：终端运行
chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug（--user-data-dir是必须的，避免影响日常 Chrome 数据） - Windows 用户注意：不能双击图标启动，必须用命令行；macOS 可用
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome路径调用 - 如果端口被占用（比如已有 Chrome 实例在跑），换端口如
9223，同时要同步改launch.json中的port
launch.json 配置必须匹配项目结构和 server 地址
很多人复制网上配置后断点无效，根本原因是 webRoot 或 url 指向错误，导致 VS Code 找不到源码映射关系。尤其当项目用 Vite、Webpack Dev Server 或本地 http-server 时，路径逻辑完全不同。
- 静态 HTML 文件（无构建工具）：
url填file:///path/to/index.html，webRoot填该 HTML 所在目录（如"${workspaceFolder}"） - Vite 项目：
url填http://localhost:5173（默认端口），webRoot填"${workspaceFolder}"，并确保vite.config.ts中build.sourcemap为true - Webpack Dev Server：
url填实际访问地址（如http://localhost:8080），webRoot填src目录（不是dist），否则断点打在打包后代码上 - 必须开启
sourceMaps：配置中加"sourceMaps": true，否则 JS 断点只在压缩后文件生效
实时修改 HTML/CSS/JS 后自动刷新或热更新？别依赖调试器
Debugger for Chrome 只负责调试，不处理文件变更监听和刷新。所谓“实时修改”，其实是靠浏览器自动重载（Live Reload）或框架 HMR（Hot Module Replacement）——这两者和 VS Code 调试器是解耦的，但容易混淆。
立即学习“前端免费学习笔记（深入）”；
- 纯静态页 +
http-server -c-1（禁用缓存）+ 浏览器 F5：最简方案，改完保存 → 切到浏览器按 F5 - Vite / Next.js / Vue CLI 项目：自带 HMR，改代码后组件局部更新，无需刷新，但前提是 VS Code 的
launch.json已正确指向 dev server 地址 - 想改完自动刷新？装 VS Code 插件
Live Server，右键 HTML 启动，它会起一个带 live reload 的 server，再用Debugger for Chrome连这个地址即可 - CSS 修改后不生效？检查 Chrome DevTools 的
Settings → Preferences → Network → Disable cache是否勾选（调试期间建议始终开启）
最常被忽略的一点：Chrome 启动参数里的 --user-data-dir 和 VS Code 的 launch.json 中的 runtimeExecutable（如果指定了 Chrome 路径）必须一致，否则 Chrome 会启动新用户环境，无法复用已打开的调试标签页，导致断点失效或找不到 source map。
