VSCode集成外部预览窗口实现实时联动调试-VSCode-PHP中文网

live server 启动本地服务后，chrome 调试连不上需确保：live server 配置 advancecustombrowsercmdline 启用远程调试端口（如 chrome --remote-debugging-port=9222），debugger for chrome 已启用，launch.json 配置正确，且 chrome 必须全新启动（关闭所有实例后重开）。

vscode集成外部预览窗口实现实时联动调试

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 默认只监听文件变更并触发刷新，但某些场景下会失效：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

文件保存未触发（如 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 文件在同一层级