Debug puppeteer

Question

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

Hey, we wrote an open source package that really helps with this sort of thing - consider checking us out: https://github.com/testimio/root-cause/ — Benjamin Gruenbaum, Sep 24 '20 at 12:58

score 57 · Answer 1 · answered Apr 17 '18 at 20:48

57

Kind of a late response, but might be helpful as a reference. You could debug your client script like that:

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

Now just launch puppeteer using:

puppeteer.launch({devtools: true})

Chromium will open and stop on your breakpoint.

answered Apr 17 '18 at 20:48

Yaniv Efraim

6,633
7
53
96

2

Hey Yaniv! Any way to get this to work from within vscode? – Benjamin Gruenbaum May 02 '19 at 09:58
Is it somehow possible to highlight the element of an element handle within chrome? – Ini Jul 10 '19 at 11:50
1

To answer my own question - "yes". – Benjamin Gruenbaum Aug 28 '20 at 17:14
@BenjaminGruenbaum, how? – Pratik Gaikwad Jul 28 '21 at 04:26
Using `devtools: true` caused the debugger to crash. Removing this allowed me to debug in VScode – sam Jan 10 '22 at 20:39

score 10 · Answer 2 · answered Sep 30 '17 at 16:53

10

I found this to be helpful: https://github.com/GoogleChrome/puppeteer#debugging-tips Got this lead from here: https://github.com/GoogleChrome/puppeteer/issues/868

answered Sep 30 '17 at 16:53

elena

3,740
5
27
38

score 3 · Answer 3 · answered Aug 28 '20 at 17:13

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.

score 0 · Answer 4 · answered Sep 25 '17 at 07:45

0

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.

answered Sep 25 '17 at 07:45

nilobarp

3,806
2
29
37

Thanks! Any idea why it breaks at the very beginning of the script even if I don't put any breakpoint there? – elena Sep 25 '17 at 07:53
Use `node --debug` instead of `inspect` if you don't want the debugger to stop at first line. – nilobarp Sep 25 '17 at 07:57
1

apparently, it's node --inspect, since --debug option is deprecated. – elena Sep 25 '17 at 08:02
It seems that await doesn't work in the debugger. I am wondering if I could use the code in same exact way as in the script itself? For example, if I want to see what does exactly `await page.click('#outer-container > nav > span.right > span.search-notification-wrapper > span > form');` do? – elena Sep 25 '17 at 08:18
1

@elena - a little late response, but you could do something like: `await page.evaluate(() => {debugger;const btn = document.querySelector(...);btn.click();});` And then `puppeteer.launch({devtools: true})` – Yaniv Efraim Apr 17 '18 at 20:45

score 0 · Answer 5 · answered Nov 17 '17 at 17:37

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.

score 0 · Answer 6 · answered Nov 05 '22 at 14:55

0

Printing console messages might be helpful:

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

answered Nov 05 '22 at 14:55

Mohammad Tbeishat

961
6
15

score -1 · Answer 7 · answered Nov 14 '19 at 09:52

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

score -2 · Answer 8 · answered Sep 30 '17 at 10:13

-2

Use Visual Studio code. You can set up a break point by simply clicking on left bar in text editor - https://code.visualstudio.com/docs/nodejs/nodejs-debugging

answered Sep 30 '17 at 10:13

Porus Whitekar

25
2

This does not work for the page.evaluate function provided by puppeteer. – Harrison Cramer Oct 20 '19 at 18:23

Debug puppeteer

8 Answers8