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 但源码里明明有定义——大概率是路径映射没对上。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
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 拦截了关键文件、或者误把构建产物当源码调试 —— 这些细节不会报错，只会让一切“看起来正常，实则失效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
