Създаване на разширения за Tracy

Tracy предоставя чудесен инструмент за дебъгване на вашето приложение. Понякога обаче бихте искали да имате под ръка и друга информация. Ще ви покажем как да напишете собствено разширение за Tracy Bar, за да направите разработката още по-приятна.

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

Хранилище с готови разширения за Tracy можете да намерите на Componette.

Разширения за Tracy Bar

Създаването на ново разширение за Tracy Bar не е никак сложно. Създавате обект, имплементиращ интерфейса Tracy\IBarPanel, който има два метода getTab() и getPanel(). Методите трябва да върнат HTML кода на таба (малко описание, показано директно в 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="Обяснително описание">
	<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 .клас, тъй като правилото тогава има по-висок приоритет от 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 към двата елемента.

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

Разширения за Bluescreen

По този начин могат да се добавят собствени визуализации на изключения или панели, които ще се показват на bluescreen.

Разширението се създава с тази инструкция:

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

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