调试 Puppeteer

Question

有没有一些方法可以调试Puppeteer脚本？其中一个按钮由于某种原因就是无法被点击。我尝试了所有不同的方式，实际上在另一个脚本中我可以点击它，但是在这个脚本中我却不能。

await page.focus('#outer-container > nav > span.right > span.search-notification-wrapper > span > form > input[type="text"]');
await page.type("Some text");
await page.click('#outer-container > nav > span.right > span.search-notification-wrapper > span > form'); // I am clicking on the form because it did work in the other script

- elena

---

嘿，我们编写了一个开源包，非常有助于这种事情 - 考虑检查一下我们：https://github.com/testimio/root-cause/ - Benjamin Gruenbaum

Answer 1

有点晚的回复，但可能作为参考会有帮助。你可以像这样调试客户端脚本：

await page.evaluate(() => {
  debugger;
  const btn = document.querySelector(...);
  btn.click();
});

现在只需使用以下命令启动 puppeteer：

puppeteer.launch({devtools: true})

Chromium 将打开并停止在您的断点处。

- Yaniv Efraim

---

嘿，Yaniv！ 有没有办法从 vscode 中使它工作？ - Benjamin Gruenbaum

在Chrome内是否有办法突出显示元素处理程序的元素？ - Ini

回答我的问题 - "是的"。 - Benjamin Gruenbaum

@BenjaminGruenbaum，怎么做？ - Pratik Gaikwad

使用 devtools: true 导致调试器崩溃。移除此选项后，我可以在 VScode 中进行调试。 - sam

Answer 2

我发现这很有帮助： https://github.com/GoogleChrome/puppeteer#debugging-tips 从这里得到了这个线索： https://github.com/GoogleChrome/puppeteer/issues/868

- elena

Answer 3

我的团队编写了一个开源库，专门用于帮助调试Puppeteer。这是非常新的，我希望能得到反馈。

基本上，它可以在其他库中使用以下几个功能：

• 它可以截取屏幕截图（使用page.screenshot）
• 它可以突出显示您与之交互的元素。
• 它可以收集网络数据（您可以使用chrome-har或手动监听网络事件来实现）。
• 它可以收集控制台日志（监听page.console）
• 它可以与测试运行程序（如jest/mocha）交互，以从那里收集信息。

- Benjamin Gruenbaum

Answer 4

使用 async await，您可以在代码行上设置断点并进入函数调用。

node inspect testscript.js

testscript.js

...
await page.focus('#outer-container > nav > span.right > span.search-notification-wrapper > span > form > input[type="text"]');
await page.type("Some text");
debugger;
await page.click('#outer-container > nav > span.right > span.search-notification-wrapper > span > form'); // I am clicking on the form because it did work in the other script
...

这将在 page.click 调用时中断，然后我们可以使用调试器上的 step 或 s 命令进入其中。

当然，像 Visual Studio Code 这样的 IDE 使这变得非常方便。

- nilobarp

---

谢谢！有没有想法为什么即使我没有在那里设置任何断点，它也会在脚本的开头就中断？ - elena

如果您不想调试器停在第一行，请使用 node --debug 而不是 inspect。 - nilobarp

显然，现在是使用 node --inspect，因为 --debug 选项已被弃用。 - elena

似乎在调试器中无法使用await。我想知道是否可以像在脚本本身中那样完全相同地使用代码？例如，如果我想查看await page.click（'#outer-container > nav > span.right > span.search-notification-wrapper > span > form'）;到底做了什么？ - elena

@elena - 回复有点晚了，但你可以这样做： await page.evaluate(() => {debugger;const btn = document.querySelector(...);btn.click();}); 然后 puppeteer.launch({devtools: true}) - Yaniv Efraim

Answer 5

打印控制台消息可能会很有帮助：

page.on('console', msg => console.log('PAGE LOG:', msg.text()))

- Mohammad Tbeishat

Answer 6

如果您正在寻找交互式内容，我有一个带有交互式调试器的Github存储库/ Docker镜像，可以使在浏览器级别进行调试变得更加容易，因为您可以直观地看到发生了什么并检查页面本身。我发现，在您的node / puppeteer脚本中进行调试并不是很有价值，因为所有操作都在远程浏览器上进行。 Github存储库在此处, Docker存储库在此处。

- browserless

Answer 7

使用IntelliJ WebStorm非常容易，因为它与Puppeteer和Node集成得很好，您只需在左侧放置一个断点而无需配置其他任何内容即可轻松完成。 您也可以通过免费的Visual Studio Code获得相同的结果，但需要配置launch.json，这相当困难（所以我转向了WebStorm）。

- Andrea Bisello

Answer 8

使用Visual Studio Code。您可以通过在文本编辑器的左侧栏中单击来设置断点 - https://code.visualstudio.com/docs/nodejs/nodejs-debugging

- Porus Whitekar

---

这对于puppeteer提供的page.evaluate函数无效。 - Harrison Cramer