Skip to Content
🎉 探索 Shopify 的无限可能 结构化知识 + 实战案例，持续更新中...
Liquid 开发问题排查

Liquid 调试和故障排除

开发 Shopify 主题时，掌握有效的调试技巧是非常重要的。本指南将帮助您快速定位和解决 Liquid 代码中的问题。

调试工具和技巧

1. 基本调试输出

<!-- 简单的调试输出 -->
{% if settings.debug_mode %}
  <div class="debug-output">
    <h4>调试信息</h4>
    <p>当前模板: {{ template }}</p>
    <p>产品ID: {{ product.id | default: '无' }}</p>
    <p>集合句柄: {{ collection.handle | default: '无' }}</p>
    <p>客户状态: {% if customer %}已登录{% else %}未登录{% endif %}</p>
  </div>
{% endif %}
 
<!-- 条件调试 -->
{% assign debug_product = settings.debug_product_id %}
{% if product.id == debug_product %}
  <div class="debug-panel">
    <h4>产品调试 (ID: {{ product.id }})</h4>
    <pre>{{ product | json }}</pre>
  </div>
{% endif %}

2. 对象结构检查

<!-- 查看完整对象结构 -->
{% if settings.show_object_debug %}
  <details class="debug-details">
    <summary>产品对象结构</summary>
    <pre style="background: #f5f5f5; padding: 15px; overflow: auto; max-height: 400px;">
      {{ product | json }}
    </pre>
  </details>
  
  <details class="debug-details">
    <summary>集合对象结构</summary>
    <pre style="background: #f5f5f5; padding: 15px; overflow: auto; max-height: 400px;">
      {{ collection | json }}
    </pre>
  </details>
  
  <details class="debug-details">
    <summary>购物车对象结构</summary>
    <pre style="background: #f5f5f5; padding: 15px; overflow: auto; max-height: 400px;">
      {{ cart | json }}
    </pre>
  </details>
{% endif %}

3. 变量状态跟踪

<!-- 跟踪变量变化 -->
{% if settings.debug_mode %}
  {% assign debug_log = "" %}
  
  {% assign featured_products = collection.products | where: 'tags', 'featured' %}
  {% assign debug_log = debug_log | append: "过滤featured标签后: " | append: featured_products.size | append: " 个产品\n" %}
  
  {% assign available_products = featured_products | where: 'available', true %}
  {% assign debug_log = debug_log | append: "过滤可用性后: " | append: available_products.size | append: " 个产品\n" %}
  
  {% assign final_products = available_products | limit: 8 %}
  {% assign debug_log = debug_log | append: "最终显示: " | append: final_products.size | append: " 个产品\n" %}
  
  <div class="debug-log">
    <h4>处理日志</h4>
    <pre>{{ debug_log }}</pre>
  </div>
{% endif %}

4. 性能调试

<!-- 渲染时间测量 -->
{% assign start_time = 'now' | date: '%s' | plus: 0 %}
 
<!-- 主要内容 -->
<div class="main-content">
  {% for product in collection.products limit: 20 %}
    {% render 'product-card', product: product %}
  {% endfor %}
</div>
 
{% assign end_time = 'now' | date: '%s' | plus: 0 %}
{% assign render_time = end_time | minus: start_time %}
 
{% if settings.debug_mode %}
  <div class="performance-debug">
    <p>渲染耗时: {{ render_time }}秒</p>
    <p>处理商品: {{ collection.products.size }}</p>
    <p>实际渲染: 20</p>
    <p>平均耗时: {{ render_time | divided_by: 20.0 | round: 4 }}秒/商品</p>
  </div>
{% endif %}

常见错误和解决方案

1. 对象访问错误

<!-- 错误: 访问不存在的对象 -->
{{ nonexistent_object.property }}  <!-- 会显示空白 -->
 
<!-- 解决方案: 检查对象存在性 -->
{% if nonexistent_object %}
  {{ nonexistent_object.property }}
{% else %}
  <span class="debug-warning">对象不存在</span>
{% endif %}
 
