如何打印Puppeteer发送的原始DevTools协议请求？

方法一：代码内置监听（无需额外工具） #

Puppeteer的CDP客户端实例可以直接监听到所有收发的DevTools协议消息，修改后的代码如下：

const puppeteer = require('puppeteer');

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

  // 监听DevTools协议收发
  const cdpClient = await page.createCDPSession();
  // 打印发出的请求
  cdpClient.on('send', (method, params) => {
    console.log('[发送请求] 方法:', method, '参数:', JSON.stringify(params, null, 2));
  });
  // 打印返回的响应
  cdpClient.on('recv', (payload) => {
    console.log('[收到响应] 内容:', JSON.stringify(payload, null, 2));
  });

  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

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

如果只是临时调试不想修改代码，可以直接在运行时添加环境变量即可自动打印协议日志：

# Windows cmd
set DEBUG=puppeteer:protocol:* && node your-script.js

# Linux/macOS
DEBUG=puppeteer:protocol:* node your-script.js

方法二：使用Fiddler抓包查看 #

按照以下步骤配置即可抓取所有DevTools协议通信内容：

• 启动Fiddler，确认代理监听端口为默认的8888，开启HTTPS解密功能
• 修改Puppeteer启动参数，指定走Fiddler代理并忽略证书错误：

const browser = await puppeteer.launch({
  args: [
    '--proxy-server=http://127.0.0.1:8888',
    '--ignore-certificate-errors'
  ]
});

• 运行代码后，在Fiddler中过滤路径包含/devtools/browser/的WebSocket请求，选中后切换到「WebSocket」标签页即可查看所有收发的协议帧内容。

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