Live Server 与 Debugger for Chrome 需协同使用以摆脱手动刷新循环；常见问题包括 Live Server 不刷新（因 ignoreFiles 配置错误、缺失入口 HTML 或与构建工具冲突）、Debugger 断点失效（webRoot 路径错误或 sourceMap 未启用）、Chrome network 面板异常（需配置 runtimeArgs 或避免 CORS）。
Live Server 是前端本地预览的基线选择，Debugger for Chrome 是调试闭环的关键一环，二者配合才能真正摆脱“改-切-刷-查”循环。
Live Server 启动后页面不自动刷新？检查这三处
常见现象是点击 Go Live 后浏览器打开旧内容，或修改保存后无反应。
-
liveServer.settings.ignoreFiles配置误加了**/*.html或index.html—— 这会导致 HTML 文件变更被跳过监听 - 项目根目录下没有可识别的入口 HTML（如
index.html），Live Server 默认只对资源管理器中「当前选中文件」或「打开的 HTML 标签页」生效 - 使用了构建工具（如 Vite、Webpack）却仍启用了 Live Server：两者端口冲突且热更新机制重叠，应直接用
vite preview或npm run dev替代
Debugger for Chrome 断点不命中？重点看 webRoot 和 sourceMap
断点灰掉、F5 启动后跳过、控制台报 Uncaught ReferenceError 但源码里明明有定义——大概率是路径映射没对上。
-
webRoot必须指向你编辑的源码目录，不是构建产物目录。例如项目结构为/src/main.ts→/dist/main.js，则webRoot应设为"${workspaceFolder}/src" - TS 或 Vue SFC 项目必须开启 sourceMap：
"compilerOptions": { "sourceMap": true }（tsconfig.json），否则断点无法回溯到 .ts 或 .vue 文件 - 若用 Vite，需确认
vite.config.ts中build.sourcemap设为true，且开发模式下默认已启用，无需额外配置
Chrome 调试时 network 面板空白或 request headers 不全？
VS Code 内嵌调试器调用的是 Chrome 实例，但默认启动参数不包含完整 DevTools 功能。
立即学习“前端免费学习笔记（深入）”；
- 在
launch.json中添加"runtimeArgs": ["--auto-open-devtools-for-tabs"]，可强制打开完整 DevTools 窗口 - network 面板数据依赖页面是否真实发起请求。静态 HTML + JS 直接读取本地 JSON 文件会触发 CORS，此时 network 可能只显示 pending 或 failed —— 改用 Live Server 提供的
http://127.0.0.1:5500/data.json路径访问 - 若需拦截/修改请求，必须启用
ChromeDebuggingAttachment并确保liveServer.settings.CustomBrowser指向 Chrome，否则 VS Code 调试器无法接管网络栈
真正卡住人的往往不是插件装没装，而是 webRoot 指错了目录、ignoreFiles 拦截了关键文件、或者误把构建产物当源码调试 —— 这些细节不会报错，只会让一切“看起来正常，实则失效”。
