Tracy Uzantıları Oluşturma

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

Tracy için faydalı uzantıları Componette üzerinde bulabilirsiniz.

Tracy Bar Uzatmaları

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.

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

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

Kayıt

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

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

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

tracy:
	bar:
		- ExamplePanel

Sekme HTML Kodu

Şuna benzer bir şey olmalı:

<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

Şuna benzer bir şey olmalı:

<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

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.

<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ı

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

Uzatma bu şekilde yapılır:

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.