Δημιουργία επεκτάσεων για την Tracy

Μπορείτε να βρείτε ένα αποθετήριο έτοιμων επεκτάσεων για την Tracy στο Componette.

Επεκτάσεις για το Tracy Bar

Η δημιουργία μιας νέας επέκτασης για το Tracy Bar δεν είναι καθόλου πολύπλοκη. Δημιουργείτε ένα αντικείμενο που υλοποιεί το interface 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>

Ο τίτλος θα πρέπει να είναι είτε ο ίδιος με τον τίτλο της καρτέλας, είτε μπορεί να περιέχει πρόσθετα δεδομένα.

Πρέπει να λάβετε υπόψη ότι μια επέκταση μπορεί να εγγραφεί πολλές φορές, για παράδειγμα με διαφορετικές ρυθμίσεις, οπότε για το styling δεν μπορείτε να χρησιμοποιήσετε CSS id, αλλά μόνο class, και μάλιστα με τη μορφή tracy-addons-<NazevTridy>[-<volitelné>]. Στη συνέχεια, γράψτε την κλάση στο 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.

Χρησιμοποιήστε έναν στατικό counter, ώστε να μην δημιουργούνται διπλότυπα ID στην ίδια σελίδα.

Επεκτάσεις για το Bluescreen

Με αυτόν τον τρόπο μπορείτε να προσθέσετε προσαρμοσμένες οπτικοποιήσεις εξαιρέσεων ή πάνελ που θα εμφανίζονται στο bluescreen.

Η επέκταση δημιουργείται με αυτήν την εντολή:

Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // παγιδευμένη εξαίρεση
	return [
		'tab' => '...Ετικέτα...',
		'panel' => '...Κώδικας HTML του πάνελ...',
	];
});

Η συνάρτηση καλείται δύο φορές, πρώτα περνιέται η ίδια η εξαίρεση στην παράμετρο $e και το επιστρεφόμενο πάνελ απεικονίζεται στην αρχή της σελίδας. Αν δεν επιστρέψει τίποτα, το πάνελ δεν απεικονίζεται. Στη συνέχεια, καλείται με την παράμετρο null και το επιστρεφόμενο πάνελ απεικονίζεται κάτω από το callstack. Αν η συνάρτηση επιστρέφει στο πεδίο το κλειδί 'bottom' => true, το πάνελ απεικονίζεται στο κάτω μέρος.