<!-- 错误: 访问可能为空的嵌套属性 -->
{{ product.featured_image.alt }}  <!-- 如果没有图片会出错 -->
 
<!-- 解决方案: 逐级检查 -->
{% if product.featured_image and product.featured_image.alt %}
  {{ product.featured_image.alt }}
{% else %}
  {{ product.title }}
{% endif %}
 
<!-- 更简洁的解决方案: 使用 default -->
{{ product.featured_image.alt | default: product.title }}

2. 数据类型错误

<!-- 错误: 字符串和数字混用 -->
{% assign price_string = "99.99" %}
{% assign discount = 10 %}
{% assign final_price = price_string | minus: discount %}  <!-- 可能出错 -->
 
<!-- 解决方案: 确保数据类型一致 -->
{% assign price_number = price_string | plus: 0 %}
{% assign final_price = price_number | minus: discount %}
 
<!-- 调试数据类型 -->
{% if settings.debug_mode %}
  <div class="debug-types">
    <p>price_string 类型: {{ price_string | class }}</p>
    <p>price_number 类型: {{ price_number | class }}</p>
    <p>discount 类型: {{ discount | class }}</p>
  </div>
{% endif %}

3. 过滤器错误

<!-- 错误: 对空值使用过滤器 -->
{{ empty_variable | upcase }}  <!-- 可能出错 -->
 
<!-- 解决方案: 检查变量或提供默认值 -->
{{ empty_variable | default: "默认值" | upcase }}
 
<!-- 错误: 过滤器参数错误 -->
{{ product.title | truncate: "invalid" }}  <!-- 参数应该是数字 -->
 
<!-- 解决方案: 使用正确的参数类型 -->
{{ product.title | truncate: 50 }}
 
<!-- 调试过滤器结果 -->
{% assign original_title = product.title %}
{% assign truncated_title = original_title | truncate: 30 %}
 
{% if settings.debug_mode %}
  <div class="debug-filter">
    <p>原始标题: "{{ original_title }}" ({{ original_title.size }} 字符)</p>
    <p>截取后: "{{ truncated_title }}" ({{ truncated_title.size }} 字符)</p>
  </div>
{% endif %}

4. 循环错误

<!-- 错误: 无限循环或大量迭代 -->
{% for product in collections.all.products %}  <!-- 可能有成千上万个产品 -->
  {{ product.title }}
{% endfor %}
 
<!-- 解决方案: 使用 limit -->
{% for product in collections.all.products limit: 50 %}
  {{ product.title }}
{% endfor %}
 
<!-- 调试循环性能 -->
{% assign loop_start = 'now' | date: '%s' | plus: 0 %}
{% assign loop_count = 0 %}
 
{% for product in collection.products %}
  {% assign loop_count = loop_count | plus: 1 %}
  {% render 'product-card', product: product %}
  
  <!-- 在开发模式下限制循环 -->
  {% if settings.debug_mode and loop_count >= 10 %}
    <div class="debug-warning">
      <p>调试模式: 只显示前10个产品</p>
    </div>
    {% break %}
  {% endif %}
{% endfor %}
 
{% assign loop_end = 'now' | date: '%s' | plus: 0 %}
{% assign loop_time = loop_end | minus: loop_start %}
 
{% if settings.debug_mode %}
  <div class="debug-loop">
    <p>循环处理了 {{ loop_count }} 个产品</p>
    <p>耗时: {{ loop_time }}秒</p>
  </div>
{% endif %}

开发环境调试

1. 本地开发调试

<!-- 检测开发环境 -->
{% assign is_dev_env = false %}
{% if request.host contains 'localhost' 
   or request.host contains '.ngrok.io'
   or request.host contains '.myshopify.com' %}
  {% assign is_dev_env = true %}
{% endif %}
 
