Tracy kiterjesztések létrehozása
********************************

<div class=perex>

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

</div>

.[tip]
A Tracy számára hasznos bővítményeket találhat a "Componette":https://componette.org/search/tracy oldalon.


Tracy bárbővítmények .[#toc-tracy-bar-extensions]
=================================================

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.

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

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


Regisztráció .[#toc-registration]
---------------------------------

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

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

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

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


HTML kód .[#toc-tab-html-code]
------------------------------

Valahogy így kell kinéznie:

```latte
<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 .[#toc-panel-html-code]
--------------------------------------

Valahogy így kell kinéznie:

```latte
<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 .[#toc-default-styles]
-----------------------------------------------

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.

```latte
<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 .[#toc-bluescreen-extensions]
=======================================================

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