Puppeteer无法监听paribu.com全部请求及数据问题求助

问题核心 #

你当前的代码仅能捕获请求URL，无法获取登录、告警设置等操作的POST请求体；WebSocket发送的帧数据未做解码解析，导致无法读取有效内容，这会阻碍你实现自动设告警、售币的bot功能。

解决方案 #

1. 捕获完整HTTP请求（含请求体） #

利用Chrome DevTools Protocol(CDP)的Network.requestWillBeSent事件，该事件会返回请求的完整详情，包括请求方法、Headers、POST数据，比page.on('request')更全面。

2. 解析WebSocket发送的帧数据 #

Network.webSocketFrameSent返回的payloadData可能是Base64编码的二进制数据，需要先解码，再尝试解析为JSON格式（网站WebSocket通常用JSON传输结构化数据）。

3. 可选：监听响应体（如需查看返回内容） #

通过Network.getResponseBody获取响应的具体内容，便于调试接口返回结果。

修改后的完整代码 #

const puppeteer = require("puppeteer");

async function run() {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  await page.setViewport({ width: 1080, height: 1024 });
  await page.goto("https://www.paribu.com");

  const cdp = await page.target().createCDPSession();
  // 增大缓冲区，避免大请求/响应被截断
  await cdp.send("Network.enable", {
    maxResourceBufferSize: 1024 * 1024 * 5,
    maxTotalBufferSize: 1024 * 1024 * 10
  });
  await cdp.send("Page.enable");

  // 监听HTTP请求完整详情
  cdp.on("Network.requestWillBeSent", (params) => {
    const { request } = params;
    console.log("\n=== 请求发送 ===");
    console.log(`URL: ${request.url}`);
    console.log(`方法: ${request.method}`);
    console.log("请求头:", JSON.stringify(request.headers, null, 2));
    
    // 打印POST/PUT等请求的请求体
    if (request.postData) {
      try {
        const postData = JSON.parse(request.postData);
        console.log("请求体(JSON格式):", JSON.stringify(postData, null, 2));
      } catch (e) {
        console.log("请求体(原始格式):", request.postData);
      }
    }
  });

  // 解析并打印WebSocket发送的帧数据
  cdp.on("Network.webSocketFrameSent", (params) => {
    console.log("\n=== WebSocket发送帧 ===");
    let payload = params.response.payloadData;
    try {
      // 二进制帧(opcode=2)需要Base64解码
      if (params.response.opcode === 2) {
        payload = Buffer.from(payload, "base64").toString("utf8");
      }
      const data = JSON.parse(payload);
      console.log("发送数据(JSON格式):", JSON.stringify(data, null, 2));
    } catch (e) {
      console.log("发送数据(原始格式):", payload);
    }
  });

  // 优化WebSocket接收帧的解析
  cdp.on("Network.webSocketFrameReceived", (params) => {
    console.log("\n=== WebSocket接收帧 ===");
    let payload = params.response.payloadData;
    try {
      if (params.response.opcode === 2) {
        payload = Buffer.from(payload, "base64").toString("utf8");
      }
      const data = JSON.parse(payload);
      console.log("接收数据(JSON格式):", JSON.stringify(data, null, 2));
    } catch (e) {
      console.log("接收数据(原始格式):", payload);
    }
  });

  // 可选：监听响应体（如需查看接口返回内容）
  cdp.on("Network.responseReceived", async (params) => {
    const { response, requestId } = params;
    console.log("\n=== 响应接收 ===");
    console.log(`URL: ${response.url}`);
    console.log(`状态码: ${response.status}`);
    
    try {
      const responseBody = await cdp.send("Network.getResponseBody", { requestId });
      const content = responseBody.base64Encoded 
        ? Buffer.from(responseBody.body, "base64").toString("utf8") 
        : responseBody.body;
      console.log("响应体:", content);
    } catch (e) {
      // 图片、流媒体等响应无法获取内容，忽略错误
    }
  });
}

run();

关键说明 #

• 缓冲区参数调整：避免大请求或响应被截断，确保完整捕获数据
• WebSocket opcode判断：自动区分文本帧和二进制帧，对二进制帧做Base64解码
• JSON解析尝试：将结构化数据转为易读的JSON格式，非结构化数据则打印原始内容

内容的提问来源于stack exchange，提问作者Sefer Eken