vscode调试器连不上chrome的根本原因是调试协议通信断开或端口未暴露，需确保chrome启动时启用--remote-debugging-port、launch.json配置正确（type为pwa-chrome）、sourcemap路径映射准确，并避免live server等不支持cdp的服务器。
VSCode 调试器连不上 Chrome 怎么办
根本原因通常是调试协议通信断开或端口未暴露。VSCode 默认用 JavaScript Debugger（已整合进核心）通过 Chrome DevTools Protocol（CDP）连接浏览器，但若 Chrome 未启动调试服务、或 launch.json 配置与实际运行环境不匹配，就会卡在“正在连接…”或报错 Cannot connect to runtime process。
- 确认 Chrome 实例是否真正监听调试端口：手动执行
chrome --remote-debugging-port=9222 --no-first-run（macOS/Linux）或start chrome --remote-debugging-port=9222（Windows），再检查http://localhost:9222/json是否返回 JSON 列表 - launch.json 中
type必须为pwa-chrome（旧版chrome类型已弃用），且request字段要和启动方式一致：launch对应自动启浏览器，attach对应连已有实例 - 如果项目跑在
http://localhost:3000，但源码在src/下，webRoot设为${workspaceFolder}不够——必须配合sourceMapPathOverrides映射构建路径，例如"webpack:///./src/*": "${webRoot}/src/*"
为什么 Puppeteer 脚本里打不了断点
因为 Puppeteer 默认以无头模式启动 Chromium，不暴露 DevTools UI，VSCode 无法建立稳定调试会话。即使加了 headless: false，若没显式启用调试通道，断点仍会跳过或变量显示为 undefined。
- 最简方案：改用
puppeteer.launch({ devtools: true, headless: false })，它会弹出带完整 DevTools 的窗口，VSCode 自动识别并 attach - 更可控方案：用
puppeteer-core复用外部 Chrome 实例。先手动启动 Chrome 带--remote-debugging-port=9222，再在代码中const browser = await puppeteerCore.connect({ browserWSEndpoint: 'ws://localhost:9222' }) - TypeScript 项目务必开启
sourceMap：tsconfig.json 中设"sourceMap": true，且编译后 .js 文件旁要有对应 .js.map 文件，否则断点位置错乱
Live Server 和调试器冲突怎么解
Live Server 插件默认用内置简易 HTTP 服务器（如 http://127.0.0.1:5500），但它不支持 CDP 调试协议，VSCode 无法对其页面设置断点。你看到的“刷新生效”只是文件重载，不是真正的调试会话。
- 别用 Live Server 做调试入口——它只适合快速预览 HTML/CSS。真要调试 JS，必须走
pwa-chrome配置，指向本地开发服务器（如 Vite、Webpack Dev Server、Next.js 的dev命令） - 若坚持用 Live Server，可临时加个
debugger;语句触发浏览器 DevTools 断点，但这绕过了 VSCode，变量监控、单步执行等功能全失效 - 常见陷阱：launch.json 里 url 写成
file:///path/to/index.html—— 这种 file 协议下，现代 Chrome 会禁用 fetch/XHR，且 source map 加载失败
AI 浏览器智能体调试时截图不更新
VSCode 内置的浏览器智能体（如 Roo Code 或 Copilot Browser Agent）依赖 browser_action 工具抓取 DOM 快照，但若页面有动态渲染（React/Vue）、或 JS 执行被阻塞，截图可能停留在初始状态，导致 AI 判断错误。
- 确保目标页面已完全加载：在智能体指令后加等待逻辑，比如 “等待元素
#app出现后再截图” 而非 “打开页面立刻截图” - 避免截图时页面处于 JS 错误中断状态：检查控制台是否有未捕获异常（
Uncaught TypeError等），这类错误会让 React/Vue 挂起，DOM 不再更新 - AI 智能体对 iframe、Shadow DOM 内容识别有限——如果关键元素在 iframe 里，需明确指令 “切换到 iframe 并截图”，否则默认只截主文档
