若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 图标。
