Tracy Uzantıları Oluşturma
**************************

<div class=perex>

Tracy, uygulamanızda hata ayıklamak için harika bir araçtır. Ancak bazen Tracy'nin sunduğundan daha fazla bilgiye ihtiyacınız olabilir. Şunlar hakkında bilgi edineceksiniz:

- Kendi Tracy Bar panellerinizi oluşturma
- Kendi Bluescreen uzantılarınızı oluşturma

</div>

.[tip]
Tracy için faydalı uzantıları "Componette":https://componette.org/search/tracy üzerinde bulabilirsiniz.


Tracy Bar Uzatmaları .[#toc-tracy-bar-extensions]
=================================================

Tracy Bar için yeni bir uzantı oluşturmak basittir. `Tracy\IBarPanel` arayüzünü `getTab()` ve `getPanel()` yöntemleriyle uygulamanız gerekir. Yöntemler bir sekmenin (Tracy Bar üzerindeki küçük etiket) ve bir panelin (sekmeye tıklandıktan sonra görüntülenen açılır pencere) HTML kodunu döndürmelidir. `getPanel()` hiçbir şey döndürmezse, yalnızca sekme görüntülenir. `getTab()` hiçbir şey döndürmezse, hiçbir şey görüntülenmez ve `getPanel()` çağrılmaz.

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

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


Kayıt .[#toc-registration]
--------------------------

Kayıtlar `Tracy\Bar::addPanel()` adresinden yapılmaktadır:

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

ya da panelinizi uygulama yapılandırmasına kaydedebilirsiniz:

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


Sekme HTML Kodu .[#toc-tab-html-code]
-------------------------------------

Şuna benzer bir şey olmalı:

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

Görüntü SVG biçiminde olmalıdır. Araç ipucuna ihtiyacınız yoksa, bırakabilirsiniz `<span>` Dışarı.


Panel HTML Kodu .[#toc-panel-html-code]
---------------------------------------

Şuna benzer bir şey olmalı:

```latte
<h1>Title</h1>

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

Başlık ya sekmedeki ile aynı olmalı ya da ek bilgi içermelidir.

Bir uzantı birden fazla kez kaydedilebilir, bu nedenle stil için `id` özniteliğini kullanmamanız önerilir. Sınıfları kullanabilirsiniz, tercihen `tracy-addons-<class-name>[-<optional>]` biçimi. CSS oluştururken, `#tracy-debug .class` adresini kullanmak daha iyidir, çünkü bu kural sıfırlamadan daha yüksek önceliğe sahiptir.


Varsayılan Stiller .[#toc-default-styles]
-----------------------------------------

Panelde, öğeler `<a>`, `<table>`, `<pre>`, `<code>` varsayılan stillere sahiptir. Başka bir öğeyi gizlemek veya görüntülemek için bir bağlantı oluşturmak için, bunları `href` ve `id` nitelikleri ve `tracy-toggle` sınıfı ile bağlayın.

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

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

Varsayılan durum daraltılmışsa, her iki öğeye de `tracy-collapsed` sınıfını ekleyin.

Bir sayfada yinelenen kimlikleri önlemek için statik bir sayaç kullanın.


Bluescreen Uzantıları .[#toc-bluescreen-extensions]
===================================================

Mavi ekranda görünecek olan kendi istisna görselleştirmelerinizi veya panellerinizi ekleyebilirsiniz.

Uzatma bu şekilde yapılır:
```php
Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // yakalanan istisna
	return [
		'tab' => '...Başlık...',
		'panel' => '...içerik...',
	];
});
```

Fonksiyon iki kez çağrılır, önce istisnanın kendisi `$e` parametresinde geçirilir ve döndürülen panel sayfanın başında oluşturulur. Hiçbir şey döndürülmezse panel oluşturulmaz. Ardından `null` parametresiyle çağrılır ve döndürülen panel callstack'in altında oluşturulur. Fonksiyon dizide `'bottom' => true` döndürürse, panel en altta oluşturulur.