Tracy kiterjesztések létrehozása
A Tracy egy nagyszerű eszköz az alkalmazás hibakereséséhez. Néha azonban több információra van szükséged, mint amennyit a Tracy nyújt. Megtanulhatsz a következőket:
- Saját Tracy Bar panelek létrehozása
- Saját Bluescreen-bővítmények létrehozása
A Tracy számára hasznos bővítményeket találhat a Componette oldalon.
Tracy bárbővítmények
Egy új kiterjesztés létrehozása a Tracy Bar számára egyszerű. Meg kell valósítania a Tracy\IBarPanel
interfészt a getTab()
és a getPanel()
metódusokkal. A metódusoknak vissza kell adniuk egy fül (kis
címke a Tracy Baron) és egy panel (a fülre kattintás után megjelenő felugró ablak) HTML-kódját. Ha a
getPanel()
nem ad vissza semmit, akkor csak a fül jelenik meg. Ha a getTab()
nem ad vissza semmit,
akkor semmi sem jelenik meg, és a getPanel()
nem hívódik meg.
class ExamplePanel implements Tracy\IBarPanel
{
public function getTab()
{
return /* ... */;
}
public function getPanel()
{
return /* ... */;
}
}
Regisztráció
A regisztráció a Tracy\Bar::addPanel()
címen történik:
Tracy\Debugger::getBar()->addPanel(new ExamplePanel);
vagy egyszerűen regisztrálhatja a panelt az alkalmazás konfigurációjában:
tracy:
bar:
- ExamplePanel
HTML kód
Valahogy így kell kinéznie:
<span title="Explaining tooltip">
<svg>...</svg>
<span class="tracy-label">Title</span>
</span>
A képnek SVG formátumúnak kell lennie. Ha nincs szükséged tooltipre, akkor hagyhatod a <span>
ki.
Panel HTML kód
Valahogy így kell kinéznie:
<h1>Title</h1>
<div class="tracy-inner">
<div class="tracy-inner-container">
... content ...
</div>
</div>
A címnek vagy ugyanannak kell lennie, mint a lapon, vagy további információkat kell tartalmaznia.
Egy kiterjesztés többször is regisztrálható, ezért ajánlott nem használni a id
attribútumot a stílus
kialakításához. Használhat osztályokat, lehetőleg a tracy-addons-<class-name>[-<optional>]
formátumban. CSS létrehozásakor jobb a #tracy-debug .class
, mert az ilyen szabály magasabb prioritású, mint
a reset.
Alapértelmezett stílusok
A panelben az elemek <a>
, <table>
, <pre>
, <code>
elemek alapértelmezett stílusokkal rendelkeznek. Más elemek elrejtésére vagy megjelenítésére szolgáló link
létrehozásához kapcsolja össze őket a href
és a id
attribútumokkal és a
tracy-toggle
osztállyal.
<a href="#tracy-addons-className-{$counter}" class="tracy-toggle">Detail</a>
<div id="tracy-addons-className-{$counter}">...</div>
Ha az alapértelmezett állapot az összecsukott, akkor mindkét elemhez adjuk hozzá a tracy-collapsed
osztályt.
Használjon statikus számlálót, hogy megakadályozza a duplikált azonosítókat egy oldalon.
Bluescreen kiterjesztések
Hozzáadhat saját kivételes vizualizációkat vagy paneleket, amelyek megjelennek a bluescreen-en.
A bővítmény így készül:
Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // elkapott kivétel
return [
'tab' => '...Cím...',
'panel' => '...tartalom...',
];
});
A függvényt kétszer hívjuk meg, először magát a kivételt adjuk át a $e
paraméterben, majd a
visszaküldött panelt az oldal elején megjelenítjük. Ha semmi sem érkezik vissza, a panel nem kerül renderelésre. Ezután a
null
paraméterrel hívjuk meg, és a visszaadott panel a callstack alatt kerül renderelésre. Ha a függvény a
tömbben a 'bottom' => true
címet adja vissza, a panel a legalsó részen kerül megjelenítésre.