VSCode调试前端需Live Server与JavaScript Debugger配合：前者解决file://协议限制，提供HTTP服务；后者通过source map和webRoot映射实现断点调试，缺一不可。
VSCode 本身不直接“连接”浏览器，真正起作用的是插件 + 配置组合。最可靠、覆盖场景最全的方案就两个：用 Live Server 启服务预览，用 JavaScript Debugger 做断点联调——其他插件要么功能残缺，要么绕不开底层限制。
Live Server 解决 file:// 协议拦截问题
双击打开 HTML 文件走的是 file:// 协议，一旦代码里有 fetch('./api')、import './utils.js' 或相对路径资源引用，Chrome 就会报 net::ERR_FILE_NOT_FOUND 或 CORS error。这不是你代码写错了，是浏览器安全策略卡死的。
- 装官方插件：
Live Server（作者 Ritwick Dey），别选名字带 “Simple”“Mini” 的仿品 - 右键菜单出现
Open with Live Server的前提是：文件已保存（Ctrl+S），且当前编辑器标签页聚焦在该 HTML 上 - 启动后地址一定是
http://127.0.0.1:5500/xxx.html，不是file:///—— 这个协议切换才是关键 - 端口冲突？进 Settings → Extensions → Live Server →
liveServer.settings.port改成0（自动随机）或自定义值
JavaScript Debugger 实现 VSCode 断点映射到 Chrome
装了插件不等于能调试。VSCode 调试器和 Chrome 是靠 source map 和 webRoot 对齐源码位置的，配错就断点不生效、变量显示 undefined。
- 现代 VSCode（2025 年后）已内置
JavaScript Debugger，不用再装旧版Debugger for Chrome -
launch.json中必须设"type": "pwa-chrome"（不是"chrome"），否则新版 Chrome 会拒绝连接 -
"url"指向你本地服务地址（如"http://localhost:3000"），"webRoot"必须精确匹配源码路径，比如"${workspaceFolder}/src" - 如果用了构建工具（Vite/Webpack），确保生成的
.map文件没被忽略，且devtool设为"source-map"或"inline-source-map"
Browser Preview 不适合真调试，但适合快速视觉验证
它本质是嵌入一个 Chromium 实例，能渲染页面、响应 CSS 修改，但它不加载 sourcemap，也不支持断点、console.log 拦截、network 面板——你没法查 fetch 返回值，也没法单步执行 JS。
- 适合场景：改完一段 CSS，想秒看效果；对比设计稿和实现差异；检查响应式断点是否触发
- 不适合场景：调试异步逻辑、排查 API 返回异常、验证事件监听器是否绑定成功
- 启动后地址栏不可编辑，也不能手动输
http://localhost:3000—— 它只认配置里的startUrl，且不走真实网络栈，某些跨域请求仍会失败 - 如果发现白屏，先关掉所有其他浏览器插件（尤其广告屏蔽类），它们常劫持内嵌 Chromium 的 UA 或注入脚本
最容易被忽略的点是：Live Server 和 JavaScript Debugger 必须配合使用——前者提供可运行环境，后者依赖这个环境才能建立调试通道。单独装任何一个，都只能解决一半问题。
