javascript - 在 Chrome 中加载页面时如何捕获所有网络请求和完整响应数据？

Question

使用 Puppeteer，我想在 Chrome 中加载一个 URL 并捕获以下信息:

• 请求网址
• 请求 header
• 请求帖子数据
• 响应 header 文本(包括重复的 header ，如 set-cookie)
• 传输的响应大小(即压缩大小)
• 完整的响应正文

捕获完整的响应正文是我遇到问题的原因。

我尝试过的事情:

• 使用 response.buffer 获取响应内容- 如果在任何时候都有重定向，这将不起作用，因为 buffers are wiped on navigation
• 拦截请求并使用 getResponseBodyForInterception - 这意味着我可以 no longer access the encodedLength ，并且在某些情况下我也无法获取正确的请求和响应 header
• 使用本地代理可行，但这会显着减慢页面加载时间(并且还改变了一些行为，例如证书错误)

理想情况下，该解决方案对性能的影响应该很小，并且与正常加载页面没有功能差异。我也想避免 fork Chrome。

Answer 1

您可以使用 page.setRequestInterception() 启用请求拦截对于每个请求，然后在 page.on('request') 中, 您可以使用 request-promise-native模块充当中间人，在使用 request.continue() 继续请求之前收集响应数据在 Puppeteer 中。

这是一个完整的工作示例:

'use strict';

const puppeteer = require('puppeteer');
const request_client = require('request-promise-native');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const result = [];

  await page.setRequestInterception(true);

  page.on('request', request => {
    request_client({
      uri: request.url(),
      resolveWithFullResponse: true,
    }).then(response => {
      const request_url = request.url();
      const request_headers = request.headers();
      const request_post_data = request.postData();
      const response_headers = response.headers;
      const response_size = response_headers['content-length'];
      const response_body = response.body;

      result.push({
        request_url,
        request_headers,
        request_post_data,
        response_headers,
        response_size,
        response_body,
      });

      console.log(result);
      request.continue();
    }).catch(error => {
      console.error(error);
      request.abort();
    });
  });

  await page.goto('https://example.com/', {
    waitUntil: 'networkidle0',
  });

  await browser.close();
})();