vscode 本身不内置浏览器调试能力，必须靠插件桥接编辑器与浏览器的调试协议；2026年主流版本已整合为内置javascript debugger，chromium系浏览器（chrome/edge）直接启用即可，firefox需单独安装debugger for firefox，edge用户还可选microsoft edge tools扩展以获得嵌入式devtools。
VSCode 本身不内置浏览器调试能力，必须靠插件桥接编辑器与浏览器的调试协议。装错插件、装了却没配 launch.json、或插件版本与浏览器/运行时不匹配，都会导致断点不生效、页面打不开、变量看不到——这不是你代码的问题，是调试链路断在了中间。
装哪个插件？Chrome/Firefox/Edge 各自对应什么
现代 VSCode（2026 年主流版本）已将浏览器调试能力整合进内置的 JavaScript Debugger，不再需要单独安装 “Debugger for Chrome” 这类旧插件。但要注意：
- 如果你用的是 Chromium 内核浏览器（Chrome、Edge、Brave），直接启用内置调试器即可，无需额外安装
- Firefox 需要额外安装
Debugger for Firefox插件（由 Mozilla 官方维护），因为其调试协议与 Chromium 不兼容 - Edge 用户可选择内置调试器，也可安装
Microsoft Edge Tools扩展以获得 DevTools 嵌入式预览功能 - 装了多个同类插件（比如同时启用了
Debugger for Chrome和JavaScript Debugger），反而可能触发冲突，禁用旧插件更稳妥
为什么装完插件还不能 F5 调试？关键在 launch.json
插件只是“司机”，launch.json 才是“导航路线”。没有它，VSCode 不知道该启动浏览器还是附加到已有标签页、该访问哪个 URL、源码和网页路径怎么映射。
-
type必须设为pwa-chrome（Chromium 系）、firefox（Firefox）或pwa-msedge（Edge），不能写成chrome（旧版已弃用） -
request分两种：launch表示 VSCode 启动新浏览器实例；attach表示附加到已打开且启用了远程调试的浏览器标签（需手动加--remote-debugging-port=9222启动参数） -
webRoot必须指向你本地源码根目录，例如"${workspaceFolder}/src"，否则断点无法正确映射到源文件 - 如果项目跑在本地开发服务器（如
vite dev或npm start），url应填"http://localhost:5173"这类实际地址，而非file://协议路径
Live Server 插件不是调试插件，但它能解决“页面打不开”的假问题
很多用户点了 F5 没反应，第一反应是插件没装对，其实常因 HTML 文件没走 HTTP 服务——浏览器出于安全限制，会拒绝加载 file:// 协议下的模块脚本、fetch 请求、Source Map 等。
-
Live Server插件作用是起一个本地 HTTP 服务（默认http://127.0.0.1:5500），让静态页面跑在合法协议下 - 它不参与断点调试逻辑，但它是调试能跑起来的前提条件之一
- 右键 HTML 文件选 “Open with Live Server” 后，再在 VSCode 中按 F5，才能真正触发调试流程
- 若你用的是 Vite/Webpack 等工具链，它们自带开发服务器，此时
Live Server反而多余，甚至可能端口冲突
最容易被忽略的其实是浏览器自身的调试开关：Chrome 默认关闭远程调试端口，Edge 需手动启用开发者模式，Firefox 要在 about:config 里开启 devtools.debugger.remote-enabled。插件和配置再准，浏览器这扇门没开，VSCode 就永远连不上。
