Creare le estensioni di Tracy

Potete trovare estensioni utili per Tracy su Componette.

Estensioni della barra Tracy

Creare una nuova estensione per Tracy Bar è semplice. È necessario implementare l'interfaccia Tracy\IBarPanel con i metodi getTab() e getPanel(). I metodi devono restituire il codice HTML di una scheda (piccola etichetta sulla barra Tracy) e di un pannello (pop-up visualizzato dopo aver fatto clic sulla scheda). Se getPanel() non restituisce nulla, verrà visualizzata solo la scheda. Se getTab() non restituisce nulla, non viene visualizzato nulla e getPanel() non verrà richiamato.

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

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

Registrazione

La registrazione si effettua chiamando Tracy\Bar::addPanel():

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

oppure si può semplicemente registrare il pannello nella configurazione dell'applicazione:

tracy:
	bar:
		- ExamplePanel

Codice HTML della scheda

Dovrebbe avere un aspetto simile a questo:

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

L'immagine deve essere in formato SVG. Se non si ha bisogno del tooltip, si può tralasciare <span> fuori.

Codice HTML del pannello

Dovrebbe avere un aspetto simile a questo:

<h1>Title</h1>

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

Il titolo deve essere lo stesso della scheda o contenere informazioni aggiuntive.

Un'estensione può essere registrata più volte, quindi si raccomanda di non usare l'attributo id per lo stile. Si possono usare le classi, preferibilmente nel formato tracy-addons-<class-name>[-<optional>] nel formato Quando si creano i CSS, è meglio usare #tracy-debug .class, perché tale regola ha una priorità maggiore rispetto a reset.

Stili predefiniti

Nel pannello, gli elementi <a>, <table>, <pre>, <code> hanno stili predefiniti. Per creare un collegamento per nascondere o visualizzare altri elementi, collegarli con gli attributi href e id e la classe tracy-toggle.

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

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

Se lo stato predefinito è collassato, aggiungere la classe tracy-collapsed a entrambi gli elementi.

Utilizzare un contatore statico per evitare la duplicazione degli ID in una pagina.

Estensioni Bluescreen

È possibile aggiungere visualizzazioni o pannelli di eccezioni personalizzati, che appariranno sul bluescreen.

L'estensione è fatta in questo modo:

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

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