主题测试和调试

先判断问题出现在哪里

在本地开发时一切完美，推送到线上后却发现页面错乱、控制台飘红、甚至导致商家后台白屏。这是缺乏系统性测试的必然结果。

核心逻辑是：静态代码扫描（Linting）与多环境动态调试。

Shopify 主题开发不仅涉及前端的 HTML/CSS/JS，还涉及后端的 Liquid 渲染和 Schema 配置。必须引入 Shopify 官方的 Theme Check 工具进行自动化代码审计，并熟练使用 Chrome DevTools 和 Shopify Preview Inspector，在代码上线前将 Bug 扼杀在摇篮里。

实战步骤

步骤 1：配置并运行 Theme Check

操作路径：在本地终端运行扫描命令

Theme Check 是 Shopify 官方的 Linter 工具（类似于 ESLint）。
在项目根目录运行：shopify theme check。
它会瞬间扫描你所有的代码，并揪出致命错误：
- 语法错误：JSON 格式错误、Liquid 标签未闭合。
- 性能警告：在 for 循环里嵌套了耗时的全局查询。
- 翻译缺失：locales 文件夹中遗漏的翻译键。
- 废弃特性：使用了旧版 Shopify 已经不支持的 API。
强烈建议：在 VS Code 中安装 Shopify Liquid 插件，它内置了 Theme Check，能在你写代码时实时标红错误。

步骤 2：利用 Chrome DevTools 调试前端逻辑

操作路径：浏览器按 F12 打开开发者工具

Network 面板：调试 Ajax 购物车时，必须盯着这里。检查 /cart/add.js 的请求头（Headers）是否正确，查看返回的 JSON 数据（Preview）是否包含报错信息（如库存不足）。
Elements 面板：检查 Liquid 渲染出来的 DOM 结构。特别注意 data-* 属性是否正确绑定了变体 ID。
Console 面板：不要只看红色的 Error。在开发复杂的变体切换逻辑时，多用 console.log() 打印出当前匹配到的 Variant 对象，核对数据是否准确。

步骤 3：使用 Shopify Preview Inspector 定位代码

操作路径：在本地预览链接中开启 Inspector

当你在接手一个极其复杂的旧主题时，看到页面上有一个奇怪的按钮，却不知道它是在哪个 Liquid 文件里渲染出来的。
在本地运行 shopify theme dev 时，浏览器底部会出现一个 Shopify 的黑色控制条。
点击开启 Inspector（检查器）。
此时，你的鼠标悬停在页面任何元素上，都会弹出一个提示框，精确告诉你这个元素是由哪个 Section、哪个 Snippet 甚至哪一行代码渲染出来的。点击提示框，可以直接在 VS Code 中打开对应的文件。这是排查代码的终极神器。

常见误区与处理方法

误区一：只在拥有完美数据的开发店铺中进行测试

规避方法：你在自己的开发店铺里建了 3 个产品，每个产品都有完美的 1000x1000 像素的高清白底图，标题简短，库存充足。你看着自己开发的主题，觉得完美无瑕。结果商家买回去一用，页面全崩了！因为商家的产品图有长有扁，标题长达 5 行，甚至很多产品根本没填价格或者处于缺货状态。在测试主题时，必须进行“极限压力测试（Edge Case Testing）”。故意上传比例极其夸张的图片，写一段几千字的超长产品描述，把库存设为 0，甚至留空某些必填的 Theme Settings。确保你的 CSS 布局在面对这些“脏数据”时依然坚挺，不会出现文字溢出或图片变形。

误区二：忽略了不同浏览器的兼容性测试

规避方法：你在 Mac 上的 Chrome 浏览器里开发，一切都很丝滑。但你忘了，世界上还有大量的用户在使用 iPhone 上的 Safari，甚至一些老旧的安卓自带浏览器。Safari 对某些 CSS 属性（如 100vh 的处理、某些特定的 Flexbox 嵌套）有着极其诡异的解析方式，经常会导致布局错乱。在发布主题前，必须使用真实设备（至少一部 iPhone 和一部安卓机）进行真机测试。或者使用 BrowserStack 等云端测试平台，确保核心的购物流程（加购、变体切换、结账）在 Safari 和主流移动端浏览器上畅通无阻。

误区三：Theme Check 报错但强行忽略并 Push 代码

规避方法：你在运行 shopify theme check 时，看到终端里弹出了几十个黄色的 Warning（警告）和几个红色的 Error（错误）。你觉得“反正页面看起来没问题”，于是直接 git push 部署到了线上。这就像带着一颗定时炸弹上线。Theme Check 报出的错误，往往是那些在特定条件下才会触发的隐蔽 Bug（比如某个未闭合的 {% if %} 标签在特定数据下会导致整个页面结构崩溃）。确立严格的代码提交规范：Theme Check 必须零错误（Zero Errors）才能合并代码。对于某些确实不需要处理的警告，可以使用 {% # theme-check-disable %} 注释在代码中显式声明忽略，绝不能掩耳盗铃。

FAQ