在chrome devtools网络控制台中复制多个网络响应

t9aqgxwy  于 2023-03-10  发布在  Go
关注(0)|答案(2)|浏览(297)

我想从Chrome devtools下的网络选项卡中复制过滤后的请求列表中的所有网络响应。
我在Multiple URLs copy in Sources/Network tab上读到了复制所有请求的URL的解决方案,但是我不知道如何从请求中访问解码的响应正文。
Chrome Devtools: Save specific requests in Network Tab的解决方案可以工作,但是我想要一个只从network选项卡下的过滤请求列表中提取响应的解决方案。

bxpogfeg

bxpogfeg1#

检查devtools的源代码发现我们需要contentData() method
使用说明与Multiple URLs copy in Sources/Network tab中的相同。

await (async () => {
  const getContent = r => r.url() && !r.url().startsWith('data:') && r.contentData();
  const nodes = UI.panels.network.networkLogView.dataGrid.rootNode().flatChildren();
  const requests = nodes.map(n => n.request());
  const contents = await Promise.all(requests.map(getContent));
  return contents.map((data, i) => {
    const r = requests[i];
    const url = r.url();
    const body = data?.content;
    const content = !data ? url :
      r.contentType().isTextType() ? data :
        typeof body !== 'string' ? body :
          `data:${r.mimeType}${data.encoded ? ';base64' : ''},${body}`;
    return {url, content};
  });
})();

在Chrome 111中测试。对于较旧版本的Chrome,请参阅此答案的修订版。

qfe3c7zg

qfe3c7zg2#

@wOxxOm的优秀答案更新,但针对2023年:

(async () => {
  const getContent = r => r.url() && !r.url().startsWith('data:') && r.contentData();
  const nodes = UI.panels.network.networkLogView.dataGrid.rootNode().flatChildren();
  const requests = nodes.map(n => n.request());
  const contents = await Promise.all(requests.map(getContent));
  const looks = contents.map((data, i) => {
    const r = requests[i];
    const url = r.url();
    const content = !data ? 'data is encoded inside the data url already, duh' :
      r.contentType().isTextType() ? data :
        Common.ContentProvider.contentAsDataURL(data, r.mimeType, r.contentEncoded());
    return {url, content};
  });
  console.log(looks);
})();

通过控制台运行,当你检查(CTRL+SHIFT+I)弹出的检查窗口在网络选项卡上。这是正确的,元检查!CTRL+SHIFT+I

相关问题