使用Chrome开发者工具调试|使用Chrome开发者工具调试 Server–Side Rendered SAP Spartacus Storefront
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/spartac...
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/spartac...
(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：
cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 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!
文章图片
【使用Chrome开发者工具调试|使用Chrome开发者工具调试 Server–Side Rendered SAP Spartacus Storefront】更多Jerry的原创文章，尽在："汪子熙":
文章图片
推荐阅读
- 由浅入深理解AOP
- Mac安装Chromedriver
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用