如何打印 puppeteer 发送的原始 devtools 请求？

Posted 2023-05-07

【中文标题】如何打印 puppeteer 发送的原始 devtools 请求？

【英文标题】：How to print the raw devtools request sent by puppeteer?

【发布时间】：2021-12-07 18:38:06

【问题描述】：

我看到 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 中。如果此添加不合适，请发表评论。我将删除标签。在这种情况下，请不要关闭问题。

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

【问题讨论】：

你为什么要看他们？为什么要从程序中打印它们？使用 Fiddler 更有意义

Fiddler 无关紧要，因为我不是在调试网络应用程序。我想看看底层的 puppeteer 是什么。

它使用网络服务，因此可以将 Fiddler 设置为代理。但你为什么需要它？

我只是想看看幕后发生了什么。如何使用 Fiddler 控制 devtools 协议？

在后台有网络服务调用。 chrome 运行一个网络服务服务器。该协议记录在此处chromedevtools.github.io/devtools-protocol

【参考方案1】：

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

在调试模式下运行 google chrome 启动 chrome-protocol-proxy 使用 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");

您可以提供browserWSEndpoint 而不是browserURL，您将通过localhost:9223/json/version 上的cURL 获得它

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