- Kısayollar ve bağlam menüleri kullanarak geliştirici araçlarına erişim ve yapılandırma.
- Erişilebilirliği ve duyarlı tasarımı iyileştirmek için DOM ve CSS stillerinin derinlemesine analizi.
- Ağ ve Lighthouse paneli aracılığıyla performans denetimi ve kaynak yükü izleme.
- SEO sıralamasını iyileştirmek için WPO hata ayıklama ve optimizasyon teknikleri.
Web sektöründe çalışıyorsanız, tasarım yapıyorsanız, programlama yapıyorsanız veya sitenizin Google'da görünmez olmamasını sağlamaya çalışıyorsanız, muhtemelen bir noktada " öğeyi incele" düğmesiyle karşılaşmışsınızdır . Bu, Chrome Geliştirici Araçları'na açılan kapıdır; bu araçlar, herhangi bir web sitesinin iç işleyişini anlamanıza, hataları anında düzeltmenize veya görsel cephenin ardında ne olduğunu keşfetmenize olanak tanıyan bir dizi araçtır.
En güzel yanı, alışılmadık bir şey yüklemenize gerek olmaması; tarayıcıda zaten yerleşik olarak bulunuyor. Bir resmin neden bu kadar uzun sürede yüklendiğini analiz etmekten, sunucu tarafı koduna dokunmadan kırmızı bir düğmenin nasıl görüneceğini görmek için CSS'i gerçek zamanlı olarak değiştirmeye kadar, Chrome Geliştirici Araçları, projelerinin kullanıcı deneyimini ve teknik performansını optimize etmek isteyen herkes için paha biçilmez bir araçtır.
DevTools'un özüne nasıl ulaşılır?
Bu kontrol panelini açmanın, size en uygun gelen yönteme bağlı olarak birkaç yolu vardır. En sezgisel yöntem, web sayfasında herhangi bir yere sağ tıklayıp "İncele" seçeneğini seçmektir. Hız için klavye kısayollarını tercih ediyorsanız, Windows ve Linux'ta Ctrl + Shift + I tuşlarına , Mac'te ise Cmd + Option + I tuşlarına basabilirsiniz . Ayrıca, paneli açıp kapatmak için genellikle bir geçiş düğmesi görevi gören F12 tuşuna da basabilirsiniz.
İçeri girdikten sonra, pencerenin nerede konumlandırılacağını seçebilirsiniz: sağa, sola, alta sabitleyebilir veya hatta ayrı bir pencere olarak açabilirsiniz ; bu, birden fazla monitörünüz varsa ve web sitesini birinde, kodu ise diğerinde görüntülemek istiyorsanız harika bir özelliktir.
Öğeler Paneli: Web'in iskeleti ve dış katmanı
Öğeler sekmesi, DOM'un (Belge Nesne Modeli) büyüsünün gerçekleştiği yerdir. Burada sunucudan gönderilen statik HTML kodunu değil, JavaScript'in anlık olarak oluşturduğu her şey dahil olmak üzere sayfanın gerçek, dinamik temsilini görürsünüz . Bu, anlamsal işaretlemenizin doğru olup olmadığını kontrol etmek için ideal bir yerdir ve bu da sayfa içi SEO için temeldir.
İnceleme Modunu (sol üst köşedeki ok simgesi) etkinleştirirseniz , fare imlecini web sitesinin üzerine getirerek piksel boyutları, arka plan renkleri, kenar boşlukları ve dolgu gibi ayrıntılı bilgilere ulaşabilirsiniz. Hatta renk kontrastının yetersiz olması durumunda sizi uyarır; bu da web erişilebilirliği için çok önemlidir . Ayrıca, çerez banner'ları gibi dikkat dağıtıcı öğeleri kaldırabilir veya konsol üzerinden Tasarım Modunu kullanarak metni doğrudan düzenleyebilirsiniz.
Ağ sekmesinde uzmanlaşma
Bir web sitesi yavaş çalışıyorsa, bakılacak ilk yer Ağ Paneli'dir. Bu araç, indirilen her dosyayı kaydeder: resimler, komut dosyaları, yazı tipleri ve HTML'nin kendisi. Sayfayı yeniden yüklediğinizde, HTTP yanıt durumunu , kaynak türünü ve dosya boyutunu gösteren kronolojik bir liste göreceksiniz.
Sayfa yükleme sürelerini profesyonelce analiz etmek için, yeni bir kullanıcının deneyimini simüle eden "önbelleği temizle ve yeniden yükle" seçeneğini kullanmak çok önemlidir . Ayrıca, Chrome, düşük kapsama alanına sahip mobil cihazlarda web sitenizin kullanılabilir olup olmadığını belirlemek için gerekli olan yavaş bağlantıları (örneğin 3G) simüle etmenize olanak tanır . Daha da ileri gitmek isterseniz, kaynaklar indirilirken sayfanın saniye saniye nasıl oluşturulduğunu tam olarak görmek için ekran görüntülerini etkinleştirebilirsiniz.
Lighthouse ile WPO Optimizasyonu ve Performansı
Web Performans Optimizasyonu (WPO), bir web sitesini uçurma sanatıdır. Geliştirici araçları arasında, hızı, erişilebilirliği ve en iyi uygulamaları analiz eden bir denetim aracı olan Lighthouse bulunur. Diğer harici araçlardan farklı olarak, Lighthouse yükleme süresini ve görüntülemeyi iyileştirmek için somut öneriler sunar.
Performansı optimize etmek için, küçültülmesi veya birleştirilmesi gereken büyük CSS veya JS dosyalarını belirlemek üzere Kaynaklar ve Ağ sekmelerini incelemeniz önerilir . Ayrıca, harici alanlardan (örneğin Google Fonts) çok fazla kaynak yükleyip yüklemediğinizi belirleyebilir ve bunları kendi sunucunuzda barındırmanın HTTP isteklerini azaltmada daha verimli olup olmayacağını değerlendirebilirsiniz.
Geliştiriciler ve SEO uzmanları için ileri düzey püf noktaları
JavaScript hatalarını ayıklamanız gerekiyorsa, Konsol en iyi arkadaşınızdır. Konsolda `$0` değişkenini kullanmak çok faydalı bir yöntemdir ; bu değişken, Öğeler panelinde seçtiğiniz son öğeye doğrudan referans verir. Öte yandan, bir kaynağın başarısız olması durumunda ne olduğunu öğrenmek istiyorsanız, bir CSS dosyasının veya API'nin kullanılamaz olduğunu simüle etmek ve web sitesinin çalışmaya devam edip etmediğini görmek için istek engelleme özelliğini kullanabilirsiniz.
Veri ayıklamak isteyenler için, "Öğeyi kopyala" işlevi, tüm bir tablonun veya listenin yapısını bir kod düzenleyiciye aktarmanıza veya hatta Google Sheets'te ImportXML ile kullanmanıza olanak tanır. Tüm bunlar, farklı mobil cihazları taklit eden duyarlı tasarımla birleştiğinde , DevTools'u eksiksiz bir teknik analiz paketi haline getirir.
Bu araçların akıllıca kullanımı, yavaş ve kötü yapılandırılmış bir web sitesini Google'ın sıralamalarında ödüllendirdiği optimize edilmiş bir platforma dönüştürmenizi sağlar. Öğelerin incelenmesi, ağ analizi ve performans denetimlerinde uzmanlaşmak sadece programcılar için değil, kusursuz bir kullanıcı deneyimi ve güçlü arama motoru sıralamaları sağlamak isteyen herkes içindir.
Genel olarak bayt ve teknoloji dünyası hakkında tutkulu bir yazar. Bilgilerimi yazarak paylaşmayı seviyorum ve bu blogda da bunu yapacağım; size gadget'lar, yazılım, donanım, teknolojik trendler ve daha fazlasıyla ilgili en ilginç şeyleri göstereceğim. Amacım dijital dünyada basit ve eğlenceli bir şekilde gezinmenize yardımcı olmaktır.