Question

Chrome正式支持在无头模式下运行浏览器（包括通过Puppeteer API和/或CRI库进行编程控制）。

我已经搜索了文档，但是我还没有找到如何以编程方式从实例中捕获AJAX流量（即从代码启动Chrome实例，导航到页面，以及访问后台响应/请求调用和原始数据（所有来自代码不使用开发人员工具或扩展程序）。

您是否有任何建议或示例详细说明如何实现这一目标？谢谢！

Answer 1

Puppeteer的API让这很容易：

page.on('request', request => {
  if (request.resourceType === 'XHR')
    // do something
});

您也可以使用setRequestInterception拦截请求，但如果您不打算修改请求，则不需要此示例。

你可以适应example of intercepting image requests。

resourceType已定义为here。

Answer 2

我终于找到了如何做我想做的事。可以使用chrome-remote-interface（CRI）和node.js来完成。我附上了所需的最小代码。

const CDP = require('chrome-remote-interface');

(async function () {

    // you need to have a Chrome open with remote debugging enabled
    // ie. chrome --remote-debugging-port=9222
    const protocol = await CDP({port: 9222});

    const {Page, Network} = protocol;
    await Page.enable();
    await Network.enable(); // need this to call Network.getResponseBody below

    Page.navigate({url: 'http://localhost/'}); // your URL

    const onDataReceived = async (e) => {
        try {
            let response = await Network.getResponseBody({requestId: e.requestId})
            if (typeof response.body === 'string') {
                console.log(response.body);
            }
        } catch (ex) {
            console.log(ex.message)
        }
    }

    protocol.on('Network.dataReceived', onDataReceived)
})();

Answer 3

木偶的侦听器可以帮助您通过response和request事件捕获xhr响应。

您应首先检查request.resourceType()是xhr还是fetch。

        listener = page.on('response', response => {
            const isXhr = ['xhr','fetch'].includes(response.request().resourceType())
            if (isXhr){
                log(response.url());
                response.text().then(log)
            }
        })

Answer 4

const browser = await puppeteer.launch();
const page = await browser.newPage();
const pageClient = page["_client"];
pageClient.on("Network.responseReceived", event => {
  if (~event.response.url.indexOf('/api/chart/rank')) {
    console.log(event.response.url);
    pageClient.send('Network.getResponseBody', {
      requestId: event.requestId
    }).then(async response => {
      const body = response.body;
      if (body) {
        try {
          const json = JSON.parse(body);

        }
        catch (e) {
        }
      }
    });
  }
});

await page.setRequestInterception(true);
page.on("request", async request => {
  request.continue();
});
await page.goto('http://www.example.com', { timeout: 0 });

使用无头Chrome以编程方式捕获AJAX流量

4 个答案: