Ücretsiz Araç · Mobil uyumlu
Mobil Sayfa İnceleyici
Masaüstü tarayıcılardaki “İncele” özelliği telefonunuzda: sayfayı açın, bir alana dokunun; o öğenin HTML’ini, özniteliklerini, CSS kurallarını, kutu modelini ve DOM ağacındaki yerini görün.
Nasıl kullanılır?
- Adresi yazın. Sayfa sunucumuz üzerinden çekilir ve tam ekran açılır; üstte sayfa, altta inceleme paneli.
- Bir alana dokunun. Seçme modu açıkken dokunduğunuz öğe renkli kutularla işaretlenir: mavi içerik, yeşil iç boşluk (padding), sarı kenarlık, turuncu dış boşluk (margin).
- Paneli inceleyin. Öğe sekmesinde HTML, öznitelikler ve SEO notları; Stiller’de eşleşen CSS kuralları; Hesaplanan’da son değerler ve kutu modeli; DOM’da ağaçtaki yeri.
- Gezin ve arayın. Oklarla üst, alt ve kardeş öğelere geçin; üstteki büyüteçle CSS seçici, XPath ya da metinle öğe bulun.
Masaüstündeki “İncele”nin telefona uyarlanmış hâli
Dokun ve incele
Masaüstündeki öğe seçici gibi: dokunduğunuz alanın etiketi, boyutu ve kutu modeli sayfanın üzerinde gösterilir. Bağlantılara dokunmak sayfadan çıkarmaz, öğeyi seçer.
HTML, öznitelik ve seçiciler
Seçili öğenin HTML’i formatlı ve renklendirilmiş; öznitelikleri tam adresleriyle. CSS seçicisini ve XPath’ini (ör. Screaming Frog özel çıkarma için) tek dokunuşla kopyalayın.
Eşleşen CSS kuralları
Hangi kuralın uygulandığını ve hangisinin ezildiğini (üstü çizili) görün; kuralın dosyası ve medya sorgusu yanında yazar. Hesaplanan sekmesinde son değerler ve kutu modeli var.
DOM ağacı
Sayfanın öğe ağacını açıp kapatarak gezin; ağaçta seçtiğiniz öğe sayfada işaretlenir, sayfada seçtiğiniz öğe ağaçta açılır.
SEO notları
Bağlantıda rel, iç/dış bağlantı ve bağlantı metni; görselde alt metni, boyut öznitelikleri ve gerçek piksel boyutu; başlıkta seviye ve sayfadaki H1 sayısı; gizli öğe uyarıları.
Öğe bul
“h1”, “img:not([alt])”, “//a[@rel='nofollow']” ya da düz metin yazın; eşleşen öğeler arasında oklarla gezinin.
Sık sorulan sorular
Sayfa neden kendi sitesindekinden farklı görünüyor?
Güvenlik için sayfanın JavaScript’i çalıştırılmaz: sunucunun gönderdiği HTML ve CSS ile çizilir. JavaScript ile sonradan yüklenen içerik, görseller (ör. data-src ile tembel yükleme) ve menüler eksik görünebilir; <noscript> içeriği ise görünür. Bu, arama motorlarının sayfayı ilk aldığı hâline yakındır ve SEO açısından kritik öğelerin ham HTML’de olup olmadığını gösterir.
Masaüstündeki “İncele” ile farkı ne?
Masaüstündeki araç JavaScript çalıştıktan sonraki canlı DOM’u gösterir; burada JavaScript’siz DOM’u görürsünüz. Tarayıcının varsayılan (user agent) stilleri ve kalıtılan değerler Stiller sekmesinde listelenmez; son değerlere Hesaplanan sekmesinden bakın. Olay dinleyicileri, ağ ve konsol bölümleri yoktur.
Bazı CSS kuralları neden listelenmiyor?
Başka alan adındaki CSS dosyalarının kurallarını tarayıcılar okutmadığı için bu dosyalar sunucumuz üzerinden ayrıca çekilip ayrıştırılır (en fazla 12 dosya). Dosya alınamazsa ya da kurallar @import ile yükleniyorsa Stiller sekmesinin başında belirtilir.
Telefonda nasıl kullanmalıyım?
Paneli tutamacından sürükleyerek büyütüp küçültün. Seçme modu (üstteki imleç simgesi) açıkken dokunduğunuz öğe seçilir; kapatırsanız sayfayla normal etkileşirsiniz (açılır menüler, detay kutuları). Masaüstü düzenini görmek için Seçenekler’den sayfa genişliğini değiştirin.
Girdiğim adresler kaydediliyor mu?
Sayfa ve CSS dosyaları, tarayıcıların başka sitelerden veri okumasını engelleyen güvenlik kuralı nedeniyle Enar SEO sunucusu üzerinden çekilir; içerik ve adresler sunucuda saklanmaz. “Son incelenenler” listesi yalnızca kendi tarayıcınızda tutulur.
Sayfanın ham kaynağını okumak için Mobil Sayfa Kaynağı Görüntüleyici’yi, HTML’de neyin ne kadar yer kapladığını görmek için HTML Boyut Analizi’ni kullanabilirsiniz.