Tvorba rozšíření pro Tracy

Tracy poskytuje skvělý nástroj pro ladění vaší aplikace. Občas byste ale po ruce měli rádi i některé další informace. Ukážeme si, jak napsat vlastní rozšíření pro Tracy Bar, aby byl vývoj ještě příjemnější.

  • Vytvoření vlastního panelu pro Tracy Bar
  • Vytvoření vlastního rozšíření pro Bluescreen

Repozitář hotových rozšíření pro Tracy najdete na Componette.

Rozšíření pro Tracy Bar

Vytvořit nové rozšíření pro Tracy Bar není nic složitého. Vytvoříte objekt implementující rozhraní Tracy\IBarPanel, které má dvě metody getTab() a getPanel(). Metody musí vrátit HTML kód tabu (malý popisek zobrazený přímo na Baru) a panelu. Pokud getPanel() nic nevrátí, zobrazí se jen samotný popisek. Pokud getTab() nic nevrátí, nezobrazí se vůbec nic a ani getPanel() se už nevolá.

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

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

Registrace

Registrace se provádí pomocí Tracy\Debugger::getBar()->addPanel():

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

Nebo můžete panel registrovat přímo v konfiguraci aplikace:

tracy:
	bar:
		- ExamplePanel

HTML kód tabu

Měl by vypadat přibližně takto:

<span title="Vysvětlující popisek">
	<svg>...</svg>
	<span class="tracy-label">Titulek</span>
</span>

Obrázek by měl být ve formátu SVG. Pokud není vysvětlující popisek potřeba, lze <span> vynechat.

HTML kód panelu

Měl by vypadat přibližně takto:

<h1>Titulek</h1>

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

Titulek by měl být buď stejný, jako titulek tabu, nebo může obsahovat údaje navíc.

Je třeba počítat s tím, že jedno rozšíření se může zaregistrovat i vícekrát, kupříkladu s jiným nastavením, takže pro stylování nelze používat CSS id, ale jen class, a to ve tvaru tracy-addons-<NazevTridy>[-<volitelné>]. Třídu pak zapište do divu společně s třídou tracy-inner. Při zápisu CSS je užitečné psát #tracy-debug .trida, protože pravidlo pak má vyšší prioritu než reset.

Výchozí styly

V panelu jsou předstylované <a>, <table>, <pre>, <code>. Pokud chcete vytvořit odkaz, který skrývá a zobrazuje jiný prvek, propojte je atributy href a id a třídou tracy-toggle:

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

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

Pokud má být výchozí stav sbalený, doplňte oběma elementům třídu tracy-collapsed.

Counter použijte statický, aby se nevytvářely duplicitní ID na jedné stránce.

Vlastní assety

Pokud váš panel potřebuje vlastní styl nebo skript, můžete nechat Tracy načíst další soubory společně s jejími vlastními assety:

Tracy\Debugger::$customCssFiles[] = __DIR__ . '/panel.css';
Tracy\Debugger::$customJsFiles[] = __DIR__ . '/panel.js';

Podpora AI agentů

Když prohlížeč ovládá AI agent, Tracy pošle markdown shrnutí Tracy Baru do JS konzole. Vlastní panely mohou nabídnout svůj markdown přidáním metody getAgentInfo(): ?string do třídy implementující IBarPanel:

class DatabasePanel implements Tracy\IBarPanel
{
	public function getTab(): string { /* ... */ }
	public function getPanel(): string { /* ... */ }

	public function getAgentInfo(): ?string
	{
		return "## Database\n\n- Dotazy: {$this->count}\n- Celkový čas: {$this->time} ms\n";
	}
}

Vrácený markdown se zařadí do markdown shrnutí baru. Pokud metoda chybí nebo vrátí null, panel se ve shrnutí vynechá.

Více v integraci Tracy s AI agenty.

Rozšíření pro Bluescreen

Tímto způsobem lze přidávat vlastní vizualizace výjimek nebo panely, které se zobrazí na bluescreen.

Rozšíření se vytvoří tímto příkazem:

Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // zachycená výjimka
	return [
		'tab' => '...Popiska...',
		'panel' => '...HTML kod panelu...',
	];
});

Funkce je volána dvakrát, nejprve je v parametru $e předána samotná výjimka a vrácený panel se vykreslí na začátku stránky. Pokud nic nevrátí, panel se nevykreslí. Poté je volána s parametrem null a vrácený panel se vykreslí pod callstackem. Pokud funkce vrací v poli klíč 'bottom' => true, panel se vykreslí úplně dole.

Kromě panelů lze pomocí addAction() přidávat i akce – klikací odkazy nebo tlačítka, která se objeví v hlavičce chybové stránky vedle vestavěných (jako je search):

Tracy\Debugger::getBlueScreen()->addAction(function (Throwable $e): ?array {
	if ($e instanceof MyException) {
		return [
			'link' => 'https://example.com/help?code=' . $e->getCode(),
			'label' => 'view help',
		];
	}
	return null;
});

Callback dostane zachycenou výjimku a vrátí pole s klíči link a label, nebo null, pokud pro danou výjimku akci přidávat nechce.

Akce vytvoření souboru

Když na chybové stránce kliknete na soubor, který ještě neexistuje, Tracy nabídne jeho vytvoření (akce create file). Výchozí obsah takového souboru můžete ovlivnit zaregistrováním generátoru:

Tracy\Debugger::getBlueScreen()->addFileGenerator(function (string $file, ?string $class): ?string {
	if (str_ends_with($file, 'Test.php')) {
		return "<?php\n\nclass $class extends Tester\\TestCase\n{\n\t\$END\$\n}\n";
	}
	return null;
});

Callback dostane cestu k cílovému souboru a, pokud je známý, název třídy, která v něm má být definována. Vrátí výchozí obsah (značka $END$ označuje, kam se umístí kurzor, a z výstupu se odstraní), nebo null, aby rozhodnutí přenechal jinému generátoru. Generátory se zkoušejí od naposledy zaregistrovaného; vestavěný generátor vytvoří prostou PHP kostru.

Fibery a generátory

Pokud je výjimka vyhozena v okamžiku, kdy je fiber nebo generátor pozastavený, jeho zásobník není součástí běžného callstacku. Tracy automaticky zobrazí zásobník fiberů a generátorů dosažitelných z výjimky, ale ten běžící samostatně by chyběl. Na BlueScreen jej můžete přidat ručně:

Tracy\Debugger::getBlueScreen()->addFiber($fiber);