Tworzenie rozszerzenia Tracy
Tracy zapewnia doskonałe narzędzie do debugowania aplikacji. Czasem jednak chciałoby się mieć pod ręką jakieś dodatkowe informacje. Pokażemy Ci, jak napisać niestandardowe rozszerzenie dla Tracy Bar, aby rozwój był jeszcze przyjemniejszy.
- Tworzenie niestandardowego paska dla Tracy Bar
- Tworzenie własnego rozszerzenia dla Bluescreen
Repozytorium gotowych rozszerzeń dla Tracy można znaleźć pod adresem Componette.
Rozszerzenia dla Tracy Bar
Stworzenie nowego rozszerzenia dla Tracy Bar nie jest trudne. Tworzysz obiekt implementujący interfejs
Tracy\IBarPanel
, który ma dwie metody getTab()
i getPanel()
. Metody muszą zwracać kod
HTML dla zakładki (małej etykiety wyświetlanej bezpośrednio na pasku) i paska. Jeśli getPanel()
nic nie zwraca,
wyświetlana jest tylko sama etykieta. Jeśli getTab()
nie zwraca nic, to w ogóle nic nie jest wyświetlane
i getPanel() nie jest już wywoływany.
class ExamplePanel implements Tracy\IBarPanel
{
public function getTab()
{
return /* ... */;
}
public function getPanel()
{
return /* ... */;
}
}
Zarejestruj się
Rejestracja odbywa się poprzez stronę Tracy\Bar::addPanel()
:
Tracy\Debugger::getBar()->addPanel(new ExamplePanel);
Możesz też zarejestrować panel bezpośrednio w konfiguracji aplikacji:
tracy:
bar:
- ExamplePanel
Kod zakładki HTML
Powinno to wyglądać coś takiego:
<span title="Vysvětlující popisek">
<svg>...</svg>
<span class="tracy-label">Titulek</span>
</span>
Obrazek powinien być w formacie SVG. Jeżeli napis wyjaśniający nie jest potrzebny, to <span>
pominięty.
Kod HTML panelu
Powinno to wyglądać coś takiego:
<h1>Titulek</h1>
<div class="tracy-inner">
<div class="tracy-inner-container">
... obsah ...
</div>
</div>
Nagłówek powinien być taki sam jak nagłówek zakładki, albo może zawierać dodatkowe informacje.
Należy wziąć pod uwagę, że jedno rozszerzenie może być zarejestrowane więcej niż raz, na przykład z różnymi
ustawieniami, więc nie można używać id CSS do stylizacji, a jedynie klasy, w postaci
tracy-addons-<NazevTridy>[-<volitelné>]
. Następnie napisz klasę w div razem z klasą
tracy-inner
Podczas pisania CSS warto napisać #tracy-debug .trida
, ponieważ reguła ma wtedy wyższy
priorytet niż reset.
Domyślne style
W panelu są prestylizowane <a>
, <table>
, <pre>
,
<code>
. Aby utworzyć łącze, które ukrywa i wyświetla inny element, połącz je za pomocą atrybutów
href
i id
oraz klasy tracy-toggle
:
<a href="#tracy-addons-NazevTridy-{$counter}" class="tracy-toggle">Detaily</a>
<div id="tracy-addons-NazevTridy-{$counter}">...</div>
Jeśli stan domyślny ma być zwinięty, dodaj klasę tracy-collapsed
do obu elementów.
Użyj statycznego licznika, aby uniknąć tworzenia duplikatów identyfikatorów na tej samej stronie.
Rozszerzenie Bluescreen
Pozwala to na dodanie niestandardowych wizualizacji wyjątków lub paneli wyświetlanych na bluescreen.
Rozszerzenie jest tworzone za pomocą tego polecenia:
Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // zachycená výjimka
return [
'tab' => '...Label...'
'panel' => "...Kod HTML dla panelu...",
];
});
Funkcja wywoływana jest dwukrotnie, najpierw w parametrze $e
przekazywany jest sam wyjątek, a zwrócony panel
renderowany jest na górze strony. Jeśli nic nie jest zwracane, panel nie jest renderowany. Następnie jest wywoływany
z parametrem null
, a zwrócony panel jest renderowany poniżej callstack. Jeśli funkcja zwraca klucz
'bottom' => true
w tablicy , to panel jest renderowany na samym dole.