Creazione di estensioni per Tracy

Il repository delle estensioni Tracy già pronte si trova su Componette.

Estensioni per la Tracy Bar

Creare una nuova estensione per la Tracy Bar non è complicato. Si crea un oggetto che implementa l'interfaccia Tracy\IBarPanel, che ha due metodi getTab() e getPanel(). I metodi devono restituire il codice HTML della scheda (una piccola etichetta visualizzata direttamente sulla Bar) e del pannello. Se getPanel() non restituisce nulla, viene visualizzata solo l'etichetta stessa. Se getTab() non restituisce nulla, non viene visualizzato nulla e getPanel() non viene più chiamato.

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

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

Registrazione

La registrazione viene effettuata tramite Tracy\Bar::addPanel():

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

Oppure puoi registrare il pannello direttamente nella configurazione dell'applicazione:

tracy:
	bar:
		- ExamplePanel

Codice HTML della scheda

Dovrebbe assomigliare approssimativamente a questo:

<span title="Etichetta esplicativa">
	<svg>...</svg>
	<span class="tracy-label">Titolo</span>
</span>

L'immagine dovrebbe essere in formato SVG. Se l'etichetta esplicativa non è necessaria, <span> può essere omesso.

Codice HTML del pannello

Dovrebbe assomigliare approssimativamente a questo:

<h1>Titolo</h1>

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

Il titolo dovrebbe essere lo stesso del titolo della scheda, oppure può contenere informazioni aggiuntive.

È necessario tenere conto del fatto che un'estensione può essere registrata più volte, ad esempio con impostazioni diverse, quindi per lo stile non è possibile utilizzare ID CSS, ma solo classi, nella forma tracy-addons-<NomeClasse>[-<opzionale>]. Quindi scrivi la classe nel div insieme alla classe tracy-inner. Quando si scrive CSS, è utile scrivere #tracy-debug .classe, perché la regola avrà quindi una priorità maggiore rispetto al reset.

Stili predefiniti

Nel pannello, <a>, <table>, <pre>, <code> sono pre-stilizzati. Se vuoi creare un link che nasconde e mostra un altro elemento, collegali con gli attributi href e id e la classe tracy-toggle:

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

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

Se lo stato predefinito deve essere compresso, aggiungi la classe tracy-collapsed a entrambi gli elementi.

Utilizza un contatore statico per evitare la creazione di ID duplicati sulla stessa pagina.

Estensioni per il Bluescreen

In questo modo è possibile aggiungere visualizzazioni personalizzate delle eccezioni o pannelli che verranno visualizzati sul bluescreen.

L'estensione viene creata con questo comando:

Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // eccezione catturata
	return [
		'tab' => '...Etichetta...',
		'panel' => '...Codice HTML del pannello...',
	];
});

La funzione viene chiamata due volte, prima viene passata l'eccezione stessa nel parametro $e e il pannello restituito viene renderizzato all'inizio della pagina. Se non restituisce nulla, il pannello non viene renderizzato. Successivamente viene chiamata con il parametro null e il pannello restituito viene renderizzato sotto il callstack. Se la funzione restituisce la chiave 'bottom' => true nell'array, il pannello viene renderizzato in fondo.