Chrome Geliştirici Araçları'nda, bir web sayfasının ağ etkinliği hakkında 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ı ve çok istenen bir dizi iyileştirme paylaşılmaktadır. Bu iyileştirmeler merakla bekleniyordu ve Chromium'un sorun izleyicisindeki kapsamlı iş listesinden dikkatlice seçildi. Paneli daha erişilebilir, sezgisel ve bilgilendirici hale getiriyor.
Ağ paneli, bu yeni özellikler sayesinde web geliştiricilerine şunları yapma olanağı sunar:
- Yalnızca alakalı ağ isteklerine odaklanın.
- Harici referanslara gerek kalmadan HTTP durum kodlarını anlayabilirsiniz.
- İ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ısı isteklerini filtreleme
Chrome uzantıları kendi ağ isteklerini gönderebilir. Bu istekler, sayfanın isteklerinin yanında Ağ panelinde görünür. Aktif olarak bir uzantı geliştirmiyorsanız bu istekler muhtemelen sizinle alakalı değildir. Daha önce bunları gizlemek için tek yol -scheme:chrome-extension filtresini kullanmak veya Gizli modda hata ayıklama yapmaktı.
Chrome 117'den itibaren bu işlem daha kolay hale geldi. Ağ panelinde yer açmak için DevTools'ta artık Chrome uzantısı isteklerini hariç tutmak üzere bir onay kutusu sunulmaktadır.
Bu özelliğin varsayılan durumuyla ilgili tartışmalar devam etmektedir. İlk başta, kullanıcıların çoğ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ğinin farkında olmamasını sağlayabilir. Bu durum, uzantı geliştiricileri için de zorluklar oluşturabilir. Bu nedenle, varsayılan durum "devre dışı" olarak ayarlanır.
Bu onay kutusunu etkinleştirdiğinizde istek listeniz daha net, dikkat dağıtıcı unsurları daha az barındıran ve en önemli isteklere odaklanan bir görünüme kavuşur. Böylece, çok daha keyifli bir hata ayıklama deneyimi yaşayabilirsiniz.
HTTP yanıtı durum metinleri
HTTP durum kodlarını anlamak, etkili bir şekilde hata ayıklama için gereklidir. Ancak kelimelerin anlamlarını sürekli olarak aramak can sıkıcı olabilir. DevTools'ta faydalı bir iyileştirme kullanıma sunuldu: İşaretçiyi istek listesindeki bir durum kodunun üzerine getirdiğinizde, durum metni anında bir ipucu olarak gösterilir. Bu metin, durumun ne anlama geldiğini açıklayan açıklayıcı bir başlıktır.
Durum metni, kodların hemen yanındaki üstbilgi görünümünde de gösterilir. Daha önce yalnızca HTTP/1.1 için kullanılabilen bu özellikler artık HTTP/2 ve HTTP/3 için de kullanılabilir. Küçük gibi görünen bu düzenlemelerin önemli bir etkisi vardır. Bu düzenlemeler sayesinde zamandan tasarruf eder ve kod anlamlarını aramak yerine hata ayıklama işlemine odaklanabilirsiniz.
Gelişmiş hata görünürlüğü
Panele derinlemesine inmeden hataları hızlıca tespit edip gidermeyi kolaylaştırdık. Bunu sağlamak için, hata mesajlarını yalnızca metin rengini değiştirerek vurgulamak yerine, 404 durum koduna sahip olanlar gibi istek hatalarına dikkat çekmek için gösterge simgelerini ekledik. Bu küçük ama faydalı göstergeler, hataları daha belirgin hale getirerek önemli sorunları gözden kaçırmamanızı sağlar.
JSON alt türlerini güzel bir şekilde yazdırma
Web geliştirme, genellikle JSON yanıtlarını incelemeyi içerir ancak biçimlendirilmemiş ham JSON'ları okumak çok zordur. Bu tür yanıtlarla (özellikle ld+json, hal+json veya sparql-results+json gibi alt türlerle) uğraşmak, örneğin bunlar tek bir satırda göründüğünde can sıkıcı olabilir. DevTools, işleri kolaylaştırmak için JSON alt türleri için daha kullanıcı dostu ve daraltılabilir bir sunum kullanıma sundu. Artık bu yanıtlar biçimlendiriliyor. Böylece geliştiricilerin harici araçlara başvurması gerekmiyor. Bu yeniden tasarım, basit ve son derece okunaklı bir temsil sunar.
Topluluğun olumlu geri bildirimleri
Bu özellikler henüz kullanıma sunulmasının ilk aşamalarında olsa da topluluktan gelen geri bildirimler büyük oranda olumlu. Bu iyileştirmelerin başarılı bir şekilde uygulanması, birçok kullanıcının deneyimini önemli ölçüde iyileştirerek memnuniyetlerini artırdı. X'teki bazı yanıtları okuyabilirsiniz:
"Bu çok güzel. ChromeDevTools, kullanıcılar tarafından okunabilen HTTP durum kodlarını göstererek oyununu bir üst seviyeye taşıdı. Bu sayede, ağ isteğinde neyin yanlış gittiğini çok daha kolay görebilirsiniz." —X'te TribalIdeas
"Son zamanlarda çok faydalı oldu. Özellikle reklam engelleyicileri ve dil bilgisi uzantıları olan formlarla uğraşırken." -X'te MrAhmadAwais
Bu yeni özellikleri keşfetmeye hazır mısınız? Chrome Geliştirici Araçları'na gidip gelişmiş Ağ panelini kendiniz deneyimleyin. Hata ayıklama işleminde başarılar dileriz.
Önizleme kanallarını indirme
Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.
Chrome Geliştirici Araçları Ekibi ile iletişime geçme
Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.
- crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
- Geliştirici Araçları'nda Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
- @ChromeDevTools hesabına tweet gönderin.
- Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.