Creación de extensiones de Tracy

Puedes encontrar extensiones útiles para Tracy en Componette.

Extensiones de la barra Tracy

Crear una nueva extensión para Tracy Bar es sencillo. Necesita implementar la interfaz Tracy\IBarPanel con los métodos getTab() y getPanel(). Los métodos deben devolver el código HTML de una pestaña (pequeña etiqueta en Tracy Bar) y un panel (ventana emergente que se muestra tras hacer clic en la pestaña). Si getPanel() no devuelve nada, sólo se mostrará la pestaña. Si getTab() no devuelve nada, no se mostrará nada y no se llamará a getPanel().

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

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

Registro

La inscripción se realiza llamando a Tracy\Bar::addPanel():

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

o simplemente puede registrar su panel en la configuración de la aplicación:

tracy:
	bar:
		- ExamplePanel

Pestaña Código HTML

Debería tener este aspecto:

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

La imagen debe estar en formato SVG. Si no necesitas tooltip, puedes dejar <span> .

Código HTML del panel

Debería tener este aspecto:

<h1>Title</h1>

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

El título debe ser el mismo que en la pestaña o contener información adicional.

Una extensión puede registrarse varias veces, por lo que se recomienda no utilizar el atributo id para el estilo. Puede utilizar clases, preferiblemente en tracy-addons-<class-name>[-<optional>] formato. Al crear CSS, es mejor utilizar #tracy-debug .class, porque dicha regla tiene mayor prioridad que reset.

Estilos por defecto

En el panel, elementos <a>, <table>, <pre>, <code> tienen estilos predeterminados. Para crear un enlace para ocultar o mostrar otro elemento, conéctelos con los atributos href y id y la clase tracy-toggle.

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

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

Si el estado por defecto es colapsado, añada la clase tracy-collapsed a ambos elementos.

Utilice un contador estático para evitar la duplicación de ID en una página.

Extensiones Bluescreen

Puede añadir sus propias visualizaciones de excepciones o paneles, que aparecerán en el bluescreen.

La extensión se hace así:

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

La función se llama dos veces, primero se pasa la propia excepción en el parámetro $e y el panel devuelto se renderiza al principio de la página. Si no se devuelve nada, el panel no se renderiza. Luego se llama con el parámetro null y el panel devuelto se renderiza debajo de la pila de llamadas. Si la función devuelve 'bottom' => true en el array, el panel se renderiza en la parte inferior.