In SAP Spartacus document there is a page for “How to Debug a Server–Side Rendered Storefront” using Visual Studio Code.

https://sap.github.io/spartacus-docs/3.x/how-to-debug-server-side-rendered-storefront/

This document just introduces another way to debug, using Chrome Dev Tools instead of Visual Studio Code.The steps are written based on Spartacus library with version 3.4.1.

(1) create a Storefront using Spartacus library and enable it with SSR support using Schematics，by following this document:

https://sap.github.io/spartacus-docs/3.x/building-the-spartacus-storefront-from-libraries-3-4/

(2) By default a script build:ssr is generated to build Storefront and launch it in SSR mode.

The build option –prod and production configuration is used so it means in this way you have to debug a version with minified and uglified code.

So we can create another script build:ssrdev with –prod and production configuration removed, so it comes with this content:

ng build && ng run mystore:server

In this way, check the bundles generated in folder server,we have un-minified source code which is easier for debugging now.

(3) add –inspect-brk option in node command in package.json file：

node –inspect-brk dist/mystore/server/main.js

npm run serve:ssr

(4) open chrome://inspect,press “inspect” hyperlink:

Then Chrome dev tools opens, with breakpoint stopped at the first line of main.js bundle, thanks to the –inspect-brk option:

Now we can debug at will. Press Ctrl + O and type the name of the file in which we would like to debug:

For example，if I would like to debug HTML tag generation process for SEO purpose, I can set breakpoint in file spartacus-storefront.js, class SeoMetaService.We can now just debug the Storefront running in SSR mode, just like the same when it is rendered using CSR ( Client Side Render ) mode.

Happy debugging!