Erstellung von Erweiterungen für Tracy

Ein Repository mit fertigen Erweiterungen für Tracy finden Sie auf “Componette”.

Erweiterungen für die Tracy Bar

Eine neue Erweiterung für die Tracy Bar zu erstellen ist nicht kompliziert. Sie erstellen ein Objekt, das das Interface Tracy\IBarPanel implementiert, welches zwei Methoden getTab() und getPanel() hat. Die Methoden müssen den HTML-Code des Tabs (eine kleine Beschriftung, die direkt auf der Bar angezeigt wird) und des Panels zurückgeben. Wenn getPanel() nichts zurückgibt, wird nur die Beschriftung selbst angezeigt. Wenn getTab() nichts zurückgibt, wird gar nichts angezeigt und getPanel() wird auch nicht mehr aufgerufen.

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

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

Registrierung

Die Registrierung erfolgt über Tracy\Bar::addPanel():

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

Oder Sie können das Panel direkt in der Anwendungskonfiguration registrieren:

tracy:
	bar:
		- ExamplePanel

HTML-Code des Tabs

Er sollte ungefähr so aussehen:

<span title="Erläuternde Beschriftung">
	<svg>...</svg>
	<span class="tracy-label">Titel</span>
</span>

Das Bild sollte im SVG-Format sein. Wenn keine erläuternde Beschriftung benötigt wird, kann <span> weggelassen werden.

HTML-Code des Panels

Er sollte ungefähr so aussehen:

<h1>Titel</h1>

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

Der Titel sollte entweder derselbe sein wie der Titel des Tabs oder er kann zusätzliche Daten enthalten.

Es muss berücksichtigt werden, dass eine Erweiterung auch mehrmals registriert werden kann, beispielsweise mit unterschiedlichen Einstellungen. Daher können für das Styling keine CSS-IDs verwendet werden, sondern nur Klassen, und zwar in der Form tracy-addons-<Klassenname>[-<optional>]. Die Klasse schreiben Sie dann zusammen mit der Klasse tracy-inner in das Div. Beim Schreiben von CSS ist es nützlich, #tracy-debug .klasse zu schreiben, da die Regel dann eine höhere Priorität als der Reset hat.

Standardstile

Im Panel sind <a>, <table>, <pre>, <code> vordefiniert. Wenn Sie einen Link erstellen möchten, der ein anderes Element verbirgt und anzeigt, verbinden Sie sie über die Attribute href und id sowie die Klasse tracy-toggle:

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

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

Wenn der Standardzustand eingeklappt sein soll, fügen Sie beiden Elementen die Klasse tracy-collapsed hinzu.

Verwenden Sie einen statischen Zähler, damit keine doppelten IDs auf derselben Seite erstellt werden.

Erweiterungen für den Bluescreen

Auf diese Weise können benutzerdefinierte Visualisierungen von Ausnahmen oder Panels hinzugefügt werden, die im Bluescreen angezeigt werden.

Die Erweiterung wird mit diesem Befehl erstellt:

Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // abgefangene Ausnahme
	return [
		'tab' => '...Beschriftung...',
		'panel' => '...HTML-Code des Panels...',
	];
});

Die Funktion wird zweimal aufgerufen. Zuerst wird im Parameter $e die Ausnahme selbst übergeben, und das zurückgegebene Panel wird am Anfang der Seite gerendert. Wenn nichts zurückgegeben wird, wird das Panel nicht gerendert. Danach wird sie mit dem Parameter null aufgerufen, und das zurückgegebene Panel wird unter dem Callstack gerendert. Wenn die Funktion im Array den Schlüssel 'bottom' => true zurückgibt, wird das Panel ganz unten gerendert.