Puppeteer 是一个用于控制 Chrome 或 Chromium 浏览器的 Node.js 库，它可以帮助你在浏览器中自动执行操作，包括捕获 HTTP 请求和响应。以下是如何使用 Puppeteer 来捕获页面加载时的请求和响应信息。

代码示例

const puppeteer = require('puppeteer');

async function captureRequests() {
    const browser = await puppeteer.launch({ headless: true }); // 启动浏览器
    const page = await browser.newPage();

    // 启用请求拦截
    await page.setRequestInterception(true);

    const capturedRequests = []; // 存储捕获的请求信息

    // 监听并捕获请求信息
    page.on('request', request => {
        capturedRequests.push({
            url: request.url(),
            method: request.method(),
            type: 'request'
        });
        request.continue(); // 继续请求
    });

    // 监听并捕获响应信息
    page.on('response', response => {
        capturedRequests.push({
            url: response.url(),
            method: response.request().method(),
            type: 'response',
            status: response.status()
        });
    });

    // 打开目标页面，并捕获请求和响应
    await Promise.all([
        page.goto('https://jx.jsonplayer.com/player/?url=https://v.qq.com/x/cover/mzc00200vmd652y/j0043z8gwe0.html'),
        page.waitForNavigation({ waitUntil: 'networkidle0' }) // 确保页面完全加载
    ]);

    // 继续保持页面处于运行状态，捕获后续的请求和响应
    await page.waitForTimeout(3000); // 等待3秒，捕获更多请求

    // 控制台打印捕获的请求信息
    console.log(capturedRequests);

    await browser.close(); // 关闭浏览器
}

captureRequests();

代码说明

• puppeteer.launch({ headless: true }): 启动无头浏览器。将 headless 设置为 false 可以在可视化窗口中看到浏览器的操作。
• setRequestInterception(true): 启用请求拦截，以便捕获并处理每个请求。
• request.continue(): 继续被拦截的请求。
• page.on('request', request => {...}): 监听并捕获请求信息。
• page.on('response', response => {...}): 监听并捕获响应信息。
• page.goto(url): 打开目标 URL。
• page.waitForNavigation({ waitUntil: 'networkidle0' }): 等待页面完全加载，networkidle0 表示没有任何网络连接超过 500ms 时认为页面加载完毕。
• page.waitForTimeout(3000): 继续运行程序 3 秒以捕获更多请求。

使用场景

此脚本适用于需要监控页面请求、分析网络请求或自动化测试的场景。通过 Puppeteer，可以轻松获取浏览器发送的所有请求和响应信息。

通过以上示例，你可以使用 Puppeteer 在 Node.js 环境下模拟浏览器并捕获页面请求和响应信息。