The [Shopify Theme Inspector for Chrome](/docs/storefronts/themes/tools/theme-inspector) is a browser plugin that visualizes Liquid render profiling data in a flame graph. This guide teaches you how to run the Shopify Theme Inspector on an online store and identify common Liquid render issues using the flame graph.
## Running the Shopify Theme Inspector
To run the Shopify Theme Inspector on a store, you need to have the **Themes** [staff permission](https://help.shopify.com/manual/your-account/staff-accounts/staff-roles/permissions/permissions-descriptions#online-store-permissions) or a [collaborator account](https://help.shopify.com/manual/your-account/staff-accounts/security/collaborator-accounts) with the same permission. To verify that you have this permission, make sure that you can view the [Themes page](https://admin.shopify.com/themes) in the store's admin.
1. Navigate to the Shopify store that you want to analyze.
If you have collaborator access for the store that you want to analyze, then you need to open the store from your Partner Dashboard.
2. From Google Chrome's extension area, click the **Shopify Theme Inspector for Chrome** icon.
3. Click **Sign In**, and then log in using your Shopify login.
If you have collaborator access to the store that you want to analyze, then log in using the Partner account that has collaborator access to the store.
4. Open [Chrome DevTools](https://developer.chrome.com/docs/devtools/) and then select the **Shopify** tab. If the tab isn't visible, then click the `>>` button to check for it in the overflow list. This tab is only available when you are viewing a Shopify store.
5. Navigate to a page in the store that you want to profile.
6. To generate a flame graph for the page, click the `⟳` or **Load Profile** button.
## Understanding the flame graph
The Shopify Theme Inspector generates a flame graph that represents when each node of Liquid ran and how long each node took to run.
Starting from the top of the stack, the timeline represents the total sequence of events and total time taken to render the page.
Hover over the timeline and select a specific section to zoom in on. Refer to the cursor in the following screenshot:
The total rendering time isn't equivalent to the Time to First Byte (TTFB) as it doesn't include additional overheads, such as the time it takes for a user's request to reach Shopify’s backend. For most users, this extra overhead should be less than 100ms.
Click on the relevant bar in the flame graph to learn more about each node. The following information is displayed, when available:
* **Time**: The time it took for the server to render the highlighted node, including any child nodes.
* **Percentage**: The percentage of the total time that the highlighted node took to render.
* **`tag:`, `variable:`**: Whether the highlighted node represents a Liquid tag or variable.
* **Code snippet**: The code that the server resolved.
* **Filename and line number**: The filename and line number where the code exists.
> Note
> Render times might vary slightly each time that a page is profiled. This is due to optimizations in Shopify's infrastructure.
## Sandwich view
The Shopify Theme Inspector includes a sandwich view that aggregates the "Self" times for each node, displaying the sum of their execution times excluding their children, as well as the "Total" time, which includes the execution times of their children. This feature is useful for identifying which nodes contribute most to your page's rendering time.
For example, you might notice that certain nodes, like `filter:image_url`, have a quick execution time of approximately 50μs (0.05ms) each but are executed as many as 2000 times. This repetitive execution significantly extends the overall render time, highlighting areas where optimization might be necessary:
## What to look for when debugging
Below are some trends that you can observe in the Shopify Theme Inspector flame graph and their implications for your theme's performance.
> Tip
> When identifying code that's slowing down a store, you should weigh the benefits of the related feature against its impact on the speed of the store. You might need to make some speed tradeoffs to build a user experience that leads to more sales.
### Too many nodes or deeply nested nodes
Some nodes are fast, but execute hundreds or thousands of times. This adds rendering time and increases your overall TTFB. The profile view supports the **Find** shortcut (Ctrl+F, or Cmd+F on Mac) to give you a count of how many times a node is executed.
Similarly, if your flame graph has many layers of nested nodes, then your code might not be optimized. Below are some of the common causes of nested nodes. Your code might contain a combination of these causes.
* Too many conditionals
* Nested loops
* Nested includes
### Complex operations inside of loops
Doing complex operations inside of a loop has adverse effects on Liquid render time. In some cases, you can simplify template logic and restructure the code to significantly improve Liquid performance.
In the example below, an `assign` tag is nested in a `for` loop. The code loops through the products in the collection and creates a list of `products_by_price` with each iteration. The code is unnecessarily repetitive because the value of `products_by_price` does not change per product.
```liquid
{%- for product in collection.products -%}
{% assign products_by_price = collection.products | sort: "price" %}
// some liquid code
{%- endfor -%}
```
You can simplify the code to only generate `products_by_price` once, as in the example below. In this example, the sorting of prices happens only once and can still be accessed within the loop when needed.
```liquid
{% assign products_by_price = collection.products | sort: "price" %}
{%- for product in collection.products -%}
// some liquid code
{%- endfor -%}
```
### Non-visual sections
These sections could be for things like scripts, SEO, analytics, and more. Evaluate whether these sections are necessary or refactor them so they become more efficient.
## Troubleshooting
### Can I profile any Shopify store I want?
No, you can only profile a store in the following cases:
* The store is linked to your [Shopify ID](https://help.shopify.com/manual/your-account/logging-in/sso-migration-guide).
* You have a collaborator account for the store.
* The store is not a development store.
To run the Shopify Theme Inspector on a store, you need to have the **Themes** [staff permission](https://help.shopify.com/manual/your-account/staff-accounts/staff-roles/permissions/permissions-descriptions#online-store-permissions) or a [collaborator account](https://help.shopify.com/manual/your-account/staff-accounts/security/collaborator-accounts) with the same permission. To verify that you have this permission, make sure that you can view the [Themes page](https://admin.shopify.com/themes) in the store's admin.
### I can't see the Shopify tab in Chrome DevTools
The **Shopify** tab only appears when you are viewing a Shopify store.
### This page cannot be profiled
You might see a **This page cannot be profiled** error in the following cases:
* Your account doesn't have access to the store that you're trying to profile.
* You're trying to profile a checkout page, which isn't supported by this extension.
* There was an unhandled error in the request, such as a timeout or a lost connection.