Tracy kiterjesztések létrehozása

A Tracy egy nagyszerű eszköz az alkalmazás hibakereséséhez. Néha azonban több információra van szükséged, mint amennyit a Tracy nyújt. Megtanulhatsz a következőket:

  • Saját Tracy Bar panelek létrehozása
  • Saját Bluescreen-bővítmények létrehozása

A Tracy számára hasznos bővítményeket találhat a Componette oldalon.

Tracy bárbővítmények

Egy új kiterjesztés létrehozása a Tracy Bar számára egyszerű. Meg kell valósítania a Tracy\IBarPanel interfészt a getTab() és a getPanel() metódusokkal. A metódusoknak vissza kell adniuk egy fül (kis címke a Tracy Baron) és egy panel (a fülre kattintás után megjelenő felugró ablak) HTML-kódját. Ha a getPanel() nem ad vissza semmit, akkor csak a fül jelenik meg. Ha a getTab() nem ad vissza semmit, akkor semmi sem jelenik meg, és a getPanel() nem hívódik meg.

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

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

Regisztráció

A regisztráció a Tracy\Bar::addPanel() címen történik:

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

vagy egyszerűen regisztrálhatja a panelt az alkalmazás konfigurációjában:

tracy:
	bar:
		- ExamplePanel

HTML kód

Valahogy így kell kinéznie:

<span title="Explaining tooltip">
	<svg>...</svg>
	<span class="tracy-label">Title</span>
</span>

A képnek SVG formátumúnak kell lennie. Ha nincs szükséged tooltipre, akkor hagyhatod a <span> ki.

Panel HTML kód

Valahogy így kell kinéznie:

<h1>Title</h1>

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

A címnek vagy ugyanannak kell lennie, mint a lapon, vagy további információkat kell tartalmaznia.

Egy kiterjesztés többször is regisztrálható, ezért ajánlott nem használni a id attribútumot a stílus kialakításához. Használhat osztályokat, lehetőleg a tracy-addons-<class-name>[-<optional>] formátumban. CSS létrehozásakor jobb a #tracy-debug .class, mert az ilyen szabály magasabb prioritású, mint a reset.

Alapértelmezett stílusok

A panelben az elemek <a>, <table>, <pre>, <code> elemek alapértelmezett stílusokkal rendelkeznek. Más elemek elrejtésére vagy megjelenítésére szolgáló link létrehozásához kapcsolja össze őket a href és a id attribútumokkal és a tracy-toggle osztállyal.

<a href="#tracy-addons-className-{$counter}" class="tracy-toggle">Detail</a>

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

Ha az alapértelmezett állapot az összecsukott, akkor mindkét elemhez adjuk hozzá a tracy-collapsed osztályt.

Használjon statikus számlálót, hogy megakadályozza a duplikált azonosítókat egy oldalon.

Bluescreen kiterjesztések

Hozzáadhat saját kivételes vizualizációkat vagy paneleket, amelyek megjelennek a bluescreen-en.

A bővítmény így készül:

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

A függvényt kétszer hívjuk meg, először magát a kivételt adjuk át a $e paraméterben, majd a visszaküldött panelt az oldal elején megjelenítjük. Ha semmi sem érkezik vissza, a panel nem kerül renderelésre. Ezután a null paraméterrel hívjuk meg, és a visszaadott panel a callstack alatt kerül renderelésre. Ha a függvény a tömbben a 'bottom' => true címet adja vissza, a panel a legalsó részen kerül megjelenítésre.