{% if is_dev_env %}
  <div class="dev-toolbar" style="
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: #000; 
    color: #fff; 
    padding: 10px; 
    z-index: 9999;
    font-size: 12px;
  ">
    <strong>开发模式</strong> | 
    模板: {{ template }} | 
    页面: {{ request.page_type }} | 
    {% if product %}产品: {{ product.id }}{% endif %}
    {% if collection %}集合: {{ collection.handle }}{% endif %}
    
    <button onclick="document.querySelector('.dev-toolbar').style.display='none'">
      关闭
    </button>
  </div>
  
  <style>
    body { margin-top: 50px !important; }
  </style>
{% endif %}

2. 主题检查器

<!-- 创建自定义主题检查器 -->
{% if is_dev_env and settings.enable_theme_inspector %}
  <div id="theme-inspector" style="
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    max-height: 400px;
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 15px;
    border-radius: 5px;
    font-size: 12px;
    overflow-y: auto;
    z-index: 9998;
  ">
    <h4 style="margin: 0 0 10px 0;">主题检查器</h4>
    
    <div class="inspector-section">
      <h5>模板信息</h5>
      <ul style="margin: 0; padding-left: 15px;">
        <li>模板: {{ template }}</li>
        <li>页面类型: {{ request.page_type }}</li>
        <li>URL: {{ request.path }}</li>
      </ul>
    </div>
    
    {% if product %}
    <div class="inspector-section">
      <h5>产品信息</h5>
      <ul style="margin: 0; padding-left: 15px;">
        <li>ID: {{ product.id }}</li>
        <li>句柄: {{ product.handle }}</li>
        <li>标题: {{ product.title | truncate: 30 }}</li>
        <li>可用: {{ product.available }}</li>
        <li>变体数: {{ product.variants.size }}</li>
        <li>图片数: {{ product.images.size }}</li>
      </ul>
    </div>
    {% endif %}
    
    {% if collection %}
    <div class="inspector-section">
      <h5>集合信息</h5>
      <ul style="margin: 0; padding-left: 15px;">
        <li>ID: {{ collection.id }}</li>
        <li>句柄: {{ collection.handle }}</li>
        <li>标题: {{ collection.title }}</li>
        <li>产品数: {{ collection.products.size }}</li>
      </ul>
    </div>
    {% endif %}
    
    <div class="inspector-section">
      <h5>购物车信息</h5>
      <ul style="margin: 0; padding-left: 15px;">
        <li>商品数: {{ cart.item_count }}</li>
        <li>总价: {{ cart.total_price | money }}</li>
        <li>重量: {{ cart.total_weight }}g</li>
      </ul>
    </div>
    
    {% if customer %}
    <div class="inspector-section">
      <h5>客户信息</h5>
      <ul style="margin: 0; padding-left: 15px;">
        <li>ID: {{ customer.id }}</li>
        <li>邮箱: {{ customer.email }}</li>
        <li>订单数: {{ customer.orders_count }}</li>
        <li>总消费: {{ customer.total_spent | money }}</li>
      </ul>
    </div>
    {% endif %}
    
    <button onclick="document.getElementById('theme-inspector').style.display='none'"
            style="margin-top: 10px; padding: 5px 10px; background: #333; color: white; border: none; border-radius: 3px;">
      关闭
    </button>
  </div>
{% endif %}

3. 错误日志收集

<!-- 错误收集和显示 -->
{% assign error_log = "" %}
{% assign has_errors = false %}
 
<!-- 检查常见问题 -->
{% if product %}
  {% unless product.featured_image %}
    {% assign error_log = error_log | append: "警告: 产品缺少特色图片\n" %}
    {% assign has_errors = true %}
  {% endunless %}
  
  {% if product.description == blank %}
    {% assign error_log = error_log | append: "警告: 产品缺少描述\n" %}
    {% assign has_errors = true %}
  {% endif %}
  
  {% if product.variants.size == 0 %}
    {% assign error_log = error_log | append: "错误: 产品没有变体\n" %}
    {% assign has_errors = true %}
  {% endif %}
{% endif %}
 
