分析 Shopify CLI 预览本地主题时，预览横幅未显示的原因

1、Shopify 后台预览主题 Sense，仅保留参数（preview_theme_id）：GET https://shuijingwanwq-development.myshopify.com/?preview_theme_id=130698641593 。预览横幅显示。如图1、图2

图1

图2

2、在 Shopify CLI 中执行命令：shopify theme dev –verbose ，在浏览器中打开此网址：http://127.0.0.1:9292 ，可预览当前本地环境的正在开发中的主题。如图3

图3

┃ Serving .
┃
┃ Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃
┃ Customize this theme in the Theme Editor, and use 'theme pull' to get the changes:
┃ https://shuijingwanwq-development.myshopify.com/admin/themes/133598314681/editor
┃
┃ Share this theme preview:
┃ https://shuijingwanwq-development.myshopify.com/?preview_theme_id=133598314681
┃
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (4.34s) ━━━
[2023-03-09 10:01:13] INFO WEBrick 1.7.0
[2023-03-09 10:01:13] INFO ruby 3.1.1 (2022-02-18) [x64-mingw-ucrt]
[2023-03-09 10:01:13] INFO WEBrick::HTTPServer#start: pid=5384 port=9292
DEBUG Refreshing preview _secure_session_id cookie
DEBUG Proxying HEAD https://shuijingwanwq-development.myshopify.com/?preview_theme_id=133598314681&_fd=0&pb=0
DEBUG `-> 302 request_id: 38f7af92-8e4d-408a-be4c-a3c1e289d479
DEBUG Proxying GET https://shuijingwanwq-development.myshopify.com/?_fd=0&pb=0
DEBUG `-> 302 request_id: 03d906fc-6399-4eb7-87cf-e34a2f345397

3、查看 http://127.0.0.1:9292 ，预览本地主题时，预览横幅未显示。如图4

图4

4、通过步骤 3 ，可确认代理至线上网址的参数多出了：_fd=0&pb=0 ，经过尝试，可以确认预览横幅是否显示是基于参数：pb 进行控制的。pb 的完整单词应该是：preview bar。在步骤 1 的请求网址中添加参数：pb=0，预览横幅不再显示。如图5

图5