How to add PHP DebugBar to Twig layout?

Question

PHP DegugBar has an extension to display which Twig templates were rendered.

I found a demo here but if you look at how they do it, they actually render the layout in pure PHP which kind of defeats the point of Twig, which has its own layouting system.

The problem is a catch-22: I need to render the debugbar into a Twig variable so that I can put it in the Twig layout, but if I've already rendered the debugbar it won't be able to capture the fact that I'm rendering a Twig template!

So, I'm not sure how to do this. Any ideas?

score 0 · Answer 1 · answered Jan 23 '16 at 10:12

0

Create a custom Twig extension to render the code required to render the debug bar. This way, you can do {{ debug_bar() }} for instance to render the debug bar:

class DebugBarExtension extends \Twig_Extension
{
    public function getFunctions()
    {
        return [
            new \Twig_SimpleFunction('debug_bar', [$this, 'renderDebugBar']),
        ];
    }

    public function renderDebugBar()
    {
        // ... render and return the debug bar
    }
}

answered Jan 23 '16 at 10:12

Wouter J

41,455
15
107
112

I actually did try that but it doesn't work. The "Twig" panel appears but it never lists any rendered templates. – mpen Jan 23 '16 at 23:36

score 0 · Answer 2 · answered Feb 05 '16 at 22:35

0

\DebugBar\JavascriptRenderer::renderOnShutdownWithHead may be of use.

i.e. create a Twig function as @Wouter suggests but instead of rendering the debugbar immediately, register it to be rendered later, just before shutdown.

answered Feb 05 '16 at 22:35

mpen

272,448
266
850
1,236

score 0 · Answer 3 · answered Mar 13 '16 at 07:52

I am not sure why do you want to render the DebugBar using Twig, unless you are trying to measure the rendering performance or something like that (which not need for the DebugBar IMO because it should never reach production anyway).

In any case, you don't need a special plugin, artifact, class or code to display the DebugBar in your Twig rendered page. You can simply do the following:

1) Add the result of the DebugBar renders (Head and Body) in the Array you are using to send variables to Twig. Example:

$template_vars['debugbar_Head'] = $debugbarRenderer->renderHead();
$template_vars['debugbar_Body'] = $debugbarRenderer->render();

2) Add the variables in your template:

<head>
  -- other stuff ---
  {{ debugbar_Head | raw }}
</head>

<body>
  {{ debugbar_Body | raw }}
  -- other stuff ---
</body>

Important: make sure your "debugbar_Head" is at the END of the head tag and the "debugbar_Body" at the beginning of the body tag (for some reason it helps prevent rare rendering errors).

3) Render your template normally:

echo $view->render('your-template-path', $template_vars);

Enjoy a Twig rendered page with a fully functional DebugBar on the bottom.

Note: there are some stuff around the web promoting some "mix" of Twig and DebugBar. Please, before try them, check if they are not framework related.

"unless you are trying to measure the rendering performance or something" -- yes, that's **exactly** what I'm trying to do. — mpen, Mar 13 '16 at 19:17
Well, the only way I managed to do it efficiently was by adding PHP DebugBar in the project, then wrapping the "page render" in a function that calls an anonymous function to renders the page. It sounds complex, but you can try looking at https://github.com/maximebf/php-debugbar and download the DEV branch (which will have the demo folder). You can check the demos on /demo/, and study the code beginning from /demo/bridge/twig/, where you will find the functional Twig integration example. — Julio Marchi, Mar 15 '16 at 16:42

How to add PHP DebugBar to Twig layout?

3 Answers3