Bileşen Dedektörü, bir web sitesinin hangi ön uç çerçevesini kullandığını otomatik olarak tanımlar ve tam bileşen ağacını ortaya çıkarır. React, Vue, Angular ve Svelte bileşen adlarını, prop/state değerlerini ve iç içe geçme hiyerarşisini — tek bir inceleme panelinden görün.
Bir web sitesinin hangi çerçeve ile oluşturulduğunu hiç merak ettiniz mi? Veya karmaşık bir kullanıcı arayüzünün bileşenlere nasıl ayrıldığını görmek istediniz mi? Bileşen Dedektörü her iki soruyu da anında yanıtlar. Sayfayı çerçeveye özgü imzalar için tarar (React fiber düğümleri, Vue bileşen örnekleri, Angular zone işaretleyicileri, Svelte bileşen meta verileri) ve çerçeveyi, sürümünü ve tam bileşen ağacını tanımlar. React ve Vue için daha ileri gider — bileşen prop ve state değerlerini göstererek UI'nin her parçasını hangi verilerin yönlendirdiğini anlamanızı sağlar. Karşılık gelen DOM öğesini sayfada vurgulamak için ağaçtaki herhangi bir bileşene tıklayın veya bileşenini ağaçta bulmak için sayfadaki bir öğeye tıklayın. Tıpkı React DevTools veya Vue DevTools gibi, ancak sayfanızda hafif bir yüzen panel olarak yerleşiktir.
React'ı (Next.js, Gatsby, Remix dahil), Vue'yü (Nuxt dahil), Angular'ı, Svelte'yi (SvelteKit dahil), Preact'i, Solid'i ve diğer çerçeveleri otomatik olarak algılar. Çerçeve adını, tam sürüm numarasını ve oluşturma modunu (istemci tarafı, SSR veya hibrit) gösterir.
Tam bileşen hiyerarşisini daraltılabilir bir ağaç görünümünde oluşturur. Üst düzey App bileşeninin bir Navbar içerdiğini, bunun da NavLinks içerdiğini, bunların da tek tek Link bileşenlerini içerdiğini görün. İç içe geçme derinliği ve ebeveyn-çocuk ilişkileri kristal berraklığındadır.
React ve Vue bileşenleri için her bileşene iletilen mevcut prop ve state değerlerini görüntüleyin. Dashboard bileşeninin title="Overview", loading=false ve columns=2 aldığını görün. Veri akışını anlamak için paha biçilmezdir.
Ağaç panelindeki herhangi bir bileşene tıklayarak karşılık gelen DOM öğesini sayfada renkli bir kaplama ile vurgulayın. Veya sayfadaki herhangi bir öğeye tıklayarak ağaçtaki üst bileşenini bulun ve seçin. Doğal olan yönde gezinin.
Sayfada oluşturulan toplam bileşen sayısını, kaçının benzersiz olduğunu ve hangi bileşenlerin en sık görüldüğünü görün. Sayfa karmaşıklığını anlamak ve yeniden kullanım kalıplarını belirlemek için yararlıdır.
Küçültülmüş üretim yapılarında bile çerçeveleri algılar. React'ın fiber ağacı, Vue'nin __vue__ işaretleyicileri ve Angular'ın ng öznitelikleri üretim modunda kalır — Bileşen Dedektörü bunları yapı yapılandırmasından bağımsız olarak okur.
Herhangi bir web sitesini ziyaret edin ve tam sürüm de dahil olmak üzere React, Vue, Angular veya Svelte ile oluşturulup oluşturulmadığını anında öğrenin. CDN, analitik ve CMS bilgileri de dahil olmak üzere tam teknoloji denetimi için Site Stack ile birleştirin.
Üretim uygulamalarının UI'lerini bileşenlere nasıl ayırdığını inceleyin. Stripe'ın fiyatlandırma sayfasını nasıl yapılandırdığını, Linear'ın kontrol panelini nasıl düzenlediğini veya herhangi bir iyi oluşturulmuş uygulamanın düzen, navigasyon ve içeriği bileşenlere nasıl ayırdığını görün.
Bir bileşen doğru oluşturulmuyor mu? Gerçekte hangi verileri aldığını görmek için prop'larını ve state'ini inceleyin. Veri akışının nerede bozulduğunu belirlemek için beklenen değerleri gerçek değerlerle karşılaştırın — console.log ifadeleri olmadan.
Bir ön uç görüşmesine hazırlanıyor musunuz? Gerçek dünya bileşen kalıplarını görmek için üretim sitelerine göz atın — container/presentational bölünmeleri, render prop kullanımı, context sağlayıcılar ve HOC sarmalayıcıları bileşen ağacında görülebilir.
Farklı çerçevelerle oluşturulmuş benzer ürünleri ziyaret edin ve bileşen yapılarını karşılaştırın. Bir React uygulamasının ve Vue uygulamasının aynı UI kalıbına — navigasyon, formlar, veri tabloları, modallar — nasıl yaklaştığını görün ve mimari farklılıkları anlayın.
DevSuite Pro yüzen yuvasını açın ve Bileşen Dedektörü simgesine tıklayın. Araç sayfa DOM'unu çerçeveye özgü işaretleyiciler için tarar ve bileşen ağacını oluşturur.
Panel başlığı algılanan çerçeveyi (React, Vue, Angular, Svelte), sürümünü ve oluşturma modunu gösterir. Hiçbir çerçeve algılanmazsa sayfayı vanilya HTML/CSS/JS olarak bildirir.
Hiyerarşiyi keşfetmek için ağaçtaki bileşenleri genişletin ve daraltın. Bileşen adları, girintilendirme ile gösterilen iç içe geçme derinliği ile birlikte görünür. Tekrarlanan bileşenler bir örnek sayısı gösterir.
Aşağıdaki ayrıntılar bölümünde mevcut prop ve state değerlerini görmek için ağaçtaki herhangi bir bileşene tıklayın. React için: prop'lar, state ve hook'lar. Vue için: prop'lar, data ve hesaplanmış özellikler.
Karşılık gelen DOM öğesini sayfada renkli bir kenarlık ve yarı saydam kaplama ile vurgulamak için herhangi bir bileşene tıklayın. Ağaçta bulmak için sayfadaki bir öğeye tıklayın.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
