包简介

Debug Twig templates in the browser: visual overlay, click-to-open in IDE, Web Profiler. Symfony 6|7|8.

README 文档

README

⭐ Found this useful? Install from Packagist · Give it a star on GitHub so more developers can find it.

Twig Inspector Bundle — Debug Twig templates directly in the browser. See which template or block rendered each HTML element, click to open it in your IDE, and use it from the Symfony Web Profiler. For Symfony 6, 7 and 8 · PHP 8.1+.

Quick search terms

Looking for Twig debug, Twig inspector, Symfony template debug, template inspector, which template rendered this, Twig block finder, Web Profiler Twig, IDE open template, Twig development tool? You're in the right place.

Features

✅ Inspect Twig templates directly in the browser
✅ Visual overlay showing which templates render which HTML elements
✅ Click to open templates in your IDE
✅ Works with Symfony Web Profiler
✅ Cookie-based activation (no code changes needed)
✅ Supports nested blocks and templates
✅ Configurable template/block exclusion (with wildcard support)
✅ Template usage metrics in Web Profiler (templates, blocks, controllers)
✅ Controllers in Profiler: Main controller + fragments from render(controller(...)) with Main/Fragment badges and render counts
✅ Controller HTML comments in page source when inspector is on (main + fragment boundaries)
✅ Performance optimized (skips processing when disabled)
✅ Flexible configuration for different use cases

Installation

composer require nowo-tech/twig-inspector-bundle --dev

With Symfony Flex, the recipe registers the bundle and adds config/routes automatically. Without Flex, see docs/INSTALLATION.md for manual steps.

Manual registration in config/bundles.php:

<?php

return [
  // ...
  Nowo\TwigInspectorBundle\NowoTwigInspectorBundle::class => ['dev' => true, 'test' => true],
];

Usage

Enable the bundle (only in dev and test environments).
Open your app in the browser with the Symfony Web Profiler toolbar visible.
In the toolbar, find the </> icon (Twig Inspector) and open its dropdown.
Enable the inspector: check the "Enable" checkbox, then reload the page.
Turn on the overlay: click the </> icon so it turns green. Green = overlay on (hover shows highlight and popup). Yellow = overlay off.
Move the mouse over the page: each element gets a blue highlight and a popup with the template name(s).
Click an element to open that template in your IDE. Use the Filter field to limit by template name or path.

See docs/USAGE.md for the full step-by-step and overlay behavior.

Screenshots

Overlay tooltip (hover)	Toolbar dropdown

DevTools: HTML comments

How it works

The bundle injects HTML comments before and after every Twig block and template. When the inspector is enabled, a JavaScript overlay maps those comments to HTML elements and lets you open the template in your IDE. With the inspector on, it also injects controller comments in the HTML (main controller after <body>, and start/end comments around each fragment from render(controller(...))). The Web Profiler panel shows templates, blocks, and controllers (with Main/Fragment roles). See docs/USAGE.md for details.

Configuration

The bundle works with no configuration file; defaults are defined in Configuration.php. Create config/packages/nowo_twig_inspector.yaml only if you want to customize behavior (exclusions, cookie name, overlay theme, etc.).

Flex: config and routes are created automatically when installing from Packagist.
Manual / private bundle: run php bin/console nowo:twig-inspector:install to create the config file and update routes.

Full options and behavior: docs/CONFIGURATION.md.

IDE integration: set framework.ide in your config (e.g. phpstorm://open?file=%%f&line=%%l). Examples for PhpStorm, VS Code, Sublime, etc.: docs/INSTALLATION.md.

Documentation

Additional documentation

Security: The bundle validates template paths and restricts routes to dev/test. See docs/SECURITY.md.

Template usage metrics: When enable_metrics is true (default), the Web Profiler shows template/block usage. Details in docs/CONFIGURATION.md.

Requirements

PHP >= 8.1, < 8.6
Symfony >= 6.0 || >= 7.0 || >= 8.0
Symfony Web Profiler Bundle (for development)
Twig >= 3.8 || >= 4.0

See docs/INSTALLATION.md and docs/UPGRADING.md for compatibility notes.

Demo

Two demos (Symfony 7.0, 8.0) are in demo/symfony7, demo/symfony8. Each runs FrankenPHP (Caddy + PHP): the app listens on :80 inside the container, and docker-compose maps that to the host port PORT (defaults: 8002 for Symfony 7.0, 8003 for Symfony 8.0). Production-style configs use FrankenPHP worker mode; dev uses Caddyfile.dev without workers (see docs/DEMO-FRANKENPHP.md). Quick start: docs/DEMO.md.

Development

Run tests and QA with Docker: make up && make install && make test (or make test-coverage, make qa). Without Docker: composer install && composer test. Building assets: make assets (runs inside container) or pnpm install && pnpm run build. Full details: docs/DEVELOPMENT.md.

Tests and coverage

Tests: PHPUnit (PHP), Vitest (TS/JS)
PHP: 99,69%
TS/JS: 99,58%

License

The MIT License (MIT). Please see LICENSE for more information.

Author

Created by Héctor Franco Aceituno at Nowo.tech

Based on Oro Twig Inspector by Oro, Inc.

nowo-tech/twig-inspector-bundle 适用场景与选型建议

nowo-tech/twig-inspector-bundle 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 4.99k 次下载、GitHub Stars 达 1，最近一次更新时间为 2025 年 12 月 12 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「symfony」「debug」「twig」「template」「debugging」「bundle」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 nowo-tech/twig-inspector-bundle 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 nowo-tech/twig-inspector-bundle 我们能提供哪些服务？

定制开发 / 二次开发

基于 nowo-tech/twig-inspector-bundle 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 nowo-tech/twig-inspector-bundle 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

shoot/shoot 40

Shoot aims to make providing data to your templates more manageable

omouren/simplebus-debug-bundle 1

Debug your SimpleBus EventBus and CommandBus

ivoba/stop 10

nice output for debug functions for PHP 5.3

erelke/twig-spreadsheet-bundle 2

This Symfony bundle integrates PhpSpreadsheet into Symfony using Twig.

nerds-and-company/css-to-inline-styles-twig-extension 3

A Twig extension to insert css as inline styles with a tag

odan/twig-assets 22

Caching and compression for Twig assets (JavaScript and CSS).

nowo-tech/twig-inspector-bundle

包简介

关键字：