{% if collection %}
  {% if collection.products.size == 0 %}
    {% assign error_log = error_log | append: "警告: 集合为空\n" %}
    {% assign has_errors = true %}
  {% endif %}
{% endif %}
 
<!-- 显示错误日志 -->
{% if has_errors and is_dev_env %}
  <div class="error-log" style="
    background: #ffebee;
    border: 1px solid #f44336;
    color: #c62828;
    padding: 15px;
    margin: 10px 0;
    border-radius: 4px;
  ">
    <h4 style="margin: 0 0 10px 0; color: #c62828;">⚠️ 发现问题</h4>
    <pre style="margin: 0; white-space: pre-wrap;">{{ error_log }}</pre>
  </div>
{% endif %}

浏览器开发工具

1. 控制台调试

<!-- 在浏览器控制台输出调试信息 -->
<script>
{% if settings.debug_mode %}
  console.group('Shopify Liquid Debug');
  
  // 基本页面信息
  console.log('Template:', '{{ template }}');
  console.log('Page Type:', '{{ request.page_type }}');
  console.log('URL:', '{{ request.path }}');
  
  // 产品信息
  {% if product %}
  console.group('Product Info');
  console.log('ID:', {{ product.id }});
  console.log('Handle:', '{{ product.handle }}');
  console.log('Title:', {{ product.title | json }});
  console.log('Available:', {{ product.available }});
  console.log('Price:', {{ product.price }});
  console.log('Variants:', {{ product.variants.size }});
  console.log('Images:', {{ product.images.size }});
  console.log('Full Object:', {{ product | json }});
  console.groupEnd();
  {% endif %}
  
  // 集合信息
  {% if collection %}
  console.group('Collection Info');
  console.log('ID:', {{ collection.id }});
  console.log('Handle:', '{{ collection.handle }}');
  console.log('Title:', {{ collection.title | json }});
  console.log('Products Count:', {{ collection.products.size }});
  console.log('Full Object:', {{ collection | json }});
  console.groupEnd();
  {% endif %}
  
  // 购物车信息
  console.group('Cart Info');
  console.log('Item Count:', {{ cart.item_count }});
  console.log('Total Price:', {{ cart.total_price }});
  console.log('Items:', {{ cart.items | json }});
  console.groupEnd();
  
  // 客户信息
  {% if customer %}
  console.group('Customer Info');
  console.log('ID:', {{ customer.id }});
  console.log('Email:', '{{ customer.email }}');
  console.log('Orders Count:', {{ customer.orders_count }});
  console.log('Total Spent:', {{ customer.total_spent }});
  console.groupEnd();
  {% else %}
  console.log('Customer: Not logged in');
  {% endif %}
  
  console.groupEnd();
{% endif %}
</script>

2. 网络请求监控

<!-- 监控AJAX请求 -->
<script>
{% if settings.debug_mode %}
  // 监控所有AJAX请求
  const originalFetch = window.fetch;
  window.fetch = function(...args) {
    console.group('🌐 Fetch Request');
    console.log('URL:', args[0]);
    console.log('Options:', args[1]);
    
    return originalFetch.apply(this, args)
      .then(response => {
        console.log('Response:', response);
        console.groupEnd();
        return response;
      })
      .catch(error => {
        console.error('Error:', error);
        console.groupEnd();
        throw error;
      });
  };
  
  // 监控XMLHttpRequest
  const originalXHR = window.XMLHttpRequest;
  window.XMLHttpRequest = function() {
    const xhr = new originalXHR();
    const originalOpen = xhr.open;
    const originalSend = xhr.send;
    
    xhr.open = function(method, url, ...rest) {
      console.log('🔗 XHR Request:', method, url);
      return originalOpen.apply(this, [method, url, ...rest]);
    };
    
    return xhr;
  };
{% endif %}
</script>

