VS Code中Attach to Chrome调试功能失效问题排查

以下是针对你的场景的具体修复步骤：

1. 确保Chrome仅以调试模式启动 #

关闭所有Chrome窗口，包括后台隐藏的进程（打开任务管理器，结束所有chrome.exe进程），然后重新执行你提供的启动命令：

C:\Users\MyUsername\AppData\Local\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222

注意：不能同时启动普通Chrome实例和带调试端口的实例，否则VS Code无法正确附加。

2. 完善Attach配置的url字段 #

你的当前Attach配置缺少目标页面的匹配规则，VS Code无法定位到Live Server运行的页面。修改launch.json中的Attach配置，添加url字段：

{
  "name": "Attach to Chrome",
  "type": "chrome",
  "request": "attach",
  "port": 9222,
  "webRoot": "${workspaceFolder}",
  "url": "http://localhost:5500/*"
}

通配符*会匹配该端口下的所有页面，确保VS Code能关联到你的应用页面。

3. 验证webRoot路径映射 #

• 检查你的项目文件是否直接在${workspaceFolder}根目录下，如果代码存放在子文件夹（比如src），需要将webRoot修改为${workspaceFolder}/src
• 可以在JS代码中添加console.log(__filename)，运行后查看控制台输出的文件路径，确认和webRoot的映射是否一致。如果路径不匹配，调整webRoot直到两者对应。

4. 禁用缓存避免旧代码干扰 #

调试时浏览器缓存可能导致加载旧版本代码，可通过两种方式解决：

• 在Chrome开发者工具的「Network」面板勾选「Disable cache」
• 或者在Attach配置中添加禁用缓存的参数：

"runtimeArgs": ["--disable-cache"]

5. 检查断点有效性 #

确保断点设置在可执行的代码行上，避免设置在注释、空行、变量声明等非执行代码位置。如果是动态加载的脚本，可先通过console.log确认代码已加载，再尝试设置断点。

内容的提问来源于stack exchange，提问作者Double Penetration