Hizmet Çalışanlarının Aşamalı Web Uygulamaları ve daha fazlası için hata ayıklamasını kolaylaştırma

  • History |
  • |
  • 0 Yorum

Service Workers ile, tarayıcıya internetten ne yükleneceğini ve yerel cihazdan ne alınacağını söyleme kontrolü sizdedir. Uygulamanıza hizmet çalışanları eklemek, Aşamalı Web Uygulamalarında (PWA) "Aşamalı"yı oluşturan "Aşamalı Geliştirme" ilkesini izleyerek eski tarayıcılar için siteyi bozmadan çevrimdışı destek eklemenize olanak tanır.
Service Workers, daha iyi uygulamalar oluşturmanıza olanak tanır, ancak aynı zamanda bunaltıcı da olabilir. Service Worker'larda hata ayıklama deneyimini basitleştirme fırsatlarını bulmak için web geliştiricileriyle yakın bir şekilde çalıştık. Bu konuşmalara dayanarak, Microsoft Edge 88'de bulunan Service Worker hata ayıklamasına yönelik yeni geliştirmeleri şimdi Kararlı kanalında kullanıma sunduk.
Ağ ve Uygulama bölmelerinde bunların hatalarını ayıklarken, sorunun kökünü verimli bir şekilde bulmak için yeterli ayrıntıyı bulmanın zor olduğunu gördük. Örneğin, web uygulamanız, servis çalışanları kullanılarak milisaniyelerle değiştirilebilecek ağ istekleri nedeniyle saniyeler süren gecikme maliyetlerinden muzdarip olabilir. Yeni hata ayıklama araçlarımız, projeniz için doğru dengeyi bulmanıza yardımcı olabilir.

Edge DevTools'daki uygulama sekmesi
Ağ, Uygulama ve Kaynaklar bölmelerindeki Service Worker iyileştirmelerine ilişkin belgelerimizle Service Worker'larınız ve onlardan geçen ağ istekleri hakkında daha fazla bilgi edinebilirsiniz Bu değişikliklerle şunları yapabilirsiniz:
Edge DevTools ile ağ isteklerini inceleme

Ağ bölmesinde Service Worker geliştirmelerini deneyin

  1. Hata ayıklamakta olduğunuz web uygulamasına gidin.
  2. DevTools'a (F12) gidin ve Ağ bölmesine gidin.
  3. İncelemekle ilgilendiğiniz Service Worker ağ isteğini seçin.
  4. Zamanlama sekmesini seçin ve başlatma ve yanıtla getirme olay zaman çizelgesiyle Service Worker zaman çizelgesini bulmak için kaydırın.

Uygulama bölmesinde Service Worker geliştirmelerini deneyin

  1. Hata ayıklamakta olduğunuz web uygulamasına gidin.
  2. DevTools'a (F12) gidin ve Uygulamalar bölmesine gidin.
  3. İncelemek istediğiniz Service Worker'ı seçin.
  4. Ağ istekleri bağlantısını seçin.
  5. Konsol çekmecesinde Ağ bölmesi açılır ve seçilen Servis Çalışanından geçen ağ isteklerini görüntüler.
  6. İncelemekle ilgilendiğiniz Service Worker ağ isteğini seçin.
  7. Zamanlama sekmesini seçin ve başlatma ve yanıtla getirme olay zaman çizelgesiyle Service Worker zaman çizelgesini bulmak için kaydırın.

Kaynaklar bölmesinde Service Worker geliştirmelerini deneyin

  1. Hata ayıklamakta olduğunuz web uygulamasına gidin.
  2. DevTools'a (F12) gidin.
  3. Kaynaklar panelindeki hizmet çalışanı komut dosyasına gidin veya Uygulama bölmesinin Hizmet Çalışanları sekmesindeki "kaynağa" tıklayın.
  4. Service Worker komut dosyasındaki getirme olay işleyicisinde bir kesme noktası ayarlayın.
  5. Web uygulamasından getirme çağrısını yapın, komut dosyası kesme noktasında durmalı ve çağrı yığını panelinde tüm yığın izini görebilmelidir.
Edge DevTools'daki Kaynaklar bölmesinde Service Worker iyileştirmeleri

Sıradaki ne

Service Worker güncelleme yaşam döngüsü yakında Kanarya'da yayınlanacak, bu yüzden bu duyuruyu dört gözle bekleyin! Ek olarak, Önbellek ayrıntısını daha da geliştirmeyi planlıyoruz ve Progressive Web Application (PWA) geliştiricileri için Service Worker hata ayıklama deneyimini iyileştirmenin daha fazla yolunu araştırıyoruz. DevTools'daki Geri Bildirim düğmesine basın veya düşüncelerinizi paylaşmak için bizi Twitter'da bulun .
Edge DevTools'daki (Alt-Shift-I) geri bildirim simgesi
Daha fazla bilgi edinmek isterseniz, lütfen belgelerimize de göz atın. Chromium ekibiyle işbirliği içinde çalıştık, bu krom hatasıyla ilgili tartışmadaki bazı teknik ayrıntılara göz atın .
– Erica Draud , Program Yöneticisi, Edge DevTools
– Songtao Xia, Kıdemli Yazılım Mühendisi, Edge DevTools
– Chait Pinnamaneni, Yazılım Mühendisi, Edge DevTools