3

对于上下文，我正在使用 Nodejs 和 puppeteer 开发一个综合监控工具。对于定义场景的每个步骤，我都会捕获屏幕截图、瀑布和性能指标。

我的问题出在瀑布上，我以前使用过 puppeter-har 但这个包无法捕获导航之外的请求。因此，我使用这段代码来捕获所有有趣的请求：

const {harFromMessages} = require('chrome-har');
// Event types to observe for waterfall saving (probably overkill, I just set all events of Page and Network)
const observe = [
  'Page.domContentEventFired',
  'Page.fileChooserOpened',
  'Page.frameAttached',
  'Page.frameDetached',
  'Page.frameNavigated',
  'Page.interstitialHidden',
  'Page.interstitialShown',
  'Page.javascriptDialogClosed',
  'Page.javascriptDialogOpening',
  'Page.lifecycleEvent',
  'Page.loadEventFired',
  'Page.windowOpen',
  'Page.frameClearedScheduledNavigation',
  'Page.frameScheduledNavigation',
  'Page.compilationCacheProduced',
  'Page.downloadProgress',
  'Page.downloadWillBegin',
  'Page.frameRequestedNavigation',
  'Page.frameResized',
  'Page.frameStartedLoading',
  'Page.frameStoppedLoading',
  'Page.navigatedWithinDocument',
  'Page.screencastFrame',
  'Page.screencastVisibilityChanged',
  'Network.dataReceived',
  'Network.eventSourceMessageReceived',
  'Network.loadingFailed',
  'Network.loadingFinished',
  'Network.requestServedFromCache',
  'Network.requestWillBeSent',
  'Network.responseReceived',
  'Network.webSocketClosed',
  'Network.webSocketCreated',
  'Network.webSocketFrameError',
  'Network.webSocketFrameReceived',
  'Network.webSocketFrameSent',
  'Network.webSocketHandshakeResponseReceived',
  'Network.webSocketWillSendHandshakeRequest',
  'Network.requestWillBeSentExtraInfo',
  'Network.resourceChangedPriority',
  'Network.responseReceivedExtraInfo',
  'Network.signedExchangeReceived',
  'Network.requestIntercepted'
];

在步骤开始时：

// list of events for converting to HAR
  const events = [];

  client = await page.target().createCDPSession();
  await client.send('Page.enable');
  await client.send('Network.enable');
  observe.forEach(method => {
    client.on(method, params => {
      events.push({ method, params });
    });
  });

在步骤结束时：

waterfall = await harFromMessages(events);

它适用于导航事件，也适用于 Web 应用程序内部的导航。但是，我尝试监控的 Web 应用程序具有包含主要内容的 iframe。我想在我的瀑布中看到 iframe 请求。

所以有几个问题：

  • 为什么 Network.responseReceived 或任何其他事件没有捕获此请求？
  • 是否可以捕获此类请求？

到目前为止，我已经修改了 devtool 协议文档，但我无法使用。我发现最接近我的问题的是这个问题： 如何使用 Chrome Devtools 协议接收嵌入式 iframe 的事件？

我的猜测是，我必须为可能遇到的每个 iframe 启用网络。我没有找到任何方法来做到这一点。如果有办法用 devtool 协议来做，我用 nodsjs 和 puppeteer 来实现应该没有问题。

感谢您的见解！

编辑 18/08：

在对该主题进行更多搜索后，主要是进程外 iframe，互联网上的很多人都指向该响应： https ://bugs.chromium.org/p/chromium/issues/detail?id=924937#c13

答案是问题状态：

请注意，最简单的解决方法是 --disable-features 标志。

也就是说，要通过 DevTools 协议处理进程外 iframe，您需要使用 Target [1] 域：

  • 使用 flatten=true 调用 Target.setAutoAttach；
  • 您将收到带有 iframe 的 sessionId 的 Target.attachedToTarget 事件；
  • 将该会话视为 chrome-remote-interface 中的单独“页面”。发送带有额外 sessionId 字段的单独协议消息：
    {id: 3, sessionId: "", method: "Runtime.enable", params: {}}
  • 您将获得具有相同“sessionId”字段的响应和事件，这意味着它们来自该帧。例如：
    {sessionId：“”，方法：“Runtime.consoleAPICalled”，参数：{...}}

但是我仍然无法实现它。

我正在尝试这个，主要基于 puppeteer ：

  const events = [];
  const targets = await browser.targets();
  const nbTargets = targets.length;
  for(var i=0;i<nbTargets;i++){
    console.log(targets[i].type());
    if (targets[i].type() === 'page') {
      client = await targets[i].createCDPSession();

      await client.send("Target.setAutoAttach", {
        autoAttach: true,
        flatten: true,
        windowOpen: true,
        waitForDebuggerOnStart: false // is set to false in pptr
      })

      await client.send('Page.enable');
      await client.send('Network.enable');

      observeTest.forEach(method => {
        client.on(method, params => {
          events.push({ method, params });
        });
      });
    }
  };

但是对于 iframe 内的 Web 应用程序中的导航，我仍然没有预期的输出。

但是，我能够在加载 iframe 的步骤中捕获所有请求。我想念的是在正确导航之外发生的请求。

有没有人知道将上述铬响应整合到 puppeteer 中？谢谢 ！

4

1 回答 1

1

我一直在寻找错误的一面。chrome 网络事件被正确捕获，如果我之前检查过“事件”变量，我会在前面看到。问题来自我使用的“chrome-har”包：

waterfall = await harFromMessages(events);

页面期望页面和 iframe 主要事件与请求出现在同一批次的事件中。否则请求“目前无法映射到任何页面”。

我的场景的步骤有时是在同一个 Web 应用程序中导航（=没有导航事件），我没有这些事件并且 chrome-har 无法映射请求，因此发送了一个空的 .har

希望它可以帮助别人，我搞砸了这个调试......

于 2020-08-19T12:49:10.287 回答