23

有什么方法可以调试 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
4

7 回答 7

51

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

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

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

puppeteer.launch({devtools: true})

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

于 2018-04-17T20:48:44.293 回答
9

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

于 2017-09-30T16:53:55.557 回答
2

我的团队明确编写了一个开源库来帮助调试 puppeteer。这是非常新的，我希望得到反馈。

基本上它做了几件你可以在其他库中使用的事情：

  • 它需要屏幕截图（使用 page.screenshot）
  • 它突出显示了您与之交互的元素。
  • 它收集网络数据（您可以为此使用 chrome-har 或手动收听网络事件）。
  • 它收集控制台日志（监听 page.console）
  • 它与 jest/mocha 等测试运行程序交互以从那里收集信息。
于 2020-08-28T17:13:53.417 回答
0

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

Github repo 在这里，docker repo 在这里。

于 2017-11-17T17:37:12.400 回答
0

您可以在async await代码行上设置断点并单步执行函数调用。

node inspect testscript.js

测试脚本.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 变得非常方便。

于 2017-09-25T07:45:35.747 回答
-1

使用 intellij webstorm 非常简单，因为它与 puppeteer 和 node 很好地集成在一起，您可以简单地在左侧设置一个断点，而无需配置其他任何东西。您也可以使用 Visual Studio 代码获得相同的结果，即免费，但您需要配置 launch.json，这非常困难（所以我搬到了 webstorm）。

于 2019-11-14T09:52:40.123 回答
-2

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

于 2017-09-30T10:13:32.983 回答