Tracy kiterjesztések készítése
******************************

<div class=perex>

A Tracy kiváló eszközt biztosít az alkalmazás debuggolásához. Néha azonban szeretne néhány további információt is kéznél tartani. Megmutatjuk, hogyan írhat saját kiterjesztést a Tracy Barhoz, hogy a fejlesztés még kellemesebb legyen.

- Saját panel létrehozása a Tracy Barhoz
- Saját kiterjesztés létrehozása a Bluescreenhez

</div>

.[tip]
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é.

```php
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:

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

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

```neon
tracy:
	bar:
		- ExamplePanel
```


A fül HTML kódja
----------------

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

```latte
<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:

```latte
<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:

```latte
<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:
```php
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.