Chrome DevTools Protocol 实战：React 页面空白、按钮点不动的排查与解决

一、现象：页面明明加载了，却是空白的

用 Chrome DevTools Protocol（CDP）驱动浏览器做自动化时，最容易踩的一个坑：导航完成后 document.title 正常、DOM 节点也在，但页面就是一片空白，React 写的按钮全部 disabled，点击毫无反应。

排查的第一步是看两个状态：

document.visibilityState   // "hidden"
document.hasFocus()        // false

如果 visibilityState 是 "hidden"，很多前端框架（尤其 React/Next.js）会推迟或挂起渲染流程，页面不会正常 hydrate，事件处理器也就没绑上。此时用 JS 直接调用 el.click() 表面上"成功"，实际上什么都没发生。

二、解决：把页面"点亮"

两条 CDP 指令即可：

Emulation.setFocusEmulationEnabled  { enabled: true }
Page.setWebLifecycleState           { state: "active" }

第一条让浏览器认为页面始终持有焦点，第二条把页面生命周期强制置为 active。注意：每次导航之后都需要重新执行，因为导航会重置状态。加上这两条之后，同样的页面会立刻渲染完整，按钮可点。

三、几个配套的坑

1. 坐标点击要落到真实元素上。自动化里最常见的"按钮点了没反应"，很多时候根本不是按钮的问题——页面上有一层看不见的遮罩（modal 蒙层、提示条），点击全被它吃掉了。用 document.elementFromPoint(x, y) 检查落点是什么元素，如果拿到的不是目标按钮，先把遮罩关掉再点。

2. JS click 与真实点击不等价。React 组件如果只监听 mousedown/mouseup 或依赖 trusted event，el.click() 触发不了。用 CDP 的 Input.dispatchMouseEvent 派发真实鼠标事件，坐标取 getBoundingClientRect() 的中心。

3. 隐藏的模板节点。页面上常有多份同名元素，第一份是 display:none 的模板。选元素时过滤掉宽高为 0 的：

[...document.querySelectorAll('.btn')]
  .filter(e => e.getBoundingClientRect().width > 0)

4. 慢页面的求值超时。重型页面主线程长期繁忙，默认 5 秒的求值超时会让所有操作看起来"随机失败"。对这类页面把求值超时放大到 30-60 秒，并且每次操作后留出等待时间。

四、小结

后台运行的 Chrome 和前台浏览器的差别主要就在焦点与生命周期上。遇到"DOM 在但页面空白/事件无效"，先查 visibilityState 和 hasFocus()，用 setFocusEmulationEnabled 加 setWebLifecycleState 修复，再用 elementFromPoint 排查遮罩，绝大多数"点了没反应"的问题都能定位。这套排查顺序在我维护的自动化任务里，把这类问题的定位时间从半小时缩短到了几分钟。