Edit
Lang

Rozšíření pro Debugger

Tracy poskytuje skvělý nástroj pro ladění vaší aplikace. Občas byste ale po ruce měli rádi i některé další informace. Ukážeme si, jak napsat vlastní rozšíření pro DebuggerBar, aby byl vývoj ještě příjemnější.

  • Vytvoření vlastního panelu pro Debugger bar
  • Vytvoření vlastního rozšíření pro Bluescreen

Vytvořit nové rozšíření pro Debugger Bar není nic složitého. Vytvoříte objekt implementující rozhraní Tracy\IBarPanel, které má dvě metody getTab() a getPanel(). Metody musí vrátit HTML kód tabu (malý popisek zobrazený přímo na Baru) a panelu. Pokud getPanel() nic nevrátí, zobrazí se jen samotný popisek. Pokud getTab() nic nevrátí, nezobrazí se vůbec nic a ani getPanel() se už nevolá.

class ExamplePanel extends Nette\Object implements Tracy\IBarPanel
{

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

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

}

Registrace

Registrace se provádí pomocí Tracy\Bar::addPanel():

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

Nebo můžete panel registrovat přímo v konfiguraci aplikace:

tracy:
    bar:
        - ExamplePanel

HTML kód tabu

Měl by vypadat přibližně takto:

<span title="Vysvětlující popisek">
<img src="data:image/png;base64,<zakodovany obrazek>" />
Titulek
</span>

Pro zakódování obrázků můžete použít funkci Nette\Templating\DefaultHelpers::dataStream(). Pokud není vysvětlující popisek potřeba, lze <span> vynechat.

HTML kód panelu

Měl by vypadat přibližně takto:

<h1>Titulek</h1>

<div class="tracy-inner">
    ... obsah ...
</div>

Titulek by měl být buď stejný, jako titulek tabu, nebo může obsahovat údaje navíc.

Je třeba počítat s tím, že jedno rozšíření se může zaregistrovat i vícekrát, kupříkladu s jiným nastavením, takže pro stylování nelze používat CSS id, ale jen class, a to ve tvaru tracy-addons-<NazevTridy>[-<volitelné>]. Třídu pak zapište do divu společně s třídou tracy-inner. Při zápisu CSS je užitečné psát #tracy-debug .trida, protože pravidlo pak má vyšší prioritu než reset.

Výchozí styly

V panelu jsou předstylované <a>, <table>, <pre>, <code> a dále můžete využít třídu .tracy-collapsed pro skryté prvky. Pokud chcete vytvořit odkaz, který skrývá a zobrazuje jiný prvek, propojte je atributy href a id:

<a href='#tracy-addons-NazevTridy-{$counter}'>Detaily&nbsp;&#x25ba;</a>

<div id="tracy-addons-NazevTridy-{$counter}">...</div>

Counter použijte statický, aby se nevytvářely duplicitní ID na jedné stránce.

Rozšíření pro Bluescreen

Tímto způsobem lze přidávat vlastní vizualizace výjimek (nahrazuje dědení od IDebugPanel) nebo panely, které se zobrazí na červené bluescreen.

Rozšíření se vytvoří tímto příkazem:

Tracy\Debugger::getBlueScreen()->addPanel(function($e) { // zachycená výjimka
    return [
        'tab' => '...Popiska...',
        'panel' => '...HTML kod panelu...',
    ];
});

Pokud funkce nic nevrátí, panel se nevykreslí. Funkce je volána dvakrát, nejprve je v parametru $e předána samotná výjimka a panel se vykreslí na začátku stránky, poté je předána hodnota NULL a panel se vykreslí na spodu. Vykreslování dole lze vynutit, pokud funkce vrací v poli také klíč 'bottom' => true. Funkce se poté nevykreslí při prvních dvou voláních, ale je volána potřetí s hodnotou NULL a vykreslena pouze úplně dole.