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

<div class=perex>

Το Tracy είναι ένα εξαιρετικό εργαλείο για την αποσφαλμάτωση της εφαρμογής σας. Ωστόσο, μερικές φορές χρειάζεστε περισσότερες πληροφορίες από αυτές που προσφέρει το Tracy. Θα μάθετε σχετικά με:

- Τη δημιουργία των δικών σας πλαισίων της γραμμής Tracy
- Δημιουργία των δικών σας επεκτάσεων Bluescreen

</div>

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


Επεκτάσεις της μπάρας Tracy .[#toc-tracy-bar-extensions]
========================================================

Η δημιουργία μιας νέας επέκτασης για το Tracy Bar είναι απλή. Πρέπει να υλοποιήσετε τη διεπαφή `Tracy\IBarPanel` με τις μεθόδους `getTab()` και `getPanel()`. Οι μέθοδοι πρέπει να επιστρέφουν τον κώδικα HTML μιας καρτέλας (μικρή ετικέτα στο Tracy Bar) και ενός πίνακα (αναδυόμενο παράθυρο που εμφανίζεται αφού κάνετε κλικ στην καρτέλα). Εάν η `getPanel()` δεν επιστρέψει τίποτα, θα εμφανιστεί μόνο η καρτέλα. Εάν το `getTab()` δεν επιστρέψει τίποτα, δεν εμφανίζεται τίποτα και το `getPanel()` δεν θα κληθεί.

```php
class ExamplePanel implements Tracy\IBarPanel
{
	public function getTab()
	{
		return /* ... */;
	}

	public function getPanel()
	{
		return /* ... */;
	}
}
```


Εγγραφή .[#toc-registration]
----------------------------

Η εγγραφή γίνεται καλώντας στο `Tracy\Bar::addPanel()`:

```php
Tracy\Debugger::getBar()->addPanel(new ExamplePanel);
```

ή μπορείτε απλά να καταχωρήσετε τον πίνακα σας στη διαμόρφωση της εφαρμογής:

```neon
tracy:
	bar:
		- ExamplePanel
```


Κωδικός HTML καρτέλας .[#toc-tab-html-code]
-------------------------------------------

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

```latte
<span title="Explaining tooltip">
	<svg>...</svg>
	<span class="tracy-label">Title</span>
</span>
```

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


Κώδικας HTML του πίνακα .[#toc-panel-html-code]
-----------------------------------------------

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

```latte
<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`, επειδή ένας τέτοιος κανόνας έχει υψηλότερη προτεραιότητα από την επαναφορά.


Προεπιλεγμένα στυλ .[#toc-default-styles]
-----------------------------------------

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

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

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

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

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


Επεκτάσεις Bluescreen .[#toc-bluescreen-extensions]
===================================================

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

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

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