Chrome Geliştirici Araçları'nda, bir web sayfasının ağ etkinliğiyle ilgili değerli bilgiler sunan Ağ paneli en sık kullanılan araçlardan biridir.
Bu makalede, Ioana Forfota ve Silvia Eremia'nın STEP stajları sırasında Ağ panelinde yaptıkları çok istenen bir dizi iyileştirme paylaşılmaktadır. Heyecanla beklenen bu iyileştirmeler, Chromium sorun izleyicisindeki kapsamlı iş listesinden özenle seçilmiş ve paneli daha erişilebilir, sezgisel ve bilgilendirici hale getirmiştir.
Bu yeni özelliklerle, Ağ paneli web geliştiricilerine şunları yapma olanağı sağlıyor:
- Yalnızca alakalı ağ isteklerine odaklanın.
- Harici referanslara ihtiyaç duymadan HTTP durum kodlarını anlayın.
- İstek hatalarını hızlıca tespit edip giderin.
- JSON alt tür yanıtlarını anlama.
Tüm ayrıntılar için okumaya devam edin!
Chrome uzantı isteklerini filtreleyin
Chrome uzantıları kendi ağ isteklerini yapabilir. Bu istekler, Ağ panelinde sayfanın isteklerinin yanında görünür. Aktif olarak bir uzantı geliştirmiyorsanız bu istekler büyük olasılıkla sizinle alakalı olmayacaktır. Önceden, bunları gizlemenin tek yolu -scheme:chrome-extension filtresini kullanmak veya Gizli modda hata ayıklamaktı.
Chrome 117 sürümünden itibaren bu işlem çok daha kolay hale geldi. Geliştirici Araçları, Ağ panelinde dağınıklığı ortadan kaldırmak için artık Chrome uzantı isteklerini hariç tutacak bir onay kutusu sunuyor.
Bu özelliğin varsayılan durumuyla ilgili tartışmalar devam etmektedir. İlk etapta bu özelliğin, kullanıcıların büyük çoğunluğunun deneyimini iyileştirebileceği düşüncesiyle bu özelliği varsayılan olarak etkinleştirmeyi düşündük. Ancak bu yaklaşım, bazı kullanıcıların Chrome uzantısı URL'lerinin istekleri tetikleyebileceğini fark etmemesine neden olabilir. Bu durum, uzantı geliştiricileri için de zorluklar yaratabilir. Bu nedenle, varsayılan durum "devre dışı" olarak ayarlanır.
Bu onay kutusu etkinleştirildiğinde, istek listeniz daha sade, dikkat dağıtıcı ve en önemli isteklere daha fazla odaklanacaktır. Böylece, çok daha keyifli bir hata ayıklama deneyimi yaşayabilirsiniz.
HTTP yanıt durumu metinleri
HTTP durum kodlarını anlamak etkili hata ayıklama için çok önemlidir. Ancak anlamlarını sürekli olarak aramak zahmetli olabilir. Geliştirici Araçları, faydalı bir geliştirme sundu: İşaretçiyi istek listesindeki bir durum kodunun üzerine getirdiğinizde, ipucu anında durum metnini, yani anlamını netleştiren açıklayıcı bir başlık gösterecek.
Durum metni, kodun hemen yanındaki üstbilgi görünümünde de görülebilir. Daha önce yalnızca HTTP/1.1 için kullanılabilen bu özellikler artık HTTP/2 ve HTTP/3'ü kapsayacak şekilde genişletilmiştir. Görünüşte küçük olan bu düzenlemelerin önemli bir etkisi vardır. Bu düzenlemeler size zaman kazandırır ve kodun anlamlarını aramak yerine hata ayıklamaya odaklanmanıza olanak tanır.
Geliştirilmiş hata görünürlüğü
Hataları, panelin derinlerine inmeden hızlıca tespit etmeyi ve ele almayı kolaylaştırdık. Bunu başarmak için, metin rengi değişiklikleriyle hata mesajlarını yalnızca vurgulamak yerine, durum kodu 404 olan hatalar gibi istek hatalarına dikkat çekmek için gösterge niteliğinde simgeler ekledik. Bu basit ama yararlı göstergeler hataları daha belirgin hale getirerek önemli sorunları gözden kaçırmamanızı sağlar.
JSON alt türlerini düzgün şekilde yazdırma
Web geliştirme sürecinde genellikle JSON yanıtlarının incelenmesi gerekir, ancak biçimlendirilmemiş ham JSON'lerin okunması çok zahmetlidir. Bu tür yanıtlarla, özellikle de ld+json, hal+json veya sparql-results+json gibi alt türlerle başa çıkmak can sıkıcı olabilir (örneğin, bu yanıtlar tek bir satırda gösterildiğinde). İşleri kolaylaştırmak amacıyla DevTools, JSON alt türleri için daha kullanıcı dostu, daraltılabilir bir sunum sundu. Artık bu yanıtlar biçimlendirilmiştir ve geliştiricilerin harici araçlara güvenme ihtiyacını ortadan kaldırır. Bu yeni tasarım, basit ve son derece okunabilir bir temsil sunuyor.
Topluluktan olumlu geri bildirim
Bu özellikler henüz benimsenmenin ilk aşamalarında olsa da topluluğun verdiği tepki son derece olumlu. Başarılı bir şekilde uygulanması, birçok kullanıcıyı iyileştirmelerden memnun etti ve deneyimlerini önemli ölçüde geliştirdi. Yanıtlardan bazılarını X üzerinde okuyabilirsiniz:
"Çok güzel. ChromeDevTools, kullanıcılar tarafından okunabilir HTTP durum kodları göstererek işini bir adım öteye taşıyarak ağ isteğiyle ilgili sorunların ne olduğunu daha kolay görmelerini sağladı."—TribalIdeas on X
"Son zamanlarda çok faydalı oldu. Özellikle reklam engelleyiciler ve dil bilgisi uzantıları içeren formlar ele alınıyor."-MrAhmadAwais on X
Bu yeni özellikleri keşfetmeye hazır mısınız? Chrome Geliştirici Araçları'na gidin ve geliştirilmiş Ağ panelini kendiniz deneyin. İyi hata ayıklama işlemleri!
Önizleme kanallarını indirme
Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!
Chrome Geliştirici Araçları ekibiyle iletişim kurma
Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.
- crbug.com adresinden öneri veya geri bildirim gönderin.
- Geliştirici Araçları'nda, Diğer seçenekler
> Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin. - @ChromeDevTools adresine tweet gönderin.
- Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.