Chrome的monitorEvents方法在指定网站无法生效该如何解决？

• 该站点基于React框架开发，绝大多数交互通过React合成事件体系处理，而非直接绑定到DOM/ document的原生事件。monitorEvents作为Chrome DevTools提供的非标准调试API，仅能捕获原生DOM层级触发的事件，无法监听到React内部代理处理的合成事件。
• 站点做了交互安全限制，大量事件回调内部调用了event.stopImmediatePropagation()阻断事件冒泡，且很多高频交互使用PointerEvent系列事件（pointerdown、pointermove等）而非monitorEvents默认监听的基础MouseEvent/KeyboardEvent列表，未显式指定事件类型时无法匹配捕获。
• 部分交互逻辑绑定在Shadow DOM节点内部，直接监听外层document无法触达内部节点的事件触发。

• 手动绑定捕获阶段的原生事件监听，避免冒泡阻断影响，示例代码：

  // 第三个参数为true表示在捕获阶段触发，不受stopPropagation影响
  document.addEventListener('pointerdown', e => console.log('触发pointerdown事件', e.target, e), true)
  // 可根据需要替换事件名，比如click、keydown、input等
  

• 用Chrome DevTools内置的事件断点能力：打开Sources面板，展开Event Listener Breakpoints分类，勾选需要监听的事件类型，事件触发时会自动断点，可直接查看调用栈、触发节点等全量信息。如果是监听特定元素，可在Elements面板选中对应节点后，右键选择Break on > Subtree modifications/Attribute modifications/Node removal 来触发节点变化断点。
• 安装React DevTools扩展，选中对应交互组件后，可直接在组件props中找到对应事件处理函数，手动插入日志或者断点，即可准确捕获合成事件的触发时机。
• 若需要监听特定自定义事件，可显式指定事件名调用monitorEvents：monitorEvents(document, ['your-custom-event', 'pointerdown'])，覆盖默认监听的事件列表即可。

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