使用VS Code和Chrome调试器调试前端代码-VSCode-PHP中文网

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

P粉986688829

发布： 2025-12-03 19:31:02

原创

732人浏览过

安装Debugger for Chrome扩展并配置launch.json文件，通过launch或attach模式启动调试会话，结合断点、变量监视与控制台实现高效前端调试。

使用vs code和chrome调试器调试前端代码

调试前端代码时，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. 启动调试会话

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

启科网络PHP商城系统

启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。

查看详情

若使用 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”配置。