Debugger extensions

Debugger Bar extensions

Creating new extension for Debugger Bar is simple. You need to implement Tracy\IBarPanel interface with methods getTab() and getPanel(). The methods must return HTML code of a tab (small label on Debugger Bar) and a panel (pop-up displayed after clicking on the tab). If getPanel() returns nothing, only tab will be displayed. If getTab() returns nothing, nothing is displayed and getPanel() will not be called.

class ExamplePanel extends Nette\Object implements Tracy\IBarPanel
{
    public function getTab()
    {
        return ...;
    }

    public function getPanel()
    {
        return ...;
    }
}

Registration

Registration is done by calling Tracy\Bar::addPanel():

Tracy\Debugger::getBar()->addPanel(new ExamplePanel);

or you can simply register your panel in application configuration:

nette:
    debugger:
        bar:
            - ExamplePanel

Tab HTML code

Should look something like this:

<span title="Explaining tooltip">
<img src="data:image/png;base64,<encoded thumbnail image>" />
Title
</span>

For encoding images you can use Nette\Templating\DefaultHelpers::dataStream(). If you don't need tooltip, you can leave <span> out.

Panel HTML code

Should look something like this:

<h1>Title</h1>

<div class="nette-inner">
    ... content ...
</div>

Title should either be the same as in tab or contain additional information.

One extension can be registered multiple times, so it's recommended not to use id attribute for styling. You can use classes, preferably in nette-addons-<class-name>[-<optional>] format. When creating CSS, it's better to use #nette-debug .class, because such rule has higher priority than reset.

Default styles

In the panel, elements <a>, <table>, <pre>, <code> have default styles. You can also use .nette-hidden and .nette-collapsed for hidden elements. For creating a link for hiding or displaying other element, connect them with rel and id attributes.

<a href='#' rel='#nette-addons-className-{$counter}'>Details&nbsp;&#x25ba;</a>

<div id="nette-addons-className-{$counter}">...</div>

Use static counter to prevent duplicate IDs on one page.

Bluescreen extensions

You can add your own exception visualizations (a substitution for implementing IDebugPanel) or panels, which will appear on the (red) bluescreen.

Extension is made like this:

Tracy\Debugger::getBlueScreen()->addPanel(function($e) { // catched exception
    return array(
        'tab' => '...Title...',
        'panel' => '...content...',
    );
});

If the anonymous function returns nothing, panel won't be displayed. The function is called twice. First time with the catched exception in parameter $e and the panel is rendered on the top of the bluescreen. Second time with NULL given in $e and the panel is rendered in the bottom. You can force rendering in the bottom by returning 'bottom' => true in the array. Fuction won't be rendered the first two times and will be called for the third time with NULL parameter.