首先安装VSCode的Debugger for Chrome或Edge插件，再配置launch.json文件指定浏览器启动参数或附加到已运行实例，设置断点后通过F5在编辑器内完成调试全流程。
在前端开发中，直接在编辑器里调试浏览器中的代码能大幅提升效率。VSCode 结合 Debugger for Chrome 或新版的 Microsoft Edge: DevTools 插件，可以让你不离开编辑器就完成断点调试、变量查看和代码执行控制。
安装必要插件
要在 VSCode 中调试浏览器代码，先确保安装了合适的调试扩展：
- Debugger for Chrome：适用于 Google Chrome 浏览器
- Debugger for Edge：适用于 Microsoft Edge（基于 Chromium）
打开扩展面板（Ctrl+Shift+X），搜索并安装对应插件。
配置 launch.json 调试文件
调试需要一个配置文件来告诉 VSCode 如何启动浏览器并连接调试目标。
立即学习“前端免费学习笔记（深入）”；
- 点击左侧运行图标（或按 Ctrl+Shift+D）进入运行视图
- 点击“创建 launch.json 文件”
- 选择环境，如 Chrome 或 Edge
生成的 launch.json 示例（以 Chrome 为例）：
{ "version": "0.2.0", "configurations": [ { "name": "Launch Chrome against localhost", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ] }说明：
- url：你的应用运行地址，比如 React 默认是 localhost:3000
- webRoot：源码根目录，用于映射断点
- 使用 request: "launch" 会自动打开浏览器；设为 "attach" 可连接已运行的实例
设置断点并开始调试
在 VSCode 编辑器中打开 JavaScript 或 TypeScript 文件，点击行号左侧设置断点（红点）。
按下 F5 或点击“运行和调试”按钮，VSCode 会自动启动 Chrome 并加载指定页面。
当代码执行到断点时，程序暂停，你可以：
- 查看当前作用域的变量值
- 单步执行（Step Over / Step Into）
- 在调试控制台（Debug Console）中运行表达式
- 观察调用栈（Call Stack）
所有操作都在 VSCode 内完成，无需切换到浏览器开发者工具。
调试本地开发服务器（如 React、Vue）
如果你使用 create-react-app、Vue CLI 或 Vite 等工具，确保服务已在运行（如 npm start），然后调整 launch.json 使用 attach 模式：
{ "name": "Attach to Chrome", "type": "chrome", "request": "attach", "port": 9222, "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src" }注意：启动 Chrome 时需启用远程调试。例如：
chrome.exe --remote-debugging-port=9222或者使用脚本自动配置。
基本上就这些。只要配置一次 launch.json，之后每次都能在 VSCode 里流畅调试前端代码，提升开发体验。
