Testing and Debugging your Local Backend
Note: The Server-Side Rendering Performance series is designed to dive into the most important topics you’ll encounter while building, testing and deploying a server-side rendered Progressive Web App (PWA).
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:
- Open your favorite command line interface
- Go to your project directory
npm run start:ssr:inspect. Running this command allows you to use DevTools to inspect the processes that are running in the background.
- Open Chrome and enter the URL chrome://inspect
- Click the link for running the Express app that appears on the page
- DevTools will open up in a new window, connected to the Express app
- Add breakpoints throughout the file, and inspect
Profiling the backend to pinpoint performance bottlenecks
- Complete the steps above to open the DevTools console
- Within the DevTools console, click on the Profiler tab
- 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”.)
- Open another Chrome window and navigate to the page you’re interested in profiling
- 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.
- 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.
- 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.
Continue through our Server-Side Rendering Performance series, with an article about best practices to optimize your PWA’s client-side performance.