---
title: Debugging Your Storefront Application | Shopware Community Hub
description: Learn how to debug your Storefront application in Shopware.
canonical_url: 'https://hub.shopware.com/learn/unit/frontend-debugging'
---
# Debugging Your Storefront Application
- Find values in the Storefront.
- Know what tools to use for debugging.
# Debugging Your Storefront Application
We already covered a few debugging techniques in the [Shopware Backend Development Essentials](/learn/unit/debug-your-code-within-shopware) as well as in some of the learning units before. However, gathering information in a dedicated learning unit is always a good idea.
Most of the mentioned tools are available in the development environment. Make sure to set the `APP_ENV` variable to `dev` in your `.env` file.
```shell
APP_ENV=dev
```
## Twig
### The `dump` Function
The `dump` function is a powerful tool to inspect your Twig templates. You can use it to see which variables are available in your template.
```twig
{{ dump() }}
```
The `dump` function will output **all variables** in the current template.
You can also dump a **specific variable** by passing it as an argument.
```twig
{{ dump(product) }}
```
Keep in mind that the `dump` function is only available in the development environment, it is a debugging tool. It should only be used in development, not in production.
### Frosh Development Helper
The [Frosh Development Helper](https://github.com/FriendsOfShopware/FroshDevelopmentHelper) is a Shopware plugin that provides a lot of useful tools for developers.
**Some features are:**
- Show Twig Includes / Blocks in Template as HTML Comment
- Disables Twig Cache
- Twig Variables in Twig Tab
## Symfony Profiler
The [Symfony Profiler](https://symfony.com/doc/current/profiler.html) comes with many neat features and overviews.
For storefront development, you can use the Symfony Profiler to see which twig templates are loaded or what translations are available.
## SCSS
### Hot Module Replacement
Finding the right value in SCSS can be a bit tricky because everything is compiled into one file. This is where the watcher comes in handy. You can use the watcher to see the compiled CSS and find the right value.
```shell
bin/watch-storefront.sh
```
Check out our [Hot Module Replacement (HMR) guide](https://developer.shopware.com/docs/resources/tooling/cli/using-watchers.html) to learn more about the watcher.
### Browser DevTools
Browser DevTools is a powerful tool to inspect your frontend. You can see the DOM, the styles, and the JavaScript of your application.
## JavaScript
### Browser DevTools
Browser DevTools is also a powerful tool to inspect your JavaScript. You can see the console output, the network requests, and the JavaScript of your application.
Not so long ago the JavaScript was one big file, but now it is split into multiple files. This makes it easier to debug your JavaScript code.
## Other Tools
### Meteor Shopware 6 Toolkit
The [Meteor Shopware 6 Toolkit](https://chromewebstore.google.com/detail/meteor-shopware-6-toolkit/onmklnedjfgeaigmkjkldlgpeonpjpnc?pli=1) is a Chrome extension that helps you jump to the right place in the Shopware 6 administration when being on a product detail page or category page.
Helpful when debugging or developing new features.
## Summary
In this learning unit, you learned how to:
- Use the **`dump`** function in Twig to inspect available variables.
- Speed up template debugging with the **Frosh Development Helper** plugin.
- Use the **Symfony Profiler** to inspect Twig templates, translations, and requests.
- Inspect JavaScript behavior, network requests, and console output with the **Browser DevTools**.
- Debug and inspect compiled SCSS using the **Hot Module Replacement** watcher.
- Use additional tools like the **Meteor Shopware 6 Toolkit** for faster navigation in the Shopware Admin.
With these debugging tools and techniques, you have a solid arsenal to quickly analyze, debug, and fix issues in your frontend application workflow.