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

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：

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!

更多Jerry的原创文章，尽在：“汪子熙”:

Debug a Server–Side Rendered SAP Spartacus Storefront Using Chrome Dev Tools相关推荐

以 library 方式启动的 SAP Spartacus Storefront，如何手动实现 User 模块的延迟加载
首先了解 SAP Spartacus Storefront 是如何导入 feature module 的.本文写作版本:Spartacus-core:3.4.1 AppModule->Spart ...
如何给 SAP Spartacus Storefront 创建新的页面
page template 不包含 layout 或者 design information. content slot 在页面上的具体位置,以及 layout 和 design 的选择,必须在前端指 ...
SAP Spartacus storefront 模块的实现位置
Angular应用里最终渲染出来原生HTML dom元素,全部都是Angular的core.js里的代码实现的: 往cx-storefront里插入子节点: 子节点内容: 路径:https://git ...
如何在 SAP Commerce Cloud Portal 构建和部署 SAP Spartacus Storefront
Commerce Cloud portal: CCV2 部署包含构建和部署两个子步骤. 首先登录 cloud portal,创建一个新 build: 点击 create 按钮: 输入构建的名称和托管要 ...
SAP Spartacus storefront.component.html 怎么关联到其他的页面
storefront怎么关联到其他的页面? 下图是storefront.component.html的源代码,里面使用自定义Component cx-page-layout和cx-page-slot, ...
如何使用schematics快速创建全新的SAP Spartacus Storefront并启用SSR
SSR 测试要点 I checked once again version 2.1.0 of spartacus. Everything works correctly in spartacus in ...
SAP Spartacus Storefront 页面 cx-page-layout 的赋值逻辑
分别是header,navigation和footer: 对应的 Component 实现里,有对应的 set 方法: section$ 是一个 BehaviorSubject. 其中每个sectio ...
SAP Spartacus storefront.component.html 里的 SkipLinkComponent 如何创建的
源代码: 现在cxOutlet的值是字符串cx-storefront: 运行时触发ngOnChanges hook: 然后之行到 cx-header 的 outlet 解析: 从注释看,render方 ...
SAP Spartacus Storefront页面的page layout config
在page-layout.service.ts里的getPageFoldSlot方法设置断点: 在this.config里即可获得所有的配置信息.其中和layout相关的breakpoints: la ...

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

Debug a Server–Side Rendered SAP Spartacus Storefront Using Chrome Dev Tools相关推荐

最新文章

热门文章