Shopify Theme Devtools

Shopify Theme Devtools provides an essential in-browser developer tools panel tailored for Shopify theme development, enabling developers to create and maintain themes with greater efficiency. The tool enhances the development experience by allowing users to inspect Liquid objects, evaluate expressions, explore metafields, manipulate cart state, and identify Liquid errors—all directly within the browser.

Features

Core Panels

• Objects Inspector: A user-friendly interface to browse shop, product, collection, customer, and cart objects with deep searching capabilities and a collapsible tree view.
• Metafields Viewer: Effortlessly explore metafields across various resources and namespaces, complete with type labels for clarity.
• Cart Panel: Access real-time updates of cart states, permitting item additions/removals, quantity adjustments, and history snapshots with restoration features.
• Console: A robust console similar to Chrome DevTools, equipped with a Liquid expression evaluator and autocomplete functionality.
• Localization: Swiftly manage markets, currencies, languages, and country data.
• SEO Inspector: Validate meta tags, Open Graph, Twitter Cards, and structured data (JSON-LD) to ensure optimal search engine performance.
• Analytics Viewer: Detect and manage Google Analytics, Facebook Pixel, and other tracking codes effortlessly.
• Storage Inspector: Inspect and edit local storage, session storage, and cookies seamlessly.
• Apps Panel: Automatically lists installed Shopify apps present on the page.
• Info Panel: Provides vital theme details, template information, and request metadata.

Advanced Features

Expression Evaluator: Test and evaluate Liquid paths with real-time data, allowing for rapid debugging and development. Example Liquid expressions:

> product.title  
"Classic Cotton T-Shirt"

> product.variants[0].price | money  
"$29.99"

> cart.items | size  
3

> shop.name | upcase  
"MY AWESOME STORE"

Cart Tests: Define custom validation rules for cart items, ensuring compliance with business requirements. Features pre-built templates and options for automatic testing.

Liquid Error Detection: Automatically identifies and suggests fixes for common Liquid issues, enhancing debugging and reducing errors during development.

Network Panel: Robust monitoring of Shopify API requests with capabilities to log, edit, and replay requests, ensuring seamless interactions with the Shopify platform.

Tab Customization: Tailor the devtools interface to fit personal workflows using drag-and-drop functionalities and customizable tab visibility.

Getting Started

To initiate the setup, the recommended approach is to utilize npm:

npx shopify-theme-devtools init

Or for a more persistent setup:

npm install -g shopify-theme-devtools
shopify-theme-devtools init

Configuration is simplified, with automatic detection of metafields accordingly.

This tool is designed to support development for unpublished themes only, ensuring that live themes remain unaffected by any development changes. It is a vital resource for any developer looking to optimize their Shopify theme development process with efficiency and precision.