Progresif Web uygulamalarında hata ayıklama

Sofia Emelianova
Sofia Emelianova

Web uygulaması manifest dosyalarını, hizmet çalışanlarını ve hizmet çalışanı önbelleğini incelemek, değiştirmek ve hata ayıklamak için Uygulama panelini kullanın.

Progresif Web Uygulamaları (PWA'lar), web teknolojisi kullanılarak oluşturulmuş modern, yüksek kaliteli uygulamalardır. PWA'lar, iOS, Android ve masaüstü uygulamalarına benzer özellikler sunar. Bunları şöyle sıralayabiliriz:

  • Kararsız ağ koşullarında bile güvenilirdir.
  • Mac OS X'teki Uygulamalar klasörü, Windows'taki Başlat menüsü ve Android ile iOS'teki ana ekran gibi işletim sistemi yüzeylerini başlatmak için yüklenir.
  • Etkinlik değiştiricilerde, Spotlight gibi cihaz arama motorlarında ve içerik paylaşımı sayfalarında gösterilir.

Bu kılavuzda yalnızca Uygulama panelinin Progresif Web Uygulaması özellikleri ele alınmaktadır. Diğer panellerle ilgili yardıma ihtiyacınız varsa bu kılavuzun son bölümü olan Diğer uygulama paneli kılavuzları bölümüne göz atın.

Özet

  • Web uygulaması manifest'inizi incelemek için Manifest sekmesini kullanın.
  • Hizmet çalışanlarıyla ilgili çeşitli görevler (ör. bir hizmetin kaydını iptal etme veya güncelleme, push etkinliklerini taklit etme, çevrimdışı olma veya bir hizmet çalışanını durdurma) için Hizmet Çalışanları sekmesini kullanın.
  • Önbellek Depolama Alanı sekmesinden hizmet çalışanı önbelleğinizi görüntüleyin.
  • Depolama alanını temizle sekmesinden tek bir düğme tıklamasıyla bir hizmet çalışanının kaydını silin ve tüm depolama alanını ve önbellekleri temizleyin.

Web uygulaması manifesti

Kullanıcılarınızın uygulamanızı Mac OS X'teki Uygulamalar klasörüne, Windows'taki Başlat menüsüne ve Android ile iOS'teki ana ekrana ekleyebilmesi için bir web uygulaması manifest'ine ihtiyacınız vardır. Manifest, uygulamanın ana ekranda nasıl görüneceğini, ana ekrandan başlatıldığında kullanıcıyı nereye yönlendireceğini ve uygulamanın başlatıldığında nasıl görüneceğini tanımlar.

Manifestinizi oluşturduktan sonra Uygulama panelinin Manifest sekmesini kullanarak inceleyebilirsiniz.

Manifest sekmesi.

  • Manifest kaynağına bakmak için Uygulama Manifesti etiketinin altındaki bağlantıyı (yukarıdaki ekran görüntüsünde manifest.webmanifest) tıklayın.
  • Kimlik ve Sunuş bölümleri, manifest kaynağındaki alanları daha kullanıcı dostu bir şekilde gösterir.
  • Protokol İşleyicileri bölümünde, PWA'nızın URL protokol işleyici kaydını tek bir tıklamayla test edebilirsiniz. Daha fazla bilgi için URL protokol işleyici kaydını test etme başlıklı makaleyi inceleyin.
  • Simgeler bölümünde, belirttiğiniz tüm simgeler gösterilir ve maskelerini kontrol edebilirsiniz.
  • Kısayol #N bölüm grubu, tüm kısayol nesnelerinizle ilgili bilgileri gösterir.
  • Ekran görüntüsü #N bölümü, uygulamanızın daha zengin bir kurulum kullanıcı arayüzünün ekran görüntülerini gösterir.

Ayrıca, DevTools bir hatayla (ör. yüklenemeyen simge) karşılaşırsa Manifest sekmesinde hatayı açıklayan bir Yüklenebilirlik bölümü gösterilir.

Manifest sekmesindeki Yüklenebilirlik bölümü.

Maskelenebilir simgeleri görüntüleme ve kontrol etme

Manifest sekmesinin Simgeler bölümünde, uygulamanızın tüm simgeleri gösterilir. Bu bölümde, platformlara uyum sağlayan simge biçimi olan maskelenebilir simgeler için güvenli alanları da kontrol edebilirsiniz.

Simgelerin yalnızca minimum güvenli alan görünecek şekilde kırpılması için Onay kutusu. Maskelenebilir simgeler için yalnızca asgari güvenli alanı göster seçeneğini işaretleyin.

Maskelenebilir simgeler için minimum güvenli alanları görüntüleme.

Logonuzun tamamı güvenli alanda görünüyorsa sorun yoktur.

Tetikleyici kurulumu

Chrome, PWA'nızın yüklenmesini doğrudan kullanıcı arayüzünden etkinleştirmenizi ve tanıtmanızı sağlar. Kendi uygulama içi yükleme deneyiminizi nasıl sağlayacağınızı öğrenin.

PWA'nızın yükleme akışını tetiklemek için:

  1. PWA'nın açılış sayfasını Chrome'da açın.
  2. Üstteki adres çubuğunun sağ tarafında Yükle'ye dokunun. Yükle'yi tıklayın.

    Yükle düğmesi.

  3. Ekrandaki talimatları uygulayın.

Uygulama yükle özelliği, mobil cihazlar için iş akışını simüle edemez. Masaüstü Chrome tarayıcısında, Geliştirici Araçları Cihaz Modu'nda olsa bile adres çubuğunda kurulum düğmesinin gösterildiğine dikkat edin. Ancak uygulamanızı masaüstünüze başarıyla ekleyebilirseniz mobil cihazlarda da çalışır.

Gerçek mobil deneyimi test etmek istiyorsanız uzaktan hata ayıklama aracılığıyla gerçek bir mobil cihazı DevTools'a bağlayabilirsiniz. Bağlı mobil cihazda yüklemeyi tetiklemek için Üç noktalı menü. üç noktalı menüyü açıp Uygulamayı yükleyin. Uygulamayı yükle'yi tıklayın.

Kısayolların incelenmesi

Uygulama kısayolları, kullanıcıların sık ihtiyaç duyduğu birkaç işleme hızlı erişim sağlamanıza olanak tanır.

Manifest dosyanızda tanımladığınız kısayolları incelemek için Manifest sekmesinin Kısayol #N bölümlerine gidin.

Manifest sekmesindeki kısayol bölümü.

Daha zengin bir kurulum kullanıcı arayüzü için ekran görüntülerini inceleme

Manifest dosyanıza açıklama ve bir dizi ekran görüntüsü eklediğinizde uygulamanızın yükleme iletişim kutusu daha zengin olur.

Ekran görüntülerini incelemek için Manifest sekmesinin Ekran görüntüsü #N bölümlerine gidin.

Manifest sekmesindeki yükleme iletişim kutusu ve ekran görüntüleri.

URL protokolü işleyici kaydını test etme

PWA'lar, daha entegre bir deneyim için belirli bir protokol kullanan bağlantıları işleyebilir. İşleyici oluşturmayı öğrenmek için PWA'lar (Progresif Web Uygulaması) için URL protokol işleyici kaydı başlıklı makaleyi inceleyin.

İşleyicinizi test etmek için:

  1. PWA'nızın açılış sayfasında Geliştirici Araçları'nı açın. Örneğin, bu demo PWA'ya göz atın.
  2. Demo sayfasından PWA'yı yükleyin ve yükleme işleminden sonra uygulamayı yeniden yükleyin. Tarayıcı, PWA'yı web+coffee protokolü için bir işleyici olarak kaydetti.
  3. Uygulama > Manifest > Protokol İşleyici bölümünde, işleyicinin test etmesini istediğiniz URL'yi girin ve Protokolü test et'i tıklayın. İşleyiciyi test etme. Bu örnekte işleyici, americano, chai ve latte-macchiato öğelerini işleyebilir.
  4. Chrome, uygulamayı açıp açamayacağını sorduğunda Protokol İşleyicisini Aç'ı tıklayarak onaylayın. Uygulamayı açın.
  5. Sonraki iletişim kutusunda, uygulamanın web+coffee bağlantılarını işlemesine izin verin. Bağlantıları işlemeye izin verin.

İşleyici bağlantıyı başarıyla işlerse uygulamada açılmış bir kahve fincanı resmi görürsünüz.

Hizmet çalışanları

Hizmet çalışanları, gelecekteki web platformunda temel bir teknolojidir. Bunlar, tarayıcının web sayfasından ayrı olarak arka planda çalıştırdığı komut dosyalarıdır. Bu komut dosyaları, web sayfası veya kullanıcı etkileşimi gerektirmeyen özelliklere (ör. push bildirimleri, arka plan senkronizasyonu ve çevrimdışı deneyimler) erişmenizi sağlar.

İlgili Rehberler:

Uygulama panelindeki Hizmet Çalışanları sekmesi, DevTools'ta hizmet çalışanlarını incelemek ve hatalarını ayıklamak için kullanılan ana yerdir.

Hizmet Çalışanları sekmesi.

  • Şu anda açık olan sayfaya bir hizmet çalışanı yüklenmişse bu sekmede listelenir. Örneğin, yukarıdaki ekran görüntüsünde https://airhorner.com/ kapsamı için yüklenmiş bir hizmet çalışanı vardır.
  • Onay kutusu. Çevrimdışı onay kutusu, Geliştirici Araçları'nı çevrimdışı moda geçirir. Bu, panelinde bulunan çevrimdışı mod veya Komut Menüsü'ndeki Go offline seçeneğine eşdeğerdir.
  • Onay kutusu. Yeniden yüklenirken güncelle onay kutusu, hizmet çalışanını her sayfa yüklendiğinde güncellemeye zorlar.
  • Onay kutusu. Ağ için atla onay kutusu, hizmet çalışanını atlar ve tarayıcıyı istenen kaynaklar için ağa gitmeye zorlar.
  • Ağ istekleri bağlantısı sizi, hizmet işleyiciyle (is:service-worker-intercepted filtresi) ilgili müdahale edilen isteklerin listesini içeren paneline yönlendirir.
  • Güncelle bağlantısı, belirtilen hizmet çalışanını tek seferlik günceller.
  • Push düğmesi, yük olmadan push bildirimi (tickle olarak da bilinir) taklit eder.
  • Senkronize et düğmesi, arka plan senkronizasyonu etkinliğini taklit eder.
  • Kaydı iptal et bağlantısı, belirtilen hizmet çalışanının kaydını iptal eder. Bir hizmet çalışanının kaydını iptal etmenin ve depolama alanını ve önbellekleri tek bir düğme tıklamasıyla silmenin bir yolu için Depolama alanını temizle bölümüne göz atın.
  • Kaynak satırı, şu anda çalışan hizmet çalışanının ne zaman yüklendiğini gösterir. Bağlantı, hizmet çalışanının kaynak dosyasının adıdır. Bağlantıyı tıkladığınızda hizmet çalışanının kaynağına yönlendirilirsiniz.
  • Durum satırı, hizmet çalışanının durumunu gösterir. Bu satırdaki sayı (ekran görüntüsünde #16), hizmet çalışanının kaç kez güncellendiğini gösterir. Onay kutusu. Yeniden yüklemede güncelle onay kutusunu etkinleştirirseniz sayının her sayfa yüklendiğinde arttığını fark edersiniz. Durumun yanında bir başlat (hizmet çalışanı durmuşsa) veya durdur (hizmet çalışanı çalışıyorsa) bağlantısı görürsünüz. Hizmet çalışanları, tarayıcı tarafından herhangi bir zamanda durdurulup başlatılacak şekilde tasarlanmıştır. stop bağlantısını kullanarak hizmet işleyicinizi açıkça durdurmak bu durumu simüle edebilir. Hizmet çalışanınızı durdurmak, hizmet çalışanı tekrar başladığında kodunuzun nasıl davrandığını test etmenin mükemmel bir yoludur. Bu test, kalıcı genel durumla ilgili hatalı varsayımlar nedeniyle sık sık hataları ortaya çıkarır.
  • Clients satırı, hizmet çalışanının kapsamının belirlendiği kaynağı belirtir. Odak düğmesi, çoğunlukla birden fazla kayıtlı hizmet çalışanınız olduğunda kullanışlıdır. Farklı bir sekmede çalışan bir hizmet çalışanının yanındaki odak düğmesini tıklarsanız Chrome o sekmeye odaklanır.
  • Güncelleme Döngüsü tablosunda, hizmet çalışanının etkinlikleri ve bu etkinliklerin geçen süreleri (ör. yükleme, bekleme ve etkinleştirme) gösterilir. Her etkinliğin tam zaman damgasını görmek için Genişlet. Genişlet düğmelerini tıklayın.

    Etkinlikler ve zaman damgalarını

    Daha fazla bilgi için Hizmet çalışanı yaşam döngüsü başlıklı makaleyi inceleyin.

Hizmet çalışanı hatalara neden olursa Hizmet Çalışanları sekmesinde, Kaynak satırının yanında hataların sayısını içeren bir Hata. Hata simgesi gösterilir. Numarayı içeren bağlantı, sizi kaydedilen tüm hataların bulunduğu Konsol'a yönlendirir.

Konsolda hizmet çalışanı hataları.

Tüm hizmet işçileriyle ilgili bilgileri görmek için Hizmet İşçileri sekmesinin alt kısmındaki Tüm kayıtları göster'i tıklayın. Bu bağlantı, servis çalışanlarınızda daha fazla hata ayıklama yapabileceğiniz chrome://serviceworker-internals/?devtools sayfasına yönlendirir.

serviceworker-internals adresindeki hizmet çalışanı kayıtları.

Hizmet çalışanı önbellekleri

Önbelleğe Alma Depolama Alanı sekmesi, Önbelleğe Alma API'si (hizmet çalışanı) kullanılarak önbelleğe alınmış kaynakların salt okunur bir listesini sağlar.

Hizmet çalışanı önbelleği sekmesi.

Bir önbelleği ilk kez açıp ona kaynak eklediğinizde DevTools'un değişikliği algılayamayabileceğini unutmayın. Sayfayı yeniden yüklediğinizde önbelleği görürsünüz.

Açık iki veya daha fazla önbelleğiniz varsa bunları Önbellek Depolama Alanı açılır menüsünün altında görürsünüz.

Birden fazla hizmet çalışanı önbelleği.

Kota kullanımı

Önbellek Depolama sekmesindeki bazı yanıtlar "saydam" olarak işaretlenebilir. Bu, CORS etkinleştirilmemişken farklı bir kaynaktan (ör. CDN veya uzak API) alınan yanıtı ifade eder.

Alanlar arası bilgi sızıntısını önlemek için, depolama alanı kotası sınırlarını hesaplamak (ör. bir QuotaExceededistisna atlanıp atlanmadığı) ve navigator.storage API tarafından raporlamak için kullanılan opak yanıtın boyutuna önemli miktarda dolgu eklenir.

Bu dolgunun ayrıntıları tarayıcıdan tarayıcıya değişir. Ancak Google Chrome için bu, tek bir önbelleğe alınmış opak yanıtın genel depolama alanı kullanımına katkıda bulunduğu minimum boyutun yaklaşık 7 megabayt olduğu anlamına gelir. Depolama alanı kotası sınırlarını, opak kaynakların gerçek boyutuna göre beklediğinizden çok daha erken aşmanız kolay olabileceğinden, ne kadar opak yanıtı önbelleğe almak istediğinizi belirlerken bunu göz önünde bulundurmanız gerekir.

İlgili Rehberler:

Depoyu temizle

Depolama Alanını Temizle sekmesi, progresif web uygulamaları geliştirirken çok faydalı bir özelliktir. Bu sekme, tek bir düğme tıklamasıyla hizmet işçilerinin kaydını silmenize ve tüm önbellekleri ve depolama alanlarını temizlemenize olanak tanır. Daha fazla bilgi için aşağıdaki bölüme göz atın.

İlgili Rehberler:

Diğer uygulama paneli kılavuzları

Uygulama panelinin diğer bölmeleri hakkında daha fazla yardım için aşağıdaki kılavuzları inceleyin.

İlgili Rehberler: