Testing and Debugging your Local Backend

There are a few key tools you can access to debug your server-side rendered PWA’s local backend. Here, we’ll discuss the steps to access Chrome DevTools’ breakpoints and profiler.

Using ssr:inspect to debug with breakpoints

With a simple command, you can use Chrome DevTools to debug the local backend of your server-side rendered PWA. Here are the steps:

1. Open your favorite command line interface
2. Go to your project directory
3. Run npm run start:inspect. Running this command allows you to use DevTools to inspect the processes that are running in the background.
4. Open Chrome and enter the URL chrome://inspect
5. Click the link for running the Express app that appears on the page
6. DevTools will open up in a new window, connected to the Express app
7. Add breakpoints throughout the file, and inspect

As the server runs the PWA, use the Console within the DevTools window to view messages, errors, and warnings from the server. (Notice that the console logs the same messages as the command line interface. The main advantage of using the console in Chrome is that it allows you to leverage the advanced JavaScript debugging features in DevTools.) To learn more about debugging with breakpoints, read the guide Get Started with Debugging JavaScript in Chrome DevTools.

Profiling the backend to pinpoint performance bottlenecks

The Profiler in Chrome’s DevTools is another key tool for debugging your PWA. It provides a visual graph of all the JavaScript processes that run on the backend, highlighting how long each process takes to run. Because of the tool’s visual nature, you can use it to identify lengthy processes that may be affecting the performance of your PWA. To use the Profiler tool:

1. Complete the steps above to open the DevTools console
2. Within the DevTools console, click on the Profiler tab
3. Within the Profiler tab, click the record icon in the top left of the console. (If you hover over the record icon, the tooltip will specify “Start CPU recording”.)
4. Open another Chrome window and navigate to the page you’re interested in profiling
5. As the page loads, you will see messages logging in your command line interface. Once you stop seeing log activity, click the recording icon again to stop recording. Your recorded profile will appear within the DevTools window on the left, under Profiles.
6. Click on the profile you just recorded to access the visual graph. Here, you’ll see time on the x-axis and the depth of the stack on the y-axis.
7. Use the x- and y-axes of the visual graph to help pinpoint performance issues

Diagnosing issues with the Profiler tool

The x-axis is the most important source of information in the chart, as the width of a given process will tell you the time that it takes to run. Zoom in to any given section, and identify long-running processes with a goal of understanding why they may be slow. You can inspect whether it’s from your code, from a dependency, or from native code in the browser. The y-axis also provides useful insights. If the stack is very tall, you may want to evaluate if a process is too deep because it may indicate memory issues.

Learn more about the profiler and other techniques to analyze runtime performance in Google’s Chrome DevTools documentation.

Next steps

Continue through our Server-Side Rendering Performance series, with an article about best practices to optimize your PWA’s client-side performance.