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

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

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

Вы можете найти полезные расширения для Tracy на Componette.

Расширения для бара Tracy

Создать новое расширение для Tracy Bar очень просто. Вам необходимо реализовать интерфейс Tracy\IBarPanel с методами getTab() и getPanel(). Эти методы должны возвращать HTML-код вкладки (небольшой ярлык на панели Tracy Bar) и панели (всплывающее окно, отображаемое после щелчка на вкладке). Если getPanel() не возвращает ничего, будет отображаться только вкладка. Если getTab() ничего не возвращает, то ничего не отображается и getPanel() не будет вызван.

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

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

Регистрация

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

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

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

tracy:
	bar:
		- ExamplePanel

HTML-код вкладки

Должно выглядеть примерно так:

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

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

HTML код панели

Должно выглядеть примерно так:

<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.

Стили по умолчанию

На панели элементы <a>, <table>, <pre>, <code> имеют стили по умолчанию. Для создания ссылки для скрытия или отображения другого элемента соедините их атрибутами href и id и классом tracy-toggle.

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

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

Если состояние по умолчанию – свернутое, добавьте класс tracy-collapsed к обоим элементам.

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

Расширения для синего экрана

Вы можете добавить свои собственные визуализации исключений или панели, которые будут отображаться на блюскрине.

Расширение делается следующим образом:

Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // catched exception
	return [
		'tab' => '...Title...',
		'panel' => '...content...',
	];
});

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