性能问题调试

1. 慢查询识别

<!-- 识别慢速操作 -->
{% assign slow_operations = "" %}
 
{% assign start_time = 'now' | date: '%s' | plus: 0 %}
{% assign expensive_filter = collection.products | where: 'available', true | map: 'vendor' | uniq %}
{% assign end_time = 'now' | date: '%s' | plus: 0 %}
{% assign filter_time = end_time | minus: start_time %}
 
{% if filter_time > 0 %}
  {% assign slow_operations = slow_operations | append: "vendor过滤耗时: " | append: filter_time | append: "s\n" %}
{% endif %}
 
{% assign start_time = 'now' | date: '%s' | plus: 0 %}
{% assign sorted_products = collection.products | sort: 'price' %}
{% assign end_time = 'now' | date: '%s' | plus: 0 %}
{% assign sort_time = end_time | minus: start_time %}
 
{% if sort_time > 0 %}
  {% assign slow_operations = slow_operations | append: "价格排序耗时: " | append: sort_time | append: "s\n" %}
{% endif %}
 
{% if slow_operations != "" and settings.debug_mode %}
  <div class="performance-warning" style="
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
  ">
    <h4>⚡ 性能警告</h4>
    <pre>{{ slow_operations }}</pre>
  </div>
{% endif %}

2. 内存使用监控

<!-- JavaScript内存监控 -->
<script>
{% if settings.debug_mode %}
  function logMemoryUsage() {
    if (performance.memory) {
      console.group('📊 Memory Usage');
      console.log('Used:', Math.round(performance.memory.usedJSHeapSize / 1024 / 1024) + ' MB');
      console.log('Total:', Math.round(performance.memory.totalJSHeapSize / 1024 / 1024) + ' MB');
      console.log('Limit:', Math.round(performance.memory.jsHeapSizeLimit / 1024 / 1024) + ' MB');
      console.groupEnd();
    }
  }
  
  // 页面加载时记录内存使用
  document.addEventListener('DOMContentLoaded', logMemoryUsage);
  
  // 每30秒记录一次内存使用
  setInterval(logMemoryUsage, 30000);
{% endif %}
</script>

常见问题解决方案

1. 空白页面问题

<!-- 诊断空白页面 -->
{% if settings.debug_mode %}
  <div class="page-diagnostics">
    <h3>页面诊断</h3>
    
    <div class="diagnostic-item">
      <strong>模板:</strong> {{ template }}
      {% if template == blank %}
        <span style="color: red;">❌ 模板为空</span>
      {% else %}
        <span style="color: green;">✅ 模板正常</span>
      {% endif %}
    </div>
    
    <div class="diagnostic-item">
      <strong>页面类型:</strong> {{ request.page_type }}
    </div>
    
    {% if template contains 'product' %}
      <div class="diagnostic-item">
        <strong>产品对象:</strong>
        {% if product %}
          <span style="color: green;">✅ 产品对象存在 (ID: {{ product.id }})</span>
        {% else %}
          <span style="color: red;">❌ 产品对象不存在</span>
        {% endif %}
      </div>
    {% endif %}
    
    {% if template contains 'collection' %}
      <div class="diagnostic-item">
        <strong>集合对象:</strong>
        {% if collection %}
          <span style="color: green;">✅ 集合对象存在 ({{ collection.products.size }} 个产品)</span>
        {% else %}
          <span style="color: red;">❌ 集合对象不存在</span>
        {% endif %}
      </div>
    {% endif %}
  </div>
{% endif %}

2. 样式问题调试

