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). To learn how these PWAs differ from Mobify’s tag-loaded PWAs, read our overview.
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
- Navigate to the following directory:
- For projects that began prior to March 28 2019, navigate to your project’s web directory.
- For projects that began on March 28 or later, navigate to your project’s packages/pwa directory.
- Once you’re in the correct directory, run the following command:
- For projects that began prior to March 28 2019, run
npm run ssr:inspect.
- For projects that began on March 28 or later, run
npm run start:ssr:inspect. Running this command allows you to use DevTools to inspect the processes that are running in the background.
- Open your Chrome browser, and enter the URL chrome://inspect.
- The page will show a link for running the SSR server, click that link.
- DevTools will open up in a new window, connected to running the SSR server.
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.
- Now, you can 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 your code, from a dependency, or native code from the browser. In addition, the y-axis provides useful insights. If the stack is very tall you may want to evaluate if a process is too deep, as it relates to memory issues.
Learn more about the profiler and other techniques to analyze runtime performance in Google’s Chrome DevTools documentation.
Next, you can continue through our Server-Side Rendering Performance series, with an article about how to build cacheable SSR pages. Or, explore best practices to optimize your PWA’s client-side performance.