Tracy-Erweiterungen erstellen

Nützliche Erweiterungen für Tracy finden Sie auf Componette.

Tracy Bar Erweiterungen

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.

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

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

Registrierung

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

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

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

tracy:
	bar:
		- ExamplePanel

Registerkarte HTML-Code

Sollte in etwa so aussehen:

<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

Sollte in etwa so aussehen:

<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

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.

<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

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

Die Erweiterung ist wie folgt aufgebaut:

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.