Liquid Debug Snippet

debug.liquid

{%- doc -%}
  Outputs the provided Liquid value to the browser console for debugging.

  @param {string} [title] - Optional label for the instance
  @param this - The instance content to debug
  @param {boolean} [json] - If true, also logs a parsed JSON version of the instance

  @example
  {% render 'debug', this: shop.metafields.services.title, json: true %}
  {% render 'debug', this: product.images, json: false %}
{%- enddoc -%}

{%- liquid
  if title != blank
  assign label = title
  else
    assign label = 'DEBUG'
  endif
-%}

<script>
 console.group('%c{{ label }} Debugging', 'color: orange; font-weight: bold;');

 {% if json %}
   console.log('%cJSON:', 'color: #00CC66; font-weight: bold', JSON.parse('{{ this | json }}'))
 {% endif %}

 console.log('%cRaw:', 'color: #009933; font-weight: bold', '{{ this }}')

 console.groupEnd();
</script>