时间戳

首页 > 解决方案 > 如何打印 puppeteer 发送的原始 devtools 请求？

node.js - 如何打印 puppeteer 发送的原始 devtools 请求？

问题描述

我看到 puppeteer 使用了 devtools 协议。我想看看 puppeteer 发送了哪些请求。

https://github.com/puppeteer/puppeteer

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

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

谁能告诉我如何修改上述简单程序以打印 puppeteer 发送的 devtools 请求？

编辑：由于代码在nodejs中，我添加了标签nodejs，因为解决方案可能在nodejs而不是puppeteer中。如果此添加不合适，请发表评论。我将删除标签。在这种情况下，请不要关闭问题。

编辑：提琴手被提及为相关。所以我也添加了这个标签。

标签： node.jspuppeteerfiddlerchrome-devtools-protocol

解决方案

您可以使用chrome-protocol-proxy它捕获所有 CDP 消息。这里涉及一些额外的步骤。

  1. 在调试模式下运行谷歌浏览器
  2. 启动 chrome-protocol-proxy
  3. 使用puppeteer.connect()启动 puppeteer

运行以下命令，您可能需要相应地更改它们

google-chrome-stable --remote-debugging-port=9222 --headless  # run chrome
chrome-protocol-proxy     # to display CDP messages

从您的代码中删除此行

const browser = await puppeteer.launch();

添加这一行

const browser = await puppeteer.connect({"browserURL":"localhost:9223"});

而不是browserURL你可以给出browserWSEndpoint你将通过 cURL 获得的localhost:9223/json/version

如果您想更详细地了解 CDP 和 puppeteer，您可能需要查看Gettig Started with CDP

推荐阅读