Criação de extensões para o Tracy

Você pode encontrar um repositório de extensões prontas para o Tracy em tracy.

Extensões para a Tracy Bar

Criar uma nova extensão para a Tracy Bar não é complicado. Você cria um objeto que implementa a interface Tracy\IBarPanel, que possui dois métodos: getTab() e getPanel(). Os métodos devem retornar o código HTML da aba (uma pequena descrição exibida diretamente na Bar) e do painel. Se getPanel() não retornar nada, apenas a descrição será exibida. Se getTab() não retornar nada, nada será exibido e getPanel() não será chamado.

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

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

Registro

O registro é feito usando Tracy\Bar::addPanel():

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

Ou você pode registrar o painel diretamente na configuração da aplicação:

tracy:
	bar:
		- ExamplePanel

Código HTML da aba

Deve se parecer aproximadamente com isto:

<span title="Descrição explicativa">
	<svg>...</svg>
	<span class="tracy-label">Título</span>
</span>

A imagem deve estar no formato SVG. Se a descrição explicativa não for necessária, o <span> pode ser omitido.

Código HTML do painel

Deve se parecer aproximadamente com isto:

<h1>Título</h1>

<div class="tracy-inner">
<div class="tracy-inner-container">
	... conteúdo ...
</div>
</div>

O título deve ser o mesmo que o título da aba ou pode conter informações adicionais.

É necessário considerar que uma extensão pode ser registrada várias vezes, por exemplo, com configurações diferentes, portanto, não se pode usar IDs CSS para estilização, mas apenas classes, no formato tracy-addons-<NomeDaClasse>[-<opcional>]. Em seguida, escreva a classe na div junto com a classe tracy-inner. Ao escrever CSS, é útil escrever #tracy-debug .classe, pois a regra terá uma prioridade maior que o reset.

Estilos padrão

No painel, <a>, <table>, <pre>, <code> são pré-estilizados. Se você quiser criar um link que oculta e exibe outro elemento, conecte-os com os atributos href e id e a classe tracy-toggle:

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

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

Se o estado padrão deve ser recolhido, adicione a classe tracy-collapsed a ambos os elementos.

Use um contador estático para evitar a criação de IDs duplicados na mesma página.

Extensões para o Bluescreen

Desta forma, é possível adicionar visualizações personalizadas de exceções ou painéis que serão exibidos no bluescreen.

A extensão é criada com este comando:

Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // exceção capturada
	return [
		'tab' => '...Descrição...',
		'panel' => '...Código HTML do painel...',
	];
});

A função é chamada duas vezes. Primeiro, a própria exceção é passada no parâmetro $e, e o painel retornado é renderizado no início da página. Se nada for retornado, o painel não será renderizado. Depois, é chamada com o parâmetro null, e o painel retornado é renderizado abaixo do callstack. Se a função retornar a chave 'bottom' => true no array, o painel será renderizado completamente na parte inferior.