Tracy-Erweiterungen erstellen
*****************************

<div class=perex>

Tracy ist ein hervorragendes Werkzeug zur Fehlersuche in Ihrer Anwendung. Manchmal benötigen Sie jedoch mehr Informationen als Tracy bietet. Sie werden mehr darüber erfahren:

- Deine eigenen Tracy Bar Panels zu erstellen
- Erstellen Ihrer eigenen Bluescreen-Erweiterungen

</div>

.[tip]
Nützliche Erweiterungen für Tracy finden Sie auf "Componette":https://componette.org/search/tracy.


Tracy Bar Erweiterungen .[#toc-tracy-bar-extensions]
====================================================

Das Erstellen einer neuen Erweiterung für Tracy Bar ist einfach. Sie müssen die Schnittstelle `Tracy\IBarPanel` mit den Methoden `getTab()` und `getPanel()` implementieren. Die Methoden müssen den HTML-Code eines Tabs (kleines Etikett auf der Tracy Bar) und eines Panels (Pop-up, das nach dem Anklicken des Tabs angezeigt wird) zurückgeben. Wenn `getPanel()` nichts zurückgibt, wird nur die Registerkarte angezeigt. Wenn `getTab()` nichts zurückgibt, wird nichts angezeigt und `getPanel()` wird nicht aufgerufen.

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

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


Registrierung .[#toc-registration]
----------------------------------

Die Anmeldung erfolgt unter `Tracy\Bar::addPanel()`:

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

oder Sie können Ihr Panel einfach in der Anwendungskonfiguration registrieren:

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


Registerkarte HTML-Code .[#toc-tab-html-code]
---------------------------------------------

Sollte in etwa so aussehen:

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

Das Bild sollte das Format SVG haben. Wenn Sie keinen Tooltip benötigen, können Sie `<span>` weglassen.


HTML-Code für das Panel .[#toc-panel-html-code]
-----------------------------------------------

Sollte in etwa so aussehen:

```latte
<h1>Title</h1>

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

Der Titel sollte entweder derselbe sein wie in der Registerkarte oder zusätzliche Informationen enthalten.

Eine Erweiterung kann mehrfach registriert werden, daher wird empfohlen, das Attribut `id` nicht für das Styling zu verwenden. Sie können Klassen verwenden, vorzugsweise im `tracy-addons-<class-name>[-<optional>]` Format. Bei der Erstellung von CSS ist es besser, `#tracy-debug .class` zu verwenden, da diese Regel eine höhere Priorität als Reset hat.


Standard-Stile .[#toc-default-styles]
-------------------------------------

Im Panel werden die Elemente `<a>`, `<table>`, `<pre>`, `<code>` über Standardstile. Um einen Link zum Ausblenden oder Anzeigen eines anderen Elements zu erstellen, verbinden Sie sie mit den Attributen `href` und `id` und der Klasse `tracy-toggle`.

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

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

Wenn der Standardzustand eingeklappt ist, fügen Sie die Klasse `tracy-collapsed` zu beiden Elementen hinzu.

Verwenden Sie einen statischen Zähler, um doppelte IDs auf einer Seite zu vermeiden.


Bluescreen-Erweiterungen .[#toc-bluescreen-extensions]
======================================================

Sie können Ihre eigenen Ausnahmevisualisierungen oder Panels hinzufügen, die auf dem Bluescreen erscheinen.

Die Erweiterung ist wie folgt aufgebaut:
```php
Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // catched exception
	return [
		'tab' => '...Title...',
		'panel' => '...content...',
	];
});
```

Die Funktion wird zweimal aufgerufen, zuerst wird die Ausnahme selbst im Parameter `$e` übergeben und das zurückgegebene Panel wird am Anfang der Seite gerendert. Wenn nichts zurückgegeben wird, wird das Panel nicht gerendert. Dann wird die Funktion mit dem Parameter `null` aufgerufen und das zurückgegebene Panel wird unterhalb des Aufrufstapels gerendert. Wenn die Funktion `'bottom' => true` im Array zurückgibt, wird das Panel ganz unten gerendert.