[Question] How do I debug within a browser instance?

[saviomuc]

Hello!

I hope you can help me with (a hopefully trivial) question. I couldn't find an answer when searching issues for various combination of debugging playwright in chrome dev tools.

I am trying to launch a chromium session with devtools enabled.
When there is a debugger statement code execution should be halted.
Example setup:

browser = debug await chromium.launch({
   headless: false,
   devtools: true,
})
context = await browser.newContext();
page = await context.newPage();

// some other setup code

await page.goto('http://localhost/somepath');
await page.waitForSelector('h3'});

debugger;

// some other code

Unfortunately code is not halted and I can not step through. Is there anything I am missing?

[arjunattam]

Hi @saviomuc! To use the debugger keyword, you will need to run the script with an additional flag for node, like this:

node --inspect-brk script.js

Alternatively, you can setup Node debugging in VS Code (with a launch.json file). If you are on VS Code 1.40+, you can run the "Create JavaScript Debug Terminal" command to launch a new debug-friendly terminal. Any node scripts launched from this terminal will respect the debugger keyword. This last feature depends on the new JS debugger - see how to enable.

Assigning myself to add this to our docs. Thanks for the suggestion!

[saviomuc]

Thanks for the quick reply @arjun27 . I was trying this with jest (node --inspect-brk node_modules/.bin/jest --runInBand --watch). Unfortunately it doesn't work with watch flag but I found a related issue. In the meantime I am able to debug single tests in non-watch mode.

I guess as the problem is not really related to playwright this issue can be closed.