Puppeteer offers a range of methods to debug your Puppeteer scripts.
In this article, we’ll be discussing the various ways of debugging in Puppeteer along with the tools and techniques associated with it.
Assuming that you already have Puppeteer installed, let’s get started with a basic script to debug.
By creating a simple script as shown below you would have a foundation to test the Puppeteer debug methods. Create a test file named example.js and add the following code.
This should launch a headless test browser, navigate to the specified URL ‘nodejs.org/en’, take a screenshot to store it in the same folder as your script, and close the newly opened test browser.
To enable debugging in Puppeteer, you can use the --inspect flag when running your Node.js script. This flag allows you to debug puppeteer scripts using Chrome DevTools. Run the following command in your terminal by using an IDE like Visual Studio Code.
The --inspect-brk flag starts the script in debug mode and pauses the execution at the very beginning of the script, allowing you to set additional breakpoints if needed.
After running the above command, you will see an output similar to this.
Open Chrome and navigate to chrome://inspect. Click on the "Open dedicated DevTools for Node" link. This will open Chrome DevTools, where you can see your code, set breakpoints, and inspect variables.
In the Chrome DevTools window, navigate to the Sources tab. You will see your script (example.js) in the file explorer on the left. Click on the file to open it, and set breakpoints by clicking on the line numbers. If you don’t see your file there, you can add it by clicking on the ‘+’ symbol.
With breakpoints set, you can now efficiently debug puppeteer scripts. Use the play, step over, step into, and step out buttons to control the execution flow. Inspect variables in the Scope panel and evaluate expressions in the Console output.
To provide a more comprehensive example, let’s expand our script and debug a more complex scenario.
Create a new file named complexExample.js and add the following test code.
Run the script with debugging enabled by entering this in the command terminal.
Open Chrome DevTools as described earlier. You can use the following tips for a more granular level of debugging.
You can add debugger statements directly in your code to pause execution at specific points.
For instance, adding the above code will pause execution at the ‘debugger’ statement, allowing you to inspect variables and the current state of the script in Chrome DevTools.
In the Console tab of Chrome DevTools, you can analyze the console output and evaluate expressions within the context of your script. This is useful for inspecting variables or trying out code snippets, and once you're done, you can resume test execution.
Puppeteer also allows you to intercept and monitor network requests. To do so you can add this code to your script.
This will allow your terminal to log each network request URL made by the page.
There is a collection of best practices that you can follow to make sure that your script is debugged effectively.
Instead of launching a headless Chromium window, this toggles the headless mode setting to false, allowing you to use Chrome DevTools directly for inspecting elements, monitoring network activity, and debugging JavaScript.
Using slow motion allows you to slow down Puppeteer’s actions, loading the page step by step, which makes it easier to observe what’s happening. This comes in handy when identifying timing issues or understanding element interactions.
If you have complex debugging scenarios you would need to use a more enhanced debugger like ndb which was made specifically for Nodejs applications. You can install it using the following command.
When you use ndb before a command (like ndb jest), it launches a special debugging environment where you can execute and debug your script. This environment offers more sophisticated debugging features, such as better handling of asynchronous operations, a more user-friendly interface for navigating code, and enhanced visualization of the application's execution.
By using page.screenshot() you can capture screenshots of the web page when your script encounters errors. This allows you to analyze it and take preventative countermeasures.
Implementing the try-catch method involves wrapping code blocks that are prone to errors and catching any errors that might occur, preventing your node script from crashing.
This is an example of how you could use it.
Overall, while Puppeteer is a library with high functionality, it isn’t immune to errors like page crashes, selector problems, timeout issues, and so on. The causes of these errors and bugs can be detected by following the debugging methods and applying them to your script. However, debugging alone is not enough. It should be complemented with thorough testing, proper error handling, and continuous monitoring to ensure the reliability and robustness of your Puppeteer scripts.
How to Take Screenshot in Puppeteer: Complete Guide