Tracy kiterjesztések készítése

A kész Tracy kiterjesztések repositoryját a “Componette”-en találja:https://componette.org/search/tracy.

Kiterjesztések a Tracy Barhoz

Új kiterjesztés létrehozása a Tracy Barhoz nem bonyolult. Létrehoz egy objektumot, amely implementálja a Tracy\IBarPanel interfészt, amelynek két metódusa van: getTab() és getPanel(). A metódusoknak vissza kell adniuk a fül (a Bar-on közvetlenül megjelenő kis címke) és a panel HTML kódját. Ha a getPanel() semmit sem ad vissza, csak maga a címke jelenik meg. Ha a getTab() semmit sem ad vissza, egyáltalán semmi sem jelenik meg, és a getPanel() sem hívódik meg többé.

class ExamplePanel implements Tracy\IBarPanel
{
	public function getTab()
	{
		return /* ... */;
	}

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

Regisztráció

A regisztráció a Tracy\Bar::addPanel() segítségével történik:

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

Vagy regisztrálhatja a panelt közvetlenül az alkalmazás konfigurációjában:

tracy:
	bar:
		- ExamplePanel

A fül HTML kódja

Körülbelül így kell kinéznie:

<span title="Magyarázó címke">
	<svg>...</svg>
	<span class="tracy-label">Cím</span>
</span>

A képnek SVG formátumúnak kell lennie. Ha nincs szükség magyarázó címkére, a <span> elhagyható.

A panel HTML kódja

Körülbelül így kell kinéznie:

<h1>Cím</h1>

<div class="tracy-inner">
<div class="tracy-inner-container">
	... tartalom ...
</div>
</div>

A címnek vagy meg kell egyeznie a fül címével, vagy tartalmazhat további adatokat.

Számolni kell azzal, hogy egy kiterjesztés többször is regisztrálható, például eltérő beállításokkal, így a stílusozáshoz nem használhatók CSS id-k, csak class-ok, mégpedig tracy-addons-<OsztályNév>[-<opcionális>] formában. Az osztályt ezután írja be a div-be a tracy-inner osztállyal együtt. CSS írásakor hasznos a #tracy-debug .osztály írásmód, mert a szabálynak így magasabb prioritása lesz, mint a resetnek.

Alapértelmezett stílusok

A panelben előre stílusozottak az <a>, <table>, <pre>, <code> elemek. Ha olyan linket szeretne létrehozni, amely elrejt és megjelenít egy másik elemet, kösse össze őket a href és id attribútumokkal és a tracy-toggle osztállyal:

<a href="#tracy-addons-OsztályNév-{$counter}" class="tracy-toggle">Részletek</a>

<div id="tracy-addons-OsztályNév-{$counter}">...</div>

Ha az alapértelmezett állapotnak összecsukottnak kell lennie, adjon hozzá mindkét elemhez a tracy-collapsed osztályt.

A számlálót használja statikusként, hogy ne jöjjenek létre duplikált ID-k egy oldalon.

Kiterjesztések a Bluescreenhez

Ezzel a módszerrel hozzáadhat saját kivétel-vizualizációkat vagy paneleket, amelyek a bluescreenen jelennek meg.

A kiterjesztés ezzel a paranccsal hozható létre:

Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // elkapott kivétel
	return [
		'tab' => '...Címke...',
		'panel' => '...Panel HTML kódja...',
	];
});

A függvény kétszer hívódik meg, először a $e paraméterben maga a kivétel kerül átadásra, és a visszaadott panel az oldal elején rajzolódik ki. Ha semmit sem ad vissza, a panel nem rajzolódik ki. Ezután null paraméterrel hívódik meg, és a visszaadott panel a callstack alatt rajzolódik ki. Ha a függvény a tömbben a 'bottom' => true kulcsot adja vissza, a panel teljesen alulra kerül.