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.