Создание расширений Трейси
**************************

<div class=perex>

Tracy - отличный инструмент для отладки вашего приложения. Однако иногда вам требуется больше информации, чем предлагает Tracy. Вы узнаете о:

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

</div>

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


Расширения для бара 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`, так как такое правило имеет более высокий приоритет, чем reset.


Стили по умолчанию .[#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) { // catched exception
	return [
		'tab' => '...Title...',
		'panel' => '...content...',
	];
});
```

Функция вызывается дважды, сначала само исключение передается в параметре `$e`, а возвращаемая панель выводится в начале страницы. Если ничего не возвращается, то панель не отрисовывается. Затем она вызывается с параметром `null`, и возвращаемая панель рендерится ниже стека вызовов. Если функция возвращает `'bottom' => true` в массиве, то панель отрисовывается в самом низу.