时间戳

首页 > 解决方案 > 如何使用 Chrome Devtools 协议接收嵌入式 iframe 的事件？

google-chrome-extension - 如何使用 Chrome Devtools 协议接收嵌入式 iframe 的事件？

问题描述

我正在尝试使用Chrome Devtools 协议列出选项卡的网络和日志事件。我成功地为顶级框架这样做了，但我正在努力处理儿童 iframe。

当我有一个与父级相同域的 iframe 时，它​​会正确捕获网络和日志事件。当我有一个位于不同域的 iframe 时，它​​根本不会发出任何事件。

我试图通过设置自动附件

chrome.debugger.sendCommand({ tabId: tabId }, "Target.setAutoAttach", { autoAttach: true, waitForDebuggerOnStart: false, flatten: true })

但这似乎对我没有任何帮助。如何在主动调试的选项卡下正确检查 iframe 的网络和日志事件？

这是我当前使用 setAutoAttach 的流程：

  1. 已加载选项卡
  2. 将 chrome 调试器注入选项卡
  3. 调用 Network.enable 以确保将收到任何网络消息（因为没有追溯日志记录）
  4. 通过扩展 API 重新加载选项卡
  5. onDOMContentLoaded -> 通过协议（日志、性能、运行时）启用所有 API 并设置 Target.setAutoAttach
  6. 处理消息

如果我执行此流程，则不会收到任何附加事件。如果我在第 2 点设置AutoAttach——在重新加载之前——那么我得到了 PREVIOUS 实例的 iframe。我只能在完全分离调试器，重新附加，然后调用 setAutoAttach 之后获取当前选项卡的 iframe。调用setAutoAttach1 秒的超时也最终给了我附加的选项卡，但是捕获网络流量为时已晚。

标签： google-chrome-extensionchrome-devtools-protocol

解决方案

推荐阅读