Debug puppeteer

user_1174325 0
Viewed 26483

Is there some way to debug a puppeteer script? One of the buttons just doesn't get clicked for some reason. I've tried all different ways, and actually in another script I get it clicked, but in this one I don't.

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
puppeteer node.js javascript
7 Answers
user_11743250

my team wrote an open source library explicitly to help debugging puppeteer. It's very new and I would love feedback.

Basically it does several things you can use in other libraries:

  • It takes screenshots (with page.screenshot)
  • It highlights what elements you interacted with.
  • It collects network data (you can use chrome-har or listen to network events manually for this).
  • It collects console logs (listens to page.console)
  • It interacts with test runners like jest/mocha to collect info from there.
user_13481950

With async await you can set a breakpoint on the line of code and step into the function call.

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
...

This will break on the page.click call and then we can step into with step or s command on the debugger.

This of course is made real convenient by IDEs like Visual Studio Code.

user_17900450

If you're looking for something interactive, I have a Github repo/docker image that ships with an interactive debugger which makes debugging at the browser level a lot easier since you both visually see what's going on and inspect the page itself. I've found that doing debugging in your node/puppeteer script really isn't valuable as all the action is taking place on the remote browser.

Github repo is here, docker repo is here.

user_20556690

with intellij webstorm is very easy, because it integrate well with puppeteer and node and you can simply but a breakpoint on the left side without configure anything else. you can also obtain the same result with visual studio code, that is free, but you need to configure launch.json, and this is pretty hard (so i moved to webstorm).

user_29799080
user_83614030
Related