Live Server仅适用于静态HTML文件的实时预览，不支持Vite/Webpack等构建工具生成的项目；Debugger for Chrome需正确配置sourceMap和launch.json才能断点调试源码，二者功能互补不可替代。
Live Server 和 Debugger for Chrome/Firefox 是浏览器开发中真正能省下大量手动刷新、跳转、查网络请求时间的两个插件，其他多数“预览类”插件要么功能重叠，要么在真实项目里容易出路径或 CORS 问题。
Live Server 启动后页面空白或 404
这通常不是插件坏了，而是它默认只服务当前打开文件所在目录，且不处理构建产物（比如 dist/ 或 build/）。如果你用的是 Vite、Webpack 或 Vue CLI，直接点 HTML 文件右键 “Open with Live Server”，大概率会 404。
- 确认你打开的是根目录下的
index.html，而不是子目录里的某个 HTML - 如果项目已构建，别用 Live Server，改用
npx serve -s dist或直接配launch.json调试构建后产物 - 需要自定义端口或根路径？在
.vscode/settings.json里加："liveServer.settings.port": 5173，但注意不要和 Vite 默认端口冲突
Debugger for Chrome 断点不命中
断点灰了、没反应、或者停在 bundle.js 里而不是源码，基本是 sourcemap 没对上。VS Code 不会自动猜你用的是 Webpack 还是 Vite，得手动告诉它。
- 确保项目生成了 sourcemap：Vite 开启
build.sourcemap: true，Webpack 设devtool: 'source-map' -
launch.json中必须配"sourceMapPathOverrides"，例如 Vite 项目常用：{"webpack:///src/*": "${workspaceFolder}/src/*"} - Chrome 浏览器要关掉“启用 JavaScript 源映射”以外的干扰选项，比如“忽略列表”里别误加了
node_modules
Browser Preview 插件打不开本地 URL
这个插件本质是内嵌 Chromium 实例，但它不走本地服务器逻辑，也不读 localhost 的响应头。所以它适合快速看纯静态 HTML，不适合调试带 API 或路由的 SPA。
- 只对
file://协议安全，http://localhost需要额外配置webRoot和url，且仍可能被 CORS 拦截 - 如果页面加载后白屏，检查控制台是否报
Mixed Content或Refused to load script—— Browser Preview 不支持 HTTPS 代理或自签名证书 - 替代方案更稳：用 Live Server + 真浏览器，或直接配 Debugger for Chrome 的
launch模式
真正卡住效率的从来不是插件数量，而是搞不清每个插件的边界——Live Server 不负责调试，Debugger 不负责热重载，Browser Preview 不处理构建流程。选错工具链，比不用插件还耗时间。
