Skip to main content

​
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.
The blue semi-transparent highlight marks the HTML element under the cursor that was rendered by one or more Twig templates. The popup lists those template names. Click the element (or popup) to open the template directly in your IDE.

​
Step-by-step

1

Enable the inspector

  1. In the Web Profiler toolbar at the bottom of the page, click the </> icon.
  2. In the dropdown, check “Enable”.
  3. The page reloads automatically — the inspector cookie is now set.
2

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.
3

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.
Moving to another element updates both.
4

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.
Press Esc to close the picker or reset the overlay.
IDE integration requires framework.ide to be configured. See IDE integration.
5

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.
6

Disable the inspector

Open the dropdown and uncheck “Enable”.The page reloads, the cookie is cleared, and all instrumentation is removed.

​
Keyboard shortcuts

ShortcutAction
Ctrl+Shift+TToggle the inspector on/off (same as the Enable checkbox; reloads the page)
Ctrl+Shift+RRescan the DOM — useful after AJAX updates or dynamic content changes
EscClose the overlay picker or reset the overlay
The toggle shortcut is configurable via the keyboard_shortcut option. See Configuration.

​
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. header or templates/demo.
  • Several terms — Separate with commas for OR logic, e.g. header, footer, instructions.
When the filter is not empty, persistent colored frames (veils) are drawn around all matching blocks so you can see at a glance which parts of the page match your filter.

​
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:
TabContents
TemplatesTemplate render times (if the Twig profiler is enabled) and a list of all templates used in the request with a Renders count.
BlocksAll Twig blocks and their templates, with Renders count.
ControllersAll controllers invoked in the request — Main (handles the page) and Fragment controllers from {{ render(controller(...)) }}. Each row shows Role and Renders.
Tips & toolsOverlay usage guide and Twig performance tips.
Configuration exampleCopy-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.
This mirrors the template/block comment approach, letting you trace the full request lifecycle directly from browser DevTools.