Створення розширень для Tracy

Репозиторій готових розширень для Tracy можна знайти на Componette.

Розширення для Tracy Bar

Створити нове розширення для Tracy Bar нескладно. Ви створюєте об'єкт, що реалізує інтерфейс Tracy\IBarPanel, який має два методи: getTab() та getPanel(). Методи повинні повертати HTML-код вкладки (невеликий опис, що відображається безпосередньо на панелі) та панелі. Якщо 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="Пояснювальний опис">
	<svg>...</svg>
	<span class="tracy-label">Заголовок</span>
</span>

Зображення має бути у форматі SVG. Якщо пояснювальний опис не потрібен, <span> можна пропустити.

HTML-код панелі

Він повинен виглядати приблизно так:

<h1>Заголовок</h1>

<div class="tracy-inner">
<div class="tracy-inner-container">
	... вміст ...
</div>
</div>

Заголовок має бути таким самим, як заголовок вкладки, або може містити додаткові дані.

Слід враховувати, що одне розширення може бути зареєстроване кілька разів, наприклад, з різними налаштуваннями, тому для стилізації не можна використовувати CSS id, а лише class, у форматі tracy-addons-<НазваКласу>[-<необов'язково>]. Потім запишіть клас у div разом із класом tracy-inner. При написанні CSS корисно писати #tracy-debug .trida, оскільки правило тоді матиме вищий пріоритет, ніж reset.

Стандартні стилі

На панелі попередньо стилізовані <a>, <table>, <pre>, <code>. Якщо ви хочете створити посилання, яке приховує та показує інший елемент, зв'яжіть їх атрибутами href та id та класом tracy-toggle:

<a href="#tracy-addons-NazevTridy-{$counter}" class="tracy-toggle">Деталі</a>

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

Якщо стандартний стан має бути згорнутим, додайте обом елементам клас tracy-collapsed.

Використовуйте статичний лічильник, щоб уникнути створення дублікатів ID на одній сторінці.

Розширення для Bluescreen

Таким чином можна додавати власні візуалізації винятків або панелі, які відображатимуться на bluescreen.

Розширення створюється цією командою:

Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // перехоплений виняток
	return [
		'tab' => '...Мітка...',
		'panel' => '...HTML-код панелі...',
	];
});

Функція викликається двічі: спочатку в параметрі $e передається сам виняток, і повернута панель відображається на початку сторінки. Якщо нічого не повертається, панель не відображається. Потім вона викликається з параметром null, і повернута панель відображається під callstack. Якщо функція повертає в масиві ключ 'bottom' => true, панель відображається в самому низу.