Chrome Geliştirici Araçları'nın etkili kullanımı: Ağ

Tutorialda, Google Chrome'un ağ araçlarını etkili bir şekilde kullanarak ağ isteklerini ve yanıtlarını analiz edebileceğinizi göstereceğim. Ağ analizleri, web sayfalarının yüklenme sürelerini anlamanıza, veri iletimindeki problemleri tanımlamanıza ve uygulamalarınızın performansını artırmanıza yardımcı olur. Bu özellikle, web sitelerinin işleyişini anlamak ve optimize etmek isteyen geliştiriciler için faydalıdır.

Önemli Bulgular

• Analizlerin gerçekçi olması için önbelleği devre dışı bırakın.
• İstemci ve sunucu arasındaki iletişimi anlamak için istek ve yanıt başlıklarını kullanın.
• İsteklerin zamanlamasını Su Düşmesi diyagramında izleyin.
• İlgili bilgileri hızlı bir şekilde bulmak için istekleri filtreleyin ve sıralayın.
• Hata ayıklama ve WebSocket üzerinden iletişimi izlemek için konsolu kullanın.

Adım Adım Kılavuz

İlk olarak, Chrome Geliştirici Araçları'nı açın. Bunun için sayfada sağ tıklayıp "İncele" yi seçerek veya F12 (Windows) veya Command + Option + I (Mac) kısayolunu kullanarak erişebilirsiniz.

Ağ sekmesinde "Önbelleği Devre Dışı Bırak" kutusunu işaretleyin. Bu önemlidir çünkü sayfa önbelleği yok sayılır. Tarayıcı böylece tüm dosyaları sunucudan yeniden yükler. Bu, en güncel dosyaları almanızı sağlar ve analizi kolaylaştırır.

Sayfayı yeniden yükleyin. Bunun için F5'e basabilir veya "Ctrl + R" (Windows) veya "Command + R" (Mac) kombinasyonunu kullanabilirsiniz. Yeniden yükleme işleminden sonra, sayfanın yaptığı isteklerin bir listesini göreceksiniz.

Listede bir öğeye tıkladığınızda detayları görebilirsiniz. Özellikle İstek Başlıkları (Request Headers) önemlidir, çünkü gönderilen veriler hakkında bilgi içerirler. Ham (RAW) biçim ve formatlı görünüm arasında geçiş yapabilirsiniz.

Aynı durum Yanıt Başlıkları (Response Headers) için de geçerlidir. Sunucu isteği işledikten sonra yanıtı geri gönderir. Buradan da iletişimin nasıl gerçekleştiğini anlamak için başlık bilgilerini görebilirsiniz.

Su Düşmesi diyagramı, isteklerin süresini ve sırasını görmek için önemli bir araçtır. Çubuklar, bir isteğin ne zaman başladığını ve ne zaman tamamlandığını gösterir. Zamanlamayı görsel olarak görmek için "Su Düşmesi" sütununa tıklayabilirsiniz.

Yüklenme sürelerini analiz ettiğinizde, her isteğin ne kadar zaman aldığını bilmek faydalıdır. Örneğin, İndeks-HTML dosyasının yüklenme süresi harici betikler veya CSS dosyalarından çok daha hızlı olabilir. Tüm bunları Su Düşmesi görünümünde görebilirsiniz.

Bir diğer önemli nokta WebSocket bağlantılarıdır. Bunlar genellikle açık kalır ve Su Düşmesi diyagramında tamamlanmış olarak işaretlenmezler. WebSockets'in gerçek zamanlı iletişim için kullanıldığını ve her zaman normal bir şekilde yüklenip veya sonlandırılmadığını anlamanın önemli olduğunu unutmayın.

Bir isteğe tıkladığınızda yanıtın önizlemesini de görebilirsiniz. Bir HTML isteği durumunda, sunucudan dönen HTML önizlemesini görebilirsiniz. Sunucudan dönen HTML içeriklerini analiz etmek istiyorsanız, bu özellik özellikle faydalıdır.

"Başlatıcı" sekmesinde, hangi betiklerin veya dosyaların isteği tetiklediğini görebilirsiniz. Bu, web sitenizin genel yapısının nasıl çalıştığını ve hangi öğelerin birbirleriyle etkileşime girdiğini anlamanıza yardımcı olur.

Zamanlama bir diğer önemli unsurdur. Beklenenden daha uzun süren istekleri analiz edebilirsiniz. Yükleme sürelerini analiz etmek, ağda darboğazları belirlemeniz açısından kritiktir. Su Düşmesi diyagramı burada özellikle faydalı olacaktır.

Eğer birden fazla istek oluşturan bir sayfa üzerinde çalışıyorsanız, istekleri düzenleyerek daha iyi bir anlayış elde etmek için sıralamayı özelleştirebilirsiniz. Örneğin, istekleri oluşturma zamanına, ismine veya boyutuna göre sıralayabilirsiniz.

Belirli istekleri hızlıca bulmak için filtre alanını kullanın. Örneğin CSS veya JavaScript gibi belirli terimler veya türlerle arama yaparak belirli bilgilere odaklanabilirsiniz.

"Log Kaydını Sakla" seçeneği ile, sayfalar arasında geçiş yaparken dahi tüm isteklerin kaydedildiğinden emin olabilirsiniz. Bu işlev olmadan, sayfa değiştirildiğinde liste sıfırlanır.

Developer Tools’u kapatıp tekrar sayfayı yüklemek istediğinizde, Developer Tools tekrar açılmadıkça yeni bir istek kaydedilmez. Bu nedenle, tam verileri alabilmek için Geliştirici Araçları’nu önceden başlatmak önemlidir.

Şimdi Chrome ağ araçlarının işlevlerine detaylı bir bakış açısı elde ettin. Bu yetenekler, istemci ve sunucu arasındaki ağ iletişimi hakkındaki anlayışını derinleştirmek açısından önemlidir.

Özet

Bu öğretici ile Chrome'un Ağ İsteklerini analiz etmek için Geliştirici Araçlar'ını nasıl kullanabileceğinizi öğrendiniz. Gerçek zamanlı verileri izleyebilir, sorunları tanımlayabilir ve web sitenizin performansını artırabilirsiniz. Ağ sekmesi, tarayıcınız ve sunucunuz arasındaki etkileşimler hakkında değerli bilgiler sunar, optimizasyon ve hata ayıklama süreçlerinde gereklidir.