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

Μπορείτε να βρείτε χρήσιμες επεκτάσεις για το Tracy στο “Componette:https://componette.org/search/tracy”.

Επεκτάσεις της μπάρας Tracy

Η δημιουργία μιας νέας επέκτασης για το Tracy Bar είναι απλή. Πρέπει να υλοποιήσετε τη διεπαφή Tracy\IBarPanel με τις μεθόδους getTab() και getPanel(). Οι μέθοδοι πρέπει να επιστρέφουν τον κώδικα HTML μιας καρτέλας (μικρή ετικέτα στο Tracy 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="Explaining tooltip">
	<svg>...</svg>
	<span class="tracy-label">Title</span>
</span>

Η εικόνα θα πρέπει να είναι σε μορφή SVG. Αν δεν χρειάζεστε tooltip, μπορείτε να αφήσετε το <span> έξω.

Κώδικας HTML του πίνακα

Θα πρέπει να μοιάζει κάπως έτσι:

<h1>Title</h1>

<div class="tracy-inner">
<div class="tracy-inner-container">
	... content ...
</div>
</div>

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

Μια επέκταση μπορεί να καταχωρηθεί πολλές φορές, γι' αυτό συνιστάται να μην χρησιμοποιείτε το χαρακτηριστικό id για τη διαμόρφωση. Μπορείτε να χρησιμοποιήσετε κλάσεις, κατά προτίμηση σε tracy-addons-<class-name>[-<optional>] μορφή. Κατά τη δημιουργία CSS, είναι προτιμότερο να χρησιμοποιείτε το #tracy-debug .class, επειδή ένας τέτοιος κανόνας έχει υψηλότερη προτεραιότητα από την επαναφορά.

Προεπιλεγμένα στυλ

Στον πίνακα, τα στοιχεία <a>, <table>, <pre>, <code> έχουν προεπιλεγμένο στυλ. Για τη δημιουργία ενός συνδέσμου για την απόκρυψη ή την εμφάνιση άλλου στοιχείου, συνδέστε τα με τα χαρακτηριστικά href και id και την κλάση tracy-toggle.

<a href="#tracy-addons-className-{$counter}" class="tracy-toggle">Detail</a>

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

Εάν η προεπιλεγμένη κατάσταση είναι η αναδίπλωση, προσθέστε την κλάση tracy-collapsed και στα δύο στοιχεία.

Χρησιμοποιήστε έναν στατικό μετρητή για να αποφύγετε τα διπλά αναγνωριστικά σε μια σελίδα.

Επεκτάσεις Bluescreen

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

Η επέκταση γίνεται ως εξής:

Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // πιασμένη εξαίρεση
	return [
		'tab' => '...Title...',
		'panel' => '...content...',
	];
});

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