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

Answer 1

有点迟到的回复，但可能有助于作为参考。您可以像这样调试客户端脚本：

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

现在使用：

启动木偶戏

puppeteer.launch({devtools: true})

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

Answer 2

使用Visual Studio代码。只需单击文本编辑器中的左侧栏，即可设置断点 - https://code.visualstudio.com/docs/nodejs/nodejs-debugging

Answer 3

使用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实现的。

Answer 4

我发现这有用： https://github.com/GoogleChrome/puppeteer#debugging-tips 从这里得到这个领先优势： https://github.com/GoogleChrome/puppeteer/issues/868

Answer 5

如果你正在寻找一些交互式的东西，我有一个Github repo / docker图像，它附带一个交互式调试器，这使得在浏览器级别进行调试变得更加容易，因为你们可以直观地看到正在发生的事情并检查页面本身。我发现在你的node / puppeteer脚本中进行调试确实没有价值，因为所有操作都在远程浏览器上进行。

Github repo is here，docker repo is here。

Answer 6

使用intellij网络风暴非常容易，因为它可以与puppeteer和node很好地集成在一起，并且您只需在左侧设置一个断点即可，而无需进行其他配置。您还可以使用Visual Studio代码获得相同的结果，该结果是免费的，但是您需要配置launch.json，这非常困难（所以我转到了webstorm）。

Answer 7

我的团队明确编写了open source library来帮助调试人偶。这是非常新的内容，我希望获得反馈。

基本上，它可以在其他库中使用一些功能：

需要截图（带有page.screenshot）
它突出显示了您与之互动的元素。
它收集网络数据（您可以使用chrome-har或为此手动监听网络事件）。
它收集控制台日志（收听page.console）
它与诸如jest / mocha之类的测试运行程序进行交互以从那里收集信息。

调试木偶操纵者

7 个答案: