Създаване на разширения на Трейси
*********************************

<div class=perex>

Tracy е чудесен инструмент за отстраняване на грешки в приложението. Понякога обаче се нуждаете от повече информация, отколкото предлага Трейси. Ще научите за:

- Създаване на собствени панели Tracy Bar
- Създаване на персонализирани разширения на Bluescreen

</div>

.[tip]
Можете да намерите полезни разширения за Tracy в "Componette":https://componette.org/search/tracy.


Удължения за лоста Трейси .[#toc-tracy-bar-extensions]
======================================================

Създаването на ново разширение за Tracy Bar е много лесно. Трябва да имплементирате интерфейс `Tracy\IBarPanel` с методи `getTab()` и `getPanel()`. Тези методи трябва да връщат HTML кода на таб (малък пряк път в лентата Tracy Bar) и панел (изскачащ прозорец, който се показва след щракване върху таб). Ако `getPanel()` не върне нищо, ще бъде показан само табът. Ако `getTab()` не върне нищо, не се показва нищо и `getPanel()` няма да бъде извикан.

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

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


Регистрация .[#toc-registration]
--------------------------------

Регистрацията е по телефона `Tracy\Bar::addPanel()`:

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

или можете просто да регистрирате панела си в конфигурацията на приложението:

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


HTML код на раздела .[#toc-tab-html-code]
-----------------------------------------

Тя трябва да изглежда по следния начин:

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

Изображението трябва да е във формат SVG. Ако не се нуждаете от подсказка, можете да оставите `<span>` изключва.


HTML код на панела .[#toc-panel-html-code]
------------------------------------------

Тя трябва да изглежда по следния начин:

```latte
<h1>Title</h1>

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

Заглавието трябва да е същото като раздела или да съдържа допълнителна информация.

Едно разширение може да бъде регистрирано повече от веднъж, затова се препоръчва да не използвате атрибута `id` за стилизиране. Можете да използвате класове, за предпочитане в `tracy-addons-<class-name>[-<optional>]` формат. Когато създавате CSS, е по-добре да използвате `#tracy-debug .class`, тъй като такова правило има по-висок приоритет от нулирането.


Стилове по подразбиране .[#toc-default-styles]
----------------------------------------------

В панела Елементи `<a>`, `<table>`, `<pre>`, `<code>` имат стилове по подразбиране. За да създадете връзка за скриване или показване на друг елемент, свържете ги с атрибутите `href` и `id` и класа `tracy-toggle`.

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

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

Ако състоянието по подразбиране е сгънато, добавете класа `tracy-collapsed` и към двата елемента.

Използвайте статичен брояч, за да предотвратите дублирането на идентификатори на една и съща страница.


Разширения за син екран .[#toc-bluescreen-extensions]
=====================================================

Можете да добавяте свои собствени визуализации на изключенията или панели, които да се показват в проекта.

Разширението се извършва по следния начин:
```php
Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // уловено изключение
	return [
		'tab' => '...Title...',
		'panel' => '...content...',
	];
});
```

Функцията се извиква два пъти, като първо се предава самото изключение в параметъра `$e`, а върнатият панел се показва в началото на страницата. Ако не бъде върнато нищо, панелът не се визуализира. След това се извиква с параметъра `null`, а върнатият панел се визуализира под стека на повикванията. Ако функцията върне `'bottom' => true` в масива, панелът се визуализира най-отдолу.