Live Server 启动本地服务后，Chrome 调试连不上需确保：Live Server 配置 AdvanceCustomBrowserCmdLine 启用远程调试端口（如 chrome --remote-debugging-port=9222），Debugger for Chrome 已启用，launch.json 配置正确，且 Chrome 必须全新启动（关闭所有实例后重开）。
VSCode 本身不直接支持“外部浏览器窗口 + 实时联动调试”的开箱即用模式，必须依赖扩展配合特定配置才能达成。核心路径只有一条：用 Live Server 启动本地服务 + Debugger for Chrome（或 js-debug）连接调试，vscode-browser-preview 则是编辑器内嵌方案，不走外部窗口路线。
Live Server 启动后，Chrome 调试连不上怎么办
这是最常卡住的环节。问题不在代码，而在端口、协议和启动方式是否匹配：
- 确保
Live Server已启用liveServer.settings.AdvanceCustomBrowserCmdLine配置，例如填入：chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check -
Debugger for Chrome扩展已安装且启用；VS Code 的.vscode/launch.json中必须有对应配置，不能只靠自动发现 - Chrome 必须是**全新启动**（非已有实例），否则
--remote-debugging-port不生效；关闭所有 Chrome 进程再试 - 如果用的是 Edge 或 Firefox，需换用
js-debug扩展，并在launch.json中指定"type": "pwa-msedge"或"type": "pwa-firefox"
为什么修改 HTML/CSS 后外部浏览器不自动刷新
Live Server 默认只监听文件变更并触发刷新，但某些场景下会失效：
- 文件保存未触发（如 VS Code 设置了
files.autoSave为off，又没手动 Ctrl+S） - 项目根目录不对：Live Server 只对工作区根目录下的变更敏感，子文件夹需手动右键 → “Open with Live Server”
- 使用了构建工具（如 Vite、Webpack）：Live Server 无法感知打包产物变更，应改用对应 dev server（
vite preview或webpack serve） - 浏览器禁用了 JavaScript 或插件拦截了 Live Server 注入的刷新脚本（检查控制台是否有
livereload.js加载失败）
调试时断点不命中，变量显示为 undefined
这不是代码问题，而是源码映射（source map）未正确加载或路径错位：
- 确认项目构建时生成了
.map文件，且devtool配置为source-map或inline-source-map（Webpack/Vite） - 在
launch.json中检查"webRoot"是否指向实际服务根目录（如"${workspaceFolder}"），而非构建输出目录 - Chrome DevTools 的 “Settings → Preferences → Sources” 中勾选
Enable JavaScript source maps和Enable CSS source maps - 若用 TypeScript，确保
tsconfig.json中sourceMap为true，且编译后 .js 和 .map 文件在同一层级
多个外部窗口间如何避免调试冲突
一个 Chrome 实例只能被一个调试器连接；多窗口调试必须分端口或分实例：
- 每个 Live Server 实例绑定不同端口（如
5500、5501），并在launch.json中分别配置"port"对应值 - 用
--user-data-dir参数启动隔离的 Chrome 实例，避免会话和调试端口抢占 - 不要同时运行多个
Debugger for Chrome调试会话指向同一端口；VS Code 会在调试面板顶部提示端口占用 -
js-debug支持更宽松的多目标连接，但需在launch.json中显式设置"urlFilter"区分不同页面
真正麻烦的不是配置本身，而是 Chrome 调试协议（CDP）与本地服务之间的握手时机——它不报错，只静默失败。每次改动配置后，务必重启 Chrome 实例和 VS Code 调试会话，别信“热重载”。
