VSCode的Debugger for Chrome：在VSCode中调试网页_网络技术

若VSCode中Debugger for Chrome无法触发断点或连接失败，需依次检查：一、安装启用官方扩展；二、配置launch.json中type为pwa-chrome并指定file路径；三、终端命令启动Chrome启用--remote-debugging-port=9222；四、用lsof检查并释放9222端口，允许VSCode和Chrome通过防火墙；五、设置断点后启动调试，确认状态栏显示DEBUGGING及Chrome图标。

如果您在 VSCode 中使用 Debugger for Chrome 扩展调试网页时无法触发断点或连接失败，则可能是由于配置缺失、Chrome 启动参数不匹配或端口被占用所致。以下是解决此问题的步骤：

本文运行环境：MacBook Air，macOS Sequoia。

一、安装并启用 Debugger for Chrome 扩展

该扩展是 VSCode 与 Chrome 浏览器建立调试通信的基础组件，必须正确安装且处于启用状态。

1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。

2、在搜索框中输入 Debugger for Chrome，找到由 Microsoft 发布的官方扩展。

3、点击“安装”，安装完成后点击“重新加载”按钮使扩展生效。

二、配置 launch.json 启动项

launch.json 定义了调试会话的运行方式，包括目标 URL、端口、是否自动打开浏览器等关键参数。

1、在项目根目录下打开命令面板（Cmd+Shift+P），输入并选择 Debug: Open launch.json。

2、若提示选择环境，选择 Chrome；若已存在配置文件，则在 configurations 数组中添加新对象。

3、添加如下配置项（适配本地 HTML 文件）：

"configurations": [{
  "type": "pwa-chrome",
  "request": "launch",
  "name": "Launch Chrome against index.html",
  "file": "${workspaceFolder}/index.html"
}]

三、以远程调试模式启动 Chrome

Chrome 必须以启用远程调试协议的方式启动，否则 VSCode 无法与其建立 WebSocket 连接。

1、完全退出所有正在运行的 Chrome 实例（包括后台进程）。

2、在终端中执行以下命令启动 Chrome：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --disable-extensions

3、确认终端未报错，且 Chrome 窗口正常打开并显示地址栏右上角无扩展图标。

四、检查端口占用与防火墙设置

VSCode 默认通过 9222 端口与 Chrome 通信，若该端口被其他进程占用或被系统防火墙拦截，调试将中断连接。

1、在终端执行 lsof -i :9222 查看端口占用进程。

2、若返回结果非空，记录 PID 并执行 kill -9 [PID] 强制终止。

3、前往“系统设置 > 网络 > 防火墙 > 防火墙选项”，确认 Visual Studio Code 和 Google Chrome 均被允许传入连接。

五、验证调试器连接状态

VSCode 调试面板需显示活动会话且控制台输出 Chrome 实例信息，表明通道已就绪。

1、在 index.html 对应的 TypeScript 或 JavaScript 文件中任意行左侧灰色区域点击，设置一个断点。

2、按 Cmd+Shift+D 切换到调试视图，从顶部下拉菜单选择 Launch Chrome against index.html。

3、点击绿色三角形“开始调试”，观察底部状态栏是否出现 DEBUGGING 提示及 Chrome 图标。

# javascript # java # vscode # html # js # json # go # typescript # 防火墙 # 浏览器

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