使用VS Code和Chrome调试器调试前端代码

安装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 中

常见配置示例：

立即学习“前端免费学习笔记（深入）”；

说明：

• launch 模式：VS Code 自动启动 Chrome 实例并打开指定 URL
• attach 模式：连接到一个已运行且启用调试的 Chrome 实例
• webRoot 指定源码根目录，帮助映射调试路径
• sourceMapPathOverrides 解决 webpack 构建后路径映射问题

3. 启动调试会话

根据你的开发流程选择合适方式：

jQuery移动端和桌面设备的轻量级幻灯片特效源码

jQuery移动端和桌面设备的轻量级幻灯片特效源码是一款支持移动端和桌面设备的轻量级jQuery幻灯片插件swipeslider的特效。它支持图片和其它HTML内容，支持幻灯片内容无限循环播放。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器，是一款

78

查看详情

• 若使用 launch 模式，确保本地服务（如 React、Vue 项目）已在 http://localhost:3000 运行
• 在 VS Code 中按下 F5 或点击“运行”按钮，自动打开带调试权限的 Chrome 窗口
• 若使用 attach 模式，需先以调试模式启动 Chrome：

Windows 示例命令：

然后在浏览器中打开你的页面，再在 VS Code 中启动“Attach to Chrome”配置。

4. 使用断点和调试功能

一切就绪后，你可以：

• 在 VS Code 的 JavaScript/TypeScript 文件中点击行号左侧设断点
• 刷新页面，执行到断点时自动暂停
• 查看当前作用域变量、调用栈、可以逐行执行（Step Over/Into）
• 在调试控制台（Debug Console）中执行表达式，检查 window、document 等对象

注意：确保你的项目构建时启用了 source map，否则无法在原始源码中正确断点。

基本上就这些。这套调试流程特别适合 React、Vue、Angular 等现代前端项目，能显著提升排查逻辑错误的效率。

以上就是使用VS Code和Chrome调试器调试前端代码的详细内容，更多请关注php中文网其它相关文章！