DevTools uzantısı

Text.js DevTools uzantısı, Konsol’un yanına bir Text.js paneli ekler. Konsolda render edilen uygulamayı inceler.

• Bileşenler: her konsol kökünün React ağacı; prop’lar, hook’lar, anahtarlar ve bunların arkasındaki tx-box / tx-text sahne düğümleriyle birlikte hücreler halinde yerleştirilir.
• Kare: hücre ızgarası olarak geçerli kare. Hangi bileşenin boyadığını görmek için bir hücrenin üzerine gelin. Düğümü seçmek için tıklayın. Düğüm canlı konsolda vurgulanır.
• Zaman çizelgesi: kare başına React, layout, boyama ve kodlama süreleri, atlanan ve çıktı verilen kareler, kare zamanlaması ve %c span’leri.
• Denetimler: çıktıyı duraklatma ve sürdürme, layout tel kafesini açıp kapatma, ızgara boyutunu sabitleme veya sığdırma, kareyi metin olarak kopyalama.

#Kurulum

Uzantı, packages/devtools-extension dizininden derlenir ve paketlenmemiş olarak yüklenir:

bun run --cwd packages/devtools-extension build

1. chrome://extensions adresini açın ve Geliştirici modu seçeneğini etkinleştirin.
2. Paketlenmemiş öğe yükle düğmesine tıklayın ve packages/devtools-extension/dist dizinini seçin.
3. Uygulamanızı yeniden yükleyin ve DevTools’u açın. Sayfa bir konsol kökü oluşturduğunda Text.js paneli görünür.

Derleme ayrıca Chrome Web Store için hazır olan release/textjs-devtools-<version>.zip dosyasını yazar.

#Bileşenler

Bir bileşenin prop’larını, çağrı sırasına göre hook’larını (State, Ref, Memo, Effect ve diğerleri, geçerli değerleriyle) ve render ettiği sahne düğümünü hücre cinsinden konumu, boyutu ve kutu iç mesafeleriyle görmek için bileşeni seçin. Bir satırın üzerine geldiğinizde düğüm konsolda vurgulanır. Ana makine düğümleri, bileşenler arasındaki tx-box ve tx-text öğelerini gösterir veya gizler.

Panel açıkken ağaç, commit’lerden sonra yenilenir. Değerler, görüntüleme amaçlı özetlerdir; canlı nesneler değildir.

#Kare

Kare inceleyicisi, render motorunun hücre arabelleğini çizer: her glif, ön plan, arka plan ve öznitelik. Bir hücrenin üzerine geldiğinizde karakteri ve renkleri, boyama sırasına göre üzerindeki sahne düğümü (overflow, kaydırma ofsetleri ve zIndex dikkate alınarak) ve o düğümü render eden bileşenler gösterilir. Tıkladığınızda düğüm Bileşenler panelinde seçilir ve render motorunun kendi vurgulama katmanıyla canlı konsolda vurgulanır.

#Zaman çizelgesi

Her çubuk, render motorunun bir karesidir:

Atlanan kareler soluk çizilir: hiçbir şey değişmediği için günlüğe hiçbir şey yazılmamıştır. Zamanlama grafiği, çıktı verilen kareler arasındaki süreyi 66 ms minimum aralıkla karşılaştırarak gösterir.

Süreler console.log() çağrısında sona erer. Mesajın biçimlendirilmesi ve boyanması DevTools içinde gerçekleşir ve sayfadan gözlemlenemez; bu nedenle zaman çizelgesi bunları göstermez. Kareler arasında commit edilen eşzamanlı render’lar commit olarak sayılır, süreleri ölçülmez.

#Çalışma şekli

React DevTools gibi, uzantı da sayfa çalışmadan önce global bir hook kurar:

globalThis.__TEXTJS_DEVTOOLS_HOOK__

Her konsol kökü oluşturulduğunda bu hook’a kaydolur. Uzantı yokken hook mevcut değildir; kök bunu bir kez kontrol eder ve kare başına hiçbir iş yapmaz. Uzantı yüklüyken panel kapalıysa karelerin maliyeti bir özellik okumasıdır. Ağaçlar ve kareler yalnızca panel istediğinde hesaplanır.

Mesajlar sayfa → içerik betiği → service worker → panel yönünde akar. İçerik betikleri her sayfada çalışır; böylece uygulamanız başlamadan önce hook mevcut olur. Uzantının istediği tek erişim budur. Uzak kod yüklemez ve makine dışına hiçbir şey göndermez.

#Gizlilik

Uzantı veri toplamaz. Ağ isteği yapmaz, hiçbir şey saklamaz ve analitik içermez. Bileşen ağaçları, kareler ve süreler yalnızca aynı tarayıcıdaki sayfa ile DevTools paneli arasında iletilir ve DevTools’u kapattığınızda silinir. Kareyi kopyala düğmesine tıkladığınızda karenin metni panonuza yazılır.

#Sınırlamalar

• Chrome ve Chromium tabanlı tarayıcılar, sürüm 111 veya sonrası.
• Uzantı yüklenmeden önce başlatılan uygulamaların yeniden yüklenmesi gerekir.
• Bir sekmenin yalnızca en üst karesi incelenir.
• Süreler, tarayıcıların hassasiyetini yaklaşık 0,1 ms’ye düşürdüğü performance.now() çağrısından alınır.