How to debug Puppeteer code with DevTools?

To debug Puppeteer code with DevTools, you can follow these steps:

Launch Puppeteer with the headless option set to false to run in non-headless mode. This will allow you to see the browser window and interact with it.

const browser = await puppeteer.launch({ headless: false });

Add a breakpoint in your Puppeteer code by using the debugger statement. This will pause execution at that point in the code.

await page.goto('https://example.com');
// Add a breakpoint
debugger;

Open Chrome DevTools by right-clicking on the page, selecting "Inspect", or pressing F12. This will open the DevTools window where you can interact with the page and debug your code.
In DevTools, you will see your Puppeteer code loaded in the "Sources" tab. You can inspect variables, step through code, and interact with the page as needed.
Once you have resolved the issue, you can resume code execution by clicking the play button in DevTools or closing the DevTools window.

By following these steps, you can effectively debug your Puppeteer code using Chrome DevTools. Remember to remove the debugger statements and set headless back to true when you are done debugging.