Tworzenie rozszerzenia Tracy
****************************

<div class=perex>

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

</div>

.[tip]
Repozytorium gotowych rozszerzeń dla Tracy można znaleźć pod adresem "Componette":https://componette.org/search/tracy.


Rozszerzenia dla Tracy Bar .[#toc-tracy-bar-extensions]
=======================================================

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.

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

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


Zarejestruj się .[#toc-registration]
------------------------------------

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

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

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

```neon
tracy:
	bar:
		- ExamplePanel
```


Kod zakładki HTML .[#toc-tab-html-code]
---------------------------------------

Powinno to wyglądać coś takiego:

```latte
<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 .[#toc-panel-html-code]
---------------------------------------

Powinno to wyglądać coś takiego:

```latte
<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 .[#toc-default-styles]
-------------------------------------

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`:

```latte
<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 .[#toc-bluescreen-extensions]
=====================================================

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

Rozszerzenie jest tworzone za pomocą tego polecenia:
```php
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.