使用VS Code和Chrome调试器调试前端代码_网络技术

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

发布时间 - 2025-12-03 00:00:00 点击率：次

安装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 等现代前端项目，能显著提升排查逻辑错误的效率。

# vue # react # javascript # java # vscode # js # 前端 # json # go # typescript

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：VS Code中C/C++开发的CMake与Makefile

下一篇：Win11桌面右键“刷新”后图标位置重置怎么办_Win11彻

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：VS Code中C/C++开发的CMake与Makefile

下一篇：Win11桌面右键“刷新”后图标位置重置怎么办_Win11彻