Documentation Index
Fetch the complete documentation index at: https://mintlify.com/nowo-tech/TwigInspectorBundle/llms.txt
Use this file to discover all available pages before exploring further.
Quick overview
The</> icon in the Symfony Web Profiler toolbar is your entry point to the inspector:
- Green icon — Overlay is on: moving the mouse over the page highlights elements and shows a popup with template names.
- Yellow icon — Overlay is off: the inspector is still enabled (cookie is set), but the overlay is hidden. Click the icon again to make it green.
Step-by-step
Enable the inspector
- In the Web Profiler toolbar at the bottom of the page, click the
</>icon. - In the dropdown, check “Enable”.
- The page reloads automatically — the inspector cookie is now set.
Show the overlay
After reload, the
</> icon will be yellow (overlay off) or green (overlay on).Click the icon until it turns green. The overlay is now active.Hover to see templates
Move the mouse over the page content (not the toolbar).For each element rendered by Twig you will see:
- A blue semi-transparent highlight over the element.
- A popup showing the template name(s), e.g.
demo/_header.html.twig,base.html.twig.
Click to open in your IDE
Click the highlighted element or the popup.
- Single template — the browser opens the IDE link and your editor jumps to the file.
- Multiple templates (e.g. nested blocks) — a small picker appears. Click the template you want.
IDE integration requires
framework.ide to be configured. See IDE integration.Hide the overlay
Click the
</> icon again. It turns yellow and the overlay disappears.The inspector is still enabled — click the icon again (green) to bring the overlay back without reloading.Keyboard shortcuts
| Shortcut | Action |
|---|---|
Ctrl+Shift+T | Toggle the inspector on/off (same as the Enable checkbox; reloads the page) |
Ctrl+Shift+R | Rescan the DOM — useful after AJAX updates or dynamic content changes |
Esc | Close the overlay picker or reset the overlay |
Filter
The Filter field in the dropdown limits which blocks are highlighted:- Empty — All blocks are shown (default).
- One term — Only blocks whose template name or path contains that text (case-insensitive), e.g.
headerortemplates/demo. - Several terms — Separate with commas for OR logic, e.g.
header, footer, instructions.
Web Profiler full panel
Click “View full panel →” in the dropdown (or open the Twig Inspector section in the Symfony Profiler) to access the full panel. It has five tabs:| Tab | Contents |
|---|---|
| Templates | Template render times (if the Twig profiler is enabled) and a list of all templates used in the request with a Renders count. |
| Blocks | All Twig blocks and their templates, with Renders count. |
| Controllers | All controllers invoked in the request — Main (handles the page) and Fragment controllers from {{ render(controller(...)) }}. Each row shows Role and Renders. |
| Tips & tools | Overlay usage guide and Twig performance tips. |
| Configuration example | Copy-paste config snippets for quick setup. |
Controller HTML comments
When the inspector is enabled, the HTML source includes machine-readable controller comments:- One comment is injected immediately after
<body>to identify the main controller. - Start and end comments wrap each fragment controller’s output, identifying which controller rendered which section.