<!-- CSS调试助手 -->
{% if settings.debug_mode %}
  <style>
    /* 调试边框 */
    .debug-borders * {
      outline: 1px solid rgba(255, 0, 0, 0.2) !important;
    }
    
    /* 调试网格 */
    .debug-grid {
      background-image: 
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
      background-size: 20px 20px;
    }
    
    /* 调试信息显示 */
    .debug-info {
      position: relative;
    }
    
    .debug-info:hover::after {
      content: attr(data-debug);
      position: absolute;
      top: 100%;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 5px;
      font-size: 12px;
      white-space: nowrap;
      z-index: 1000;
    }
  </style>
  
  <script>
    // 添加调试控制
    document.addEventListener('keydown', function(e) {
      // Ctrl+Shift+D 切换调试边框
      if (e.ctrlKey && e.shiftKey && e.key === 'D') {
        document.body.classList.toggle('debug-borders');
      }
      
      // Ctrl+Shift+G 切换调试网格
      if (e.ctrlKey && e.shiftKey && e.key === 'G') {
        document.body.classList.toggle('debug-grid');
      }
    });
  </script>
{% endif %}

3. 数据问题诊断

<!-- 数据完整性检查 -->
{% if settings.debug_mode %}
  <div class="data-diagnostics">
    <h3>数据诊断</h3>
    
    <!-- 产品数据检查 -->
    {% if product %}
      <div class="diagnostic-section">
        <h4>产品数据完整性</h4>
        <ul>
          <li>
            标题: 
            {% if product.title and product.title != blank %}
              <span style="color: green;">✅</span>
            {% else %}
              <span style="color: red;">❌ 缺少标题</span>
            {% endif %}
          </li>
          <li>
            描述: 
            {% if product.description and product.description != blank %}
              <span style="color: green;">✅</span>
            {% else %}
              <span style="color: orange;">⚠️ 缺少描述</span>
            {% endif %}
          </li>
          <li>
            特色图片: 
            {% if product.featured_image %}
              <span style="color: green;">✅</span>
            {% else %}
              <span style="color: red;">❌ 缺少特色图片</span>
            {% endif %}
          </li>
          <li>
            变体: 
            {% if product.variants.size > 0 %}
              <span style="color: green;">✅ {{ product.variants.size }} 个变体</span>
            {% else %}
              <span style="color: red;">❌ 没有变体</span>
            {% endif %}
          </li>
          <li>
            价格: 
            {% if product.price and product.price > 0 %}
              <span style="color: green;">✅ {{ product.price | money }}</span>
            {% else %}
              <span style="color: red;">❌ 无效价格</span>
            {% endif %}
          </li>
        </ul>
      </div>
    {% endif %}
    
    <!-- 集合数据检查 -->
    {% if collection %}
      <div class="diagnostic-section">
        <h4>集合数据完整性</h4>
        <ul>
          <li>
            产品数量: 
            {% if collection.products.size > 0 %}
              <span style="color: green;">✅ {{ collection.products.size }} 个产品</span>
            {% else %}
              <span style="color: orange;">⚠️ 集合为空</span>
            {% endif %}
          </li>
          <li>
            可用产品: 
            {% assign available_count = collection.products | where: 'available', true | size %}
            {% if available_count > 0 %}
              <span style="color: green;">✅ {{ available_count }} 个可用</span>
            {% else %}
              <span style="color: red;">❌ 没有可用产品</span>
            {% endif %}
          </li>
        </ul>
      </div>
    {% endif %}
  </div>
{% endif %}

生产环境调试

1. 安全的生产调试

<!-- 生产环境安全调试 -->
{% assign is_authorized_debug = false %}
{% if customer and customer.email == settings.debug_admin_email %}
  {% assign is_authorized_debug = true %}
{% endif %}
 
{% if is_authorized_debug and request.params.debug == settings.debug_secret_key %}
  <div class="production-debug" style="
    position: fixed;
    top: 50px;
    right: 20px;
    width: 250px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 5px;
    font-size: 11px;
    z-index: 9999;
  ">
    <h4>生产调试面板</h4>
    <p>模板: {{ template }}</p>
    <p>页面: {{ request.page_type }}</p>
    <p>时间: {{ 'now' | date: '%Y-%m-%d %H:%M:%S' }}</p>
    
    {% if product %}
      <p>产品: {{ product.id }} - {{ product.title | truncate: 20 }}</p>
    {% endif %}
    
    {% if collection %}
      <p>集合: {{ collection.handle }} ({{ collection.products.size }})</p>
    {% endif %}
    
    <button onclick="this.parentElement.style.display='none'">关闭</button>
  </div>
{% endif %}

