VS Code 通过本地 HTTP 服务（如 live-server 或 http-server）配合 source map 和 Chrome 调试协议实现网页实时调试，需配置 launch.json 并启用 Chrome 远程调试端口，断点须打在原始源码上，浏览器与 VS Code 各司其职、互补协同。
VS Code 本身不直接渲染网页，所谓“实时调试”本质是让 VS Code 与浏览器开发者工具协同工作——关键在于启动一个本地 HTTP 服务，并启用源码映射（source map）和调试协议对接。下面直说怎么做。
用 live-server 或 http-server 启动本地服务
直接双击打开 HTML 文件（file:// 协议）会导致跨域、无法加载模块、断点失效等问题。必须走 http://localhost。
-
live-server自动刷新 + 支持热重载，适合纯前端静态页：npm install -g live-server live-server --port=5500
-
http-server更轻量，无自动刷新但更稳定：npx http-server -p 5500 -c-1
（-c-1禁用缓存，避免 JS/CSS 修改不生效） - VS Code 插件如
Live Server（作者：ritwickdey）点右下角「Go Live」即可，它底层调的就是live-server，但注意它默认端口是5500，若被占用会报错EADDRINUSE
在 VS Code 中配置 launch.json 连接 Chrome
只有配好这个，才能在 VS Code 里打断点、看变量、单步执行——否则只是编辑器，不是调试器。
- 项目根目录建
.vscode/launch.json，内容如下（适配 Chrome）：{ "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:5500/index.html", "webRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/src/*", "webpack:///src/*": "${webRoot}/src/*", "webpack:///./*": "${webRoot}/*" } } ] } -
url必须与你启动的服务地址完全一致（包括端口），否则 VS Code 找不到页面上下文 - 如果用 Vite / Webpack / Next.js 等构建工具，它们自带 dev server，此时应把
url指向对应地址（如http://localhost:3000），并确认构建产物启用了devtool: 'source-map'（Webpack）或build.sourcemap: true（Vite）
断点不命中？检查这三个地方
这是最常卡住的环节，不是代码问题，而是环境没对齐。
- 浏览器是否用的是 **已启用远程调试的 Chrome 实例**？VS Code 调试依赖 Chrome 的
--remote-debugging-port=9222。可手动启动：chrome.exe --remote-debugging-port=9222 --user-data-dir="C:/temp/chrome-debug"
（Windows）；Mac/Linux 类似。不要用平时日常使用的 Chrome 窗口，它可能禁用了调试端口 - VS Code 的断点是否打在了 **原始源码** 上（如
src/index.ts），而不是编译后的dist/main.js？如果没看到源码映射，检查浏览器开发者工具的Sources面板左侧是否展开webpack://或file://，里面有没有你的 TS/JS 源文件 - HTML 中引入的脚本是否加了
type="module"或使用了import？这类模块默认不支持 inline script 断点，需确保脚本通过加载，且路径可被映射
浏览器开发者工具和 VS Code 联动时的真实分工
别指望一个工具包揽所有：浏览器 DevTools 专精运行时检查（DOM 变化、网络请求、性能火焰图），VS Code 专精逻辑调试（断点、调用栈、作用域变量、条件断点）。两者不是替代关系，而是互补。
- 改样式、查元素、测响应式 → 用浏览器的
Elements和Toggle device toolbar - 看 fetch 请求是否发出、状态码多少、响应体结构 → 用
Network面板，VS Code 不管这个 - 想在
fetch().then(...)里停住，看res.json()返回什么 → 在 VS Code 的src/api.ts里打个断点，F5 启动调试，它会自动跳转到对应源码行 - 浏览器里按 F12 打开 DevTools 后，切到
Sources→ 右键任意 JS 文件 →Map to network resource可手动关联本地文件（当 source map 失效时的备选方案）
真正难的不是配通，而是每次换框架（Vite → Remix → SvelteKit）都要重新核对 sourcemap 输出路径和 webRoot 映射规则。这些细节不写进文档，只藏在各框架的 CLI 日志或构建配置里。
