Ustvarjanje razširitev za Tracy
Tracy ponuja odlično orodje za razhroščevanje vaše aplikacije. Včasih pa bi radi imeli pri roki tudi nekatere druge informacije. Pokazali bomo, kako napisati lastno razširitev za Tracy Bar, da bo razvoj še prijetnejši.
- Ustvarjanje lastnega panela za Tracy Bar
- Ustvarjanje lastne razširitve za Bluescreen
Repozitorij končnih razširitev za Tracy najdete na Componette.
Razširitve za Tracy Bar
Ustvariti novo razširitev za Tracy Bar ni nič zapletenega. Ustvarite objekt, ki implementira vmesnik
Tracy\IBarPanel
, ki ima dve metodi getTab()
in getPanel()
. Metodi morata vrniti kodo HTML
zavihka (majhen opis, prikazan neposredno na Baru) in panela. Če getPanel()
ne vrne ničesar, se prikaže samo
zavihek. Če getTab()
ne vrne ničesar, se ne prikaže nič in getPanel()
se sploh ne kliče.
class ExamplePanel implements Tracy\IBarPanel
{
public function getTab()
{
return /* ... */;
}
public function getPanel()
{
return /* ... */;
}
}
Registracija
Registracija se izvede s pomočjo Tracy\Bar::addPanel()
:
Tracy\Debugger::getBar()->addPanel(new ExamplePanel);
Ali pa lahko panel registrirate neposredno v konfiguraciji aplikacije:
tracy:
bar:
- ExamplePanel
Koda HTML zavihka
Izgledati mora približno takole:
<span title="Pojasnjevalni opis">
<svg>...</svg>
<span class="tracy-label">Naslov</span>
</span>
Slika mora biti v formatu SVG. Če pojasnjevalni opis ni potreben, lahko <span>
izpustite.
Koda HTML panela
Izgledati mora približno takole:
<h1>Naslov</h1>
<div class="tracy-inner">
<div class="tracy-inner-container">
... vsebina ...
</div>
</div>
Naslov mora biti bodisi enak naslovu zavihka ali pa lahko vsebuje dodatne podatke.
Upoštevati je treba, da se ena razširitev lahko registrira večkrat, na primer z drugačnimi nastavitvami, zato za
stiliziranje ni mogoče uporabljati ID-jev CSS, ampak samo class
, in sicer v obliki
tracy-addons-<ImeRazreda>[-<neobvezno>]
. Razred nato zapišite v div
skupaj z razredom
tracy-inner
. Pri pisanju CSS je koristno pisati #tracy-debug .razred
, ker ima pravilo potem višjo
prioriteto kot ponastavitev (reset).
Privzeti stili
V panelu so predhodno stilizirani <a>
, <table>
, <pre>
,
<code>
. Če želite ustvariti povezavo, ki skriva in prikazuje drug element, jih povežite z atributi
href
in id
ter razredom tracy-toggle
:
<a href="#tracy-addons-ImeRazreda-{$counter}" class="tracy-toggle">Podrobnosti</a>
<div id="tracy-addons-ImeRazreda-{$counter}">...</div>
Če mora biti privzeto stanje skrčeno, obema elementoma dodajte razred tracy-collapsed
.
Uporabite statični števec, da se na eni strani ne ustvarjajo podvojeni ID-ji.
Razširitve za Bluescreen
Na ta način lahko dodajate lastne vizualizacije izjem ali panele, ki se prikažejo na modrem zaslonu (Bluescreen).
Razširitev se ustvari s tem ukazom:
Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // ujeta izjema
return [
'tab' => '...Oznaka...',
'panel' => '...HTML koda panela...',
];
});
Funkcija se kliče dvakrat, najprej se v parametru $e
preda sama izjema in vrnjeni panel se izriše na začetku
strani. Če ne vrne ničesar, se panel ne izriše. Nato se kliče s parametrom null
in vrnjeni panel se izriše pod
skladom klicev (call stack). Če funkcija v polju vrne ključ 'bottom' => true
, se panel izriše čisto
na dnu.