2. 错误上报

<!-- 错误收集和上报 -->
<script>
{% if settings.error_reporting %}
  window.addEventListener('error', function(e) {
    const errorData = {
      message: e.message,
      filename: e.filename,
      line: e.lineno,
      column: e.colno,
      stack: e.error ? e.error.stack : null,
      userAgent: navigator.userAgent,
      url: window.location.href,
      timestamp: new Date().toISOString(),
      template: '{{ template }}',
      pageType: '{{ request.page_type }}',
      {% if product %}productId: {{ product.id }},{% endif %}
      {% if collection %}collectionId: {{ collection.id }},{% endif %}
    };
    
    // 发送错误报告到你的错误收集服务
    fetch('/apps/error-reporter', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(errorData)
    }).catch(console.error);
  });
{% endif %}
</script>

调试最佳实践

1. 调试检查清单

{% comment %}
调试检查清单：
 
1. 对象存在性
   - 检查所有对象是否存在
   - 使用 if 条件包装对象访问
   - 提供默认值或错误处理
 
2. 数据类型
   - 确认变量类型
   - 数字和字符串转换
   - 日期格式处理
 
3. 过滤器使用
   - 检查过滤器参数
   - 链式过滤器顺序
   - 空值处理
 
4. 循环性能
   - 使用 limit 限制数量
   - 避免深度嵌套
   - 早期跳出条件
 
5. 错误处理
   - 优雅降级
   - 用户友好的错误信息
   - 开发环境详细调试
 
6. 性能监控
   - 测量关键操作耗时
   - 监控内存使用
   - 网络请求跟踪
{% endcomment %}

2. 调试工具函数

<!-- 可重用的调试工具 -->
{% comment %}
使用示例:
{% render 'debug-object', object: product, title: '产品对象' %}
{% render 'debug-performance', start_time: start_time, operation: '产品过滤' %}
{% endcomment %}
 
<!-- snippets/debug-object.liquid -->
{% if settings.debug_mode %}
  <details class="debug-object" style="margin: 10px 0; border: 1px solid #ddd; padding: 10px;">
    <summary><strong>{{ title | default: '调试对象' }}</strong></summary>
    <pre style="background: #f5f5f5; padding: 10px; overflow: auto; max-height: 300px;">{{ object | json }}</pre>
  </details>
{% endif %}
 
<!-- snippets/debug-performance.liquid -->
{% if settings.debug_mode %}
  {% assign end_time = 'now' | date: '%s' | plus: 0 %}
  {% assign duration = end_time | minus: start_time %}
  {% if duration > 0 %}
    <div class="debug-performance" style="background: #e3f2fd; border-left: 4px solid #2196f3; padding: 8px; margin: 5px 0;">
      <strong>⏱️ {{ operation }}:</strong> {{ duration }}秒
    </div>
  {% endif %}
{% endif %}

总结

有效的调试技巧包括：

  1. 预防性编程 - 检查对象存在性，提供默认值
  2. 详细日志 - 记录变量状态和操作结果
  3. 性能监控 - 测量关键操作的执行时间
  4. 错误处理 - 优雅处理异常情况
  5. 开发工具 - 利用浏览器开发工具和自定义调试面板

下一步学习

掌握调试技巧后，建议继续学习：

  1. 最佳实践 - 避免常见问题
  2. 性能优化 - 提升代码效率
  3. 主题开发实战 - 实际项目应用
  4. 代码示例和案例 - 学习实际解决方案

良好的调试习惯是成为优秀 Liquid 开发者的重要技能！

最后更新时间：
项目实战总结学习资源