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.

![](https://img-blog.csdnimg.cn/img_convert/d7637f2ce5d459488f1120fbe71a7a90.png)

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

![](https://img-blog.csdnimg.cn/img_convert/6a4e48704d8f0e4c966f04b5658515a2.png)

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

![](https://img-blog.csdnimg.cn/img_convert/83e27f69723b602dab2a22d6388807b1.png)

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

cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 node --inspect-brk dist/mystore/server/main.js
![](https://img-blog.csdnimg.cn/img_convert/38a2a7faa29dc5647e291ce560d74226.png)

npm run serve:ssr
![](https://img-blog.csdnimg.cn/img_convert/6c530ba846825efb8568b480ed7a4a0f.png)

(4) open chrome://inspect,press "inspect" hyperlink:

![](https://img-blog.csdnimg.cn/img_convert/080355138470f7924edee032590fc32a.png)

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

![](https://img-blog.csdnimg.cn/img_convert/5ae1951c0eeef9d71505eeda32d0c93e.png)

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

![](https://img-blog.csdnimg.cn/img_convert/95b435f5a4ecaa7d28e18c452d03163b.png)

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!

![](https://img-blog.csdnimg.cn/img_convert/72dcf9b956fed9119e0d1572f5025b2a.png)

Debug a Server–Side Rendered SAP Spartacus Storefront Using Chrome Dev Tools

相關文章