安装Debugger for Chrome扩展并配置launch.json文件，通过launch或attach模式启动调试会话，结合断点、变量监视与控制台实现高效前端调试。
调试前端代码时，VS Code 配合 Chrome 调试器是一种高效的方式。你可以在熟悉的编辑器中设置断点、查看调用栈、监视变量，并与运行中的页面交互，无需频繁切换到浏览器开发者工具。
1. 安装并配置 Debugger for Chrome 扩展
在 VS Code 中使用 Chrome 调试器，首先需要安装官方扩展：
- 打开 VS Code，进入扩展商店（快捷键 Ctrl+Shift+X）
- 搜索 Debugger for Chrome 并安装
- 该扩展允许 VS Code 通过 Chrome 的远程调试协议连接到浏览器实例
2. 配置 launch.json 启动文件
在项目根目录下创建调试配置文件，让 VS Code 知道如何启动或连接 Chrome。
- 点击 VS Code 左侧的运行和调试图标（虫子形状）
- 点击“create a launch.json file”，选择 Chrome
- 生成的配置文件会放在 .vscode/launch.json 中
常见配置示例：
立即学习“前端免费学习笔记（深入）”；
{ "version": "0.2.0", "configurations": [ { "name": "Launch Chrome against localhost", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "webpack:///src/*": "${workspaceFolder}/src/*" } }, { "name": "Attach to Chrome", "type": "chrome", "request": "attach", "port": 9222", "webRoot": "${workspaceFolder}" } ] }说明：
- launch 模式：VS Code 自动启动 Chrome 实例并打开指定 URL
- attach 模式：连接到一个已运行且启用调试的 Chrome 实例
- webRoot 指定源码根目录，帮助映射调试路径
- sourceMapPathOverrides 解决 webpack 构建后路径映射问题
3. 启动调试会话
根据你的开发流程选择合适方式：
- 若使用 launch 模式，确保本地服务（如 React、Vue 项目）已在 http://localhost:3000 运行
- 在 VS Code 中按下 F5 或点击“运行”按钮，自动打开带调试权限的 Chrome 窗口
- 若使用 attach 模式，需先以调试模式启动 Chrome：
Windows 示例命令：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir="C:/temp/chrome-debug"然后在浏览器中打开你的页面，再在 VS Code 中启动“Attach to Chrome”配置。
4. 使用断点和调试功能
一切就绪后，你可以：
- 在 VS Code 的 JavaScript/TypeScript 文件中点击行号左侧设断点
- 刷新页面，执行到断点时自动暂停
- 查看当前作用域变量、调用栈、可以逐行执行（Step Over/Into）
- 在调试控制台（Debug Console）中执行表达式，检查 window、document 等对象
注意：确保你的项目构建时启用了 source map，否则无法在原始源码中正确断点。
基本上就这些。这套调试流程特别适合 React、Vue、Angular 等现代前端项目，能显著提升排查逻辑错误的效率。
