React Anatomy: Sayfadaki Her Komponenti 3D'de Görebileceksin

React sayfasının yapısını anlamak için Excalidraw'a koşan günler geride kaldı. React Anatomy adlı açık kaynak tarayıcı uzantısı, DevTools'a yeni bir panel ekliyor ve sayfa üzerinde tıkladığın herhangi bir öğenin hangi bileşenden oluştuğunu anında gösteriyor.

Araç ne işe yarıyor? Sayfanın tasarımını katmanlar halinde ayırıyor, her bileşeni tıklayarak bulabiliyor ve canlı props değerlerini okuyabiliyor. Bir kartın badge'i nereden geliyor, sidebar nasıl yapılandırılmış, liste öğeleri hangi bileşenden türüyor, tümünü görüyorsun.

Bu özellikle yapay zeka ajanlarının React layoutu oluşturduğu durumlarda çok değerli. Sayfa açıldığında hangi bileşenleri kullandığını, nasıl iç içe geçtiğini ve her birine hangi props geçildiğini görebilirsin. Böylece kodu devralmadan önce yapının tamamını anlıyorsun.

React öğrenenlerin de çok faydalı bulduğu araç, bileşen hiyerarşisini görmek için ideal. Chrome ve Firefox'ta çalışıyor, MIT lisansı altında özgür. İlginç olan, kurulum yapmadan doğrudan https://react-anatomy.com adresinde tarayıcıda deneyebilmen.

Hızlı ve etkili: Tahmin ettiğin yapı yerine, React'ın gerçekten render ettiği yapıyı görüyorsün.