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()
:
Debugger::getBar()->addPanel(new ExamplePanel);
Nebo můžete panel registrovat přímo v konfiguraci aplikace:
nette:
debugger:
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="nette-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
nette-addons-<NazevTridy>[-<volitelné>]
. Třídu pak zapište do divu společně s třídou
nette-inner
. Při zápisu CSS je užitečné psát #nette-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řídy: .nette-hidden
a .nette-collapsed
pro
skryté prvky. Pokud chcete vytvořit odkaz, který skrývá a zobrazuje jiný prvek, propojte je atributy rel
a
id
:
<a href='#' rel='#nette-addons-NazevTridy-{$counter}'>Detaily ►</a>
<div id="nette-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:
Debugger::getBlueScreen()->addPanel(function($e) { // zachycená výjimka
return array(
'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.