Tracy için Eklenti Oluşturma

Tracy, uygulamanızın hatalarını ayıklamak için harika bir araç sağlar. Ancak bazen elinizin altında başka bilgilere de sahip olmak istersiniz. Geliştirmeyi daha da keyifli hale getirmek için Tracy Bar için kendi eklentilerinizi nasıl yazacağınızı göstereceğiz.

  • Tracy Bar için kendi panelinizi oluşturma
  • Bluescreen için kendi eklentinizi oluşturma

Tracy için hazır eklentilerin deposunu Componette adresinde bulabilirsiniz.

Tracy Bar Eklentileri

Tracy Bar için yeni bir eklenti oluşturmak karmaşık değildir. Tracy\IBarPanel arayüzünü uygulayan bir nesne oluşturursunuz. Bu arayüzün iki metodu vardır: getTab() ve getPanel(). Metotlar, sekmenin (doğrudan Bar üzerinde görüntülenen küçük bir etiket) ve panelin HTML kodunu döndürmelidir. getPanel() hiçbir şey döndürmezse, yalnızca etiketin kendisi görüntülenir. getTab() hiçbir şey döndürmezse, hiçbir şey görüntülenmez ve getPanel() artık çağrılmaz.

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

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

Kayıt

Kayıt işlemi Tracy\Bar::addPanel() kullanılarak yapılır:

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

Veya paneli doğrudan uygulama yapılandırmasında kaydedebilirsiniz:

tracy:
	bar:
		- ExamplePanel

Sekme HTML Kodu

Yaklaşık olarak şöyle görünmelidir:

<span title="Açıklayıcı etiket">
	<svg>...</svg>
	<span class="tracy-label">Başlık</span>
</span>

Resim SVG formatında olmalıdır. Açıklayıcı bir etiket gerekmiyorsa, <span> atlanabilir.

Panel HTML Kodu

Yaklaşık olarak şöyle görünmelidir:

<h1>Başlık</h1>

<div class="tracy-inner">
<div class="tracy-inner-container">
	... içerik ...
</div>
</div>

Başlık, sekme başlığıyla aynı olmalı veya ek bilgiler içerebilir.

Bir eklentinin, örneğin farklı ayarlarla birden çok kez kaydedilebileceğini unutmayın, bu nedenle stil için CSS id'leri kullanılamaz, yalnızca class kullanılabilir ve bu da tracy-addons-<SınıfAdı>[-<isteğe bağlı>] şeklinde olmalıdır. Sınıfı daha sonra tracy-inner sınıfıyla birlikte div'e yazın. CSS yazarken, #tracy-debug .trida yazmak yararlıdır, çünkü kural daha sonra sıfırlamadan daha yüksek önceliğe sahip olur.

Varsayılan Stiller

Panelde <a>, <table>, <pre>, <code> önceden stillendirilmiştir. Başka bir öğeyi gizleyen ve gösteren bir bağlantı oluşturmak istiyorsanız, bunları href ve id nitelikleri ve tracy-toggle sınıfıyla bağlayın:

<a href="#tracy-addons-SınıfAdı-{$counter}" class="tracy-toggle">Detaylar</a>

<div id="tracy-addons-SınıfAdı-{$counter}">...</div>

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

Aynı sayfada yinelenen ID'ler oluşturmamak için sayacı statik olarak kullanın.

Bluescreen Eklentileri

Bu şekilde, istisnaların özel görselleştirmelerini veya bluescreen'de görüntülenecek panelleri ekleyebilirsiniz.

Eklenti şu komutla oluşturulur:

Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // yakalanan istisna
	return [
		'tab' => '...Etiket...',
		'panel' => '...Panel HTML kodu...',
	];
});

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