Tworzenie rozszerzenia Tracy

Tracy zapewnia doskonałe narzędzie do debugowania aplikacji. Czasem jednak chciałoby się mieć pod ręką jakieś dodatkowe informacje. Pokażemy Ci, jak napisać niestandardowe rozszerzenie dla Tracy Bar, aby rozwój był jeszcze przyjemniejszy.

  • Tworzenie niestandardowego paska dla Tracy Bar
  • Tworzenie własnego rozszerzenia dla Bluescreen

Repozytorium gotowych rozszerzeń dla Tracy można znaleźć pod adresem Componette.

Rozszerzenia dla Tracy Bar

Stworzenie nowego rozszerzenia dla Tracy Bar nie jest trudne. Tworzysz obiekt implementujący interfejs Tracy\IBarPanel, który ma dwie metody getTab() i getPanel(). Metody muszą zwracać kod HTML dla zakładki (małej etykiety wyświetlanej bezpośrednio na pasku) i paska. Jeśli getPanel() nic nie zwraca, wyświetlana jest tylko sama etykieta. Jeśli getTab() nie zwraca nic, to w ogóle nic nie jest wyświetlane i getPanel() nie jest już wywoływany.

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

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

Zarejestruj się

Rejestracja odbywa się poprzez stronę Tracy\Bar::addPanel():

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

Możesz też zarejestrować panel bezpośrednio w konfiguracji aplikacji:

tracy:
	bar:
		- ExamplePanel

Kod zakładki HTML

Powinno to wyglądać coś takiego:

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

Obrazek powinien być w formacie SVG. Jeżeli napis wyjaśniający nie jest potrzebny, to <span> pominięty.

Kod HTML panelu

Powinno to wyglądać coś takiego:

<h1>Titulek</h1>

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

Nagłówek powinien być taki sam jak nagłówek zakładki, albo może zawierać dodatkowe informacje.

Należy wziąć pod uwagę, że jedno rozszerzenie może być zarejestrowane więcej niż raz, na przykład z różnymi ustawieniami, więc nie można używać id CSS do stylizacji, a jedynie klasy, w postaci tracy-addons-<NazevTridy>[-<volitelné>]. Następnie napisz klasę w div razem z klasą tracy-inner Podczas pisania CSS warto napisać #tracy-debug .trida, ponieważ reguła ma wtedy wyższy priorytet niż reset.

Domyślne style

W panelu są prestylizowane <a>, <table>, <pre>, <code>. Aby utworzyć łącze, które ukrywa i wyświetla inny element, połącz je za pomocą atrybutów href i id oraz klasy tracy-toggle:

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

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

Jeśli stan domyślny ma być zwinięty, dodaj klasę tracy-collapsed do obu elementów.

Użyj statycznego licznika, aby uniknąć tworzenia duplikatów identyfikatorów na tej samej stronie.

Rozszerzenie Bluescreen

Pozwala to na dodanie niestandardowych wizualizacji wyjątków lub paneli wyświetlanych na bluescreen.

Rozszerzenie jest tworzone za pomocą tego polecenia:

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

Funkcja wywoływana jest dwukrotnie, najpierw w parametrze $e przekazywany jest sam wyjątek, a zwrócony panel renderowany jest na górze strony. Jeśli nic nie jest zwracane, panel nie jest renderowany. Następnie jest wywoływany z parametrem null, a zwrócony panel jest renderowany poniżej callstack. Jeśli funkcja zwraca klucz 'bottom' => true w tablicy , to panel jest renderowany na samym dole.