Chrome Geliştirici Araçları ile tahmin kurallarında hata ayıklama

Spekülasyon kuralları, bir önceki yayında ayrıntılı olarak açıklandığı şekilde sonraki sayfada gezinmeleri önceden getirmek ve önceden oluşturmak için kullanılabilir. Bu, sayfa yüklemelerinin çok daha hızlı, hatta anında yüklenmesini sağlayarak bu ek sayfada gezinme işlemleri için Önemli Web Verileri'ni büyük ölçüde iyileştirebilir.

Spekülasyon kurallarında hata ayıklamak zor olabilir. Bu durum özellikle önceden oluşturulmuş sayfalar için geçerlidir. Çünkü bu sayfalar, etkinleştirildiğinde geçerli sekmenin yerini alan gizli bir arka plan sekmesi gibi ayrı bir oluşturucuda oluşturulur. Bu nedenle, hataları ayıklamak için olağan Geliştirici Araçları seçenekleri her zaman kullanılamaz.

Chrome ekibi, spekülasyon kuralları hata ayıklaması için Geliştirici Araçları desteğini iyileştirmek amacıyla yoğun bir şekilde çalışıyor. Bu gönderide, bir sayfanın spekülasyon kurallarını, neden çalışmadıklarını ve geliştiricilerin daha bilinen Geliştirici Araçları seçeneklerini ne zaman kullanabileceğini ve ne zaman kullanılamayacağını anlamak için bu araçları kullanmanın çeşitli yollarını öğreneceksiniz.

"Öncesi" açıklaması şartlar

Çok sayıda "önceden" kafa karıştırıcı olabilir, o yüzden bunları açıklayarak başlayalım:

  • Önceden getirme: Gelecekteki performansı iyileştirmek için bir kaynağı veya dokümanı önceden getirme. Bu yayın, genellikle alt kaynakları önceden getirmek için kullanılan eski <link rel="prefetch"> seçeneği yerine Speculation Rules API kullanılarak dokümanları önceden getirme konusunu ele almaktadır.
  • Önceden işleme: Bu, önceden getirmenin bir adım ötesine geçer ve sayfanın tamamını kullanıcı o sayfaya gelmiş gibi oluşturur ancak kullanıcı gerçekten oraya gidiyorsa sayfayı gizli bir arka plan oluşturucu işleminde hazır tutar. Yine bu belgede de eski <link rel="prerender"> seçeneği (artık tam önceden işleme yapılmaz) yerine, Speculation Rules API, bu yeni sürümle ilgilidir.
  • Gezinme spekülasyonları: Tahmin kuralları tarafından tetiklenen yeni önceden getirme ve önceden işleme seçeneklerine ilişkin toplu terim.
  • Önceden yükleme: <link rel="preload">, önceden yükleme tarayıcı ve service çalışanı gezinme ön yüklemeleri dahil olmak üzere bir dizi teknoloji ve işlemi ifade edebilen aşırı yüklenmiş bir terim. Bu öğelere burada değinilmeyecek ancak söz konusu öğeler "gezinme spekülasyonlarından" açıkça ayırt edilebilmesi için terime dahil edilmiştir. terim.
ziyaret edin.

prefetch için tahmin kuralları

Spekülasyon kuralları, bir sonraki gezinmenin dokümanını önceden getirmek için kullanılabilir. Örneğin, aşağıdaki JSON bir sayfaya eklenirken, next.html ve next2.html önceden getirilir:

<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

Gezinmeyi önceden getirme işlemleri için tahmin kurallarının kullanılması, eski <link rel="prefetch"> söz dizimine kıyasla bazı avantajlara sahiptir (ör. daha anlamlı bir API ve sonuçların HTTP disk önbelleği yerine bellek önbelleğinde depolanması).

prefetch tahmin kuralında hata ayıkla

Tahmin kuralları tarafından tetiklenen önceden getirmeler, panelinde diğer getirmelerle aynı şekilde görülebilir:

Chrome Geliştirici Araçları&#39;nda, önceden getirilen dokümanları gösteren ağ paneli
Chrome Geliştirici Araçları'nda, önceden getirilen dokümanların gösterildiği ağ paneli

Kırmızı renkle vurgulanan iki istek, Tür sütununda görülebileceği gibi, önceden getirilen kaynaklardır. Bunlar, gelecekteki gezinmelerde olduğu için Lowest önceliğinde getirilir ve Chrome, geçerli sayfanın kaynaklarına öncelik verir.

Satırlardan birini tıkladığınızda Sec-Purpose: prefetch HTTP üst bilgisi de gösterilir. Bu istekler, sunucu tarafında bu şekilde tanımlanabilir:

Chrome Geliştirici Araçları&#39;nın önceden getirme üstbilgileri, Sec-Purpose&#39;a ayarlanmış olarak önceden getirme
Chrome Geliştirici Araçları'nın önceden getirme başlıkları Sec-Purpose öğesi önceden getirme olarak ayarlanmış şekilde

Tahmine dayalı yükleme sekmeleriyle prefetch hatalarını ayıklayın

Chrome Geliştirici Araçları'nın Uygulama panelindeki Arka plan hizmetleri bölümüne, tahmin kurallarında hata ayıklamaya yardımcı olması için yeni bir Tahmine dayalı yüklemeler bölümü eklendi:

Chrome Geliştirici Araçları, önceden getirme kuralını gösteren tahmine dayalı yükleme sekmeleri
Önceden getirme kuralını gösteren Chrome Geliştirici Araçları tahmine dayalı yükleme sekmeleri

Bu bölümde üç sekme vardır:

  • Geçerli sayfanın önceden işlenmiş durumunu listeleyen spekülatif yüklemeler.
  • Geçerli sayfada bulunan tüm kural gruplarını listeleyen kurallar.
  • Kural kümelerinden önceden getirilen ve önceden oluşturulmuş tüm URL'leri listeleyen spekülasyonlar.
ziyaret edin.

Önceki ekran görüntüsünde Spekülasyonlar sekmesi gösterilmektedir. Bu örnek sayfada, 3 sayfanın önceden getirilmesi için tek bir tahmin kuralı grubu olduğunu görebiliyoruz. Bu önceden getirme işlemlerinden ikisi başarılı, diğeri başarısız olmuştur. Kural grubu'nun yanındaki simge tıklayarak Öğeler panelinde kural grubunun kaynağına gidebilirsiniz. Alternatif olarak, Durum bağlantısını tıklayarak bu kural grubuna göre filtrelenmiş Spekülasyonlar sekmesine gidebilirsiniz.

Spekülasyonlar sekmesinde tüm hedef URL'ler, işlemle (önceden getirme veya önceden işleme), hangi kural grubundan (bir sayfada birden fazla olabilir) geldikleri ve her bir tahminin durumu listelenir:

Önceden getirilen URL&#39;leri durumlarıyla birlikte gösteren Chrome Geliştirici Araçları Spekülasyonlar sekmesi
Önceden getirilen URL'leri durumlarıyla birlikte gösteren Chrome Geliştirici Araçları Spekülasyonlar sekmesi

URL'lerin üzerinde, tüm kural gruplarındaki URL'leri veya yalnızca belirli bir kural grubundaki URL'leri göstermek için bir açılır liste kullanılabilir. Bu bölümün altında ise tüm URL'ler listelenir. Bir URL'yi tıklayarak daha ayrıntılı bilgi edinebilirsiniz.

Bu ekran görüntüsünde, next3.html sayfasının (mevcut olmayan ve bu nedenle 2xx olmayan bir HTTP durum kodu olan 404 hatası döndüren) hata nedenini görebiliyoruz.

Özet sekmesi (Tahmine dayalı yüklemeler), bu sayfada önceden getirme veya önceden işleme kullanılıp kullanılmadığını göstermek üzere Bu sayfa için tahmine dayalı yükleme durumu raporunu gösterir.

Önceden getirilen bir sayfa için şuraya gidildiğinde başarılı bir mesaj görmeniz gerekir:

Chrome Geliştirici Araçları Tahmine dayalı yüklemeler sekmesi, başarılı bir önceden getirme işlemini gösteriyor
Başarılı bir önceden getirme işleminin gösterildiği Chrome Geliştirici Araçları Tahmine dayalı yüklemeler sekmesi

Eşsiz spekülasyonlar

Önceden getirme veya önceden işlemenin kullanılmasına yol açmayan tahmin kurallarına sahip bir sayfada gezinme gerçekleştiğinde, sekmenin ek bir bölümünde URL'nin tahmin URL'lerinin hiçbiriyle neden eşleşmediğiyle ilgili daha fazla ayrıntı gösterilir. Bu, spekülasyon kurallarınızdaki yazım hatalarını tespit etmenize yardımcı olur.

Geçerli URL&#39;nin, bir önceki sayfanın tahmin kurallarındaki URL&#39;lerin hiçbiriyle eşleşmediğini gösteren Chrome Geliştirici Araçları Tahmine dayalı yüklemeler sekmesi
Eşleşmeyen URL'ler Geliştirici Araçları'nda vurgulanıyor

Örneğin burada next4.html adresine gittik, ancak yalnızca next.html, next2.html veya next3.html önceden getirme işlevi olduğundan, bunun bu üç kuraldan hiçbiriyle tam olarak eşleşmediğini görebiliriz.

Tahmine dayalı yüklemeler sekmeleri, tahmin kurallarının kendilerinde hata ayıklamak ve JSON'de söz dizimi hatalarını bulmak için çok kullanışlıdır.

paneli, önceden getirmelerin kendilerine daha tanıdık gelecek bir yerdir. Önceden getirme hatası örneğinde, önceden getirme için 404 kodunu burada görebilirsiniz:

Başarısız bir önceden getirme işlemini gösteren Chrome Geliştirici Araçları Ağ paneli
Başarısız bir önceden getirme işleminin gösterildiği Chrome Geliştirici Araçları Ağ paneli

Bununla birlikte, Tahmine dayalı yüklemeler sekmeleri, bir sonraki bölümde ele alınacak olan tahmin kuralları önceden işleme konusunda çok daha yararlı hale gelir.

prerender için tahmin kuralları

Önceden işleme tahmin kuralları, önceden getirme spekülasyon kurallarıyla aynı söz dizimini uygular. Örneğin:

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

Bu kural grubu, belirtilen sayfaların tamamen yüklenmesini ve oluşturulmasını tetikler (belirli kısıtlamalara tabidir). Bu, ekstra kaynak maliyetlerine rağmen anında yükleme deneyimi sağlayabilir.

Bununla birlikte, önceden getirmelerden farklı olarak bunlar Chrome'da ayrı bir oluşturma işleminde getirilip oluşturulduğundan bunlar panelinde görünmez. Bu, Tahmine dayalı yüklemeler sekmelerinin, önceden işleme spekülasyon kurallarında hata ayıklamak için daha önemli olmasını sağlar.

Tahmine dayalı yüklemeler sekmeleriyle prerender hatalarını ayıklayın

Üç sayfayı önceden getirmek yerine, önceden işlemeyi deneyen benzer bir demo sayfasında gösterildiği gibi, aynı Tahmine dayalı yüklemeler ekranları, önceden işleme tahmin kuralları için kullanılabilir:

Chrome Geliştirici Araçları Spekülatif, önceden işleme spekülasyon kuralları içeren bir sayfa için sekmeleri yükler
Chrome Geliştirici Araçları spekülatif, önceden işleme spekülasyon kuralları içeren bir sayfa için sekmeleri yüklüyor

Burada yine üç URL'den birinin önceden işlenemediğini ve geliştiricilerin 2 Hazır, 1 Hata bağlantısını tıklayarak Spekülasyonlar sekmesindeki her URL için ayrıntıları alabileceğini tekrar görüyoruz.

Chrome 121'de doküman kuralları desteğini kullanıma sunduk. Bu, tarayıcının belirli bir URL grubunu listelemek yerine bunları sayfadaki aynı kaynak bağlantılardan almasını sağlar:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": { "href_matches": "/not-safe-to-prerender/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Bu örnekte, önceden işleme adayları olarak /not-safe-to-prerender ile başlayanlar hariç aynı kaynak bağlantılarının tümü seçilir.

Ayrıca, eagerness önceden işlemesini moderate olarak ayarlar. Bu, bağlantının üzerine gelindiğinde veya tıklandığında gezinmelerin önceden işlendiği anlamına gelir.

Tahmine dayalı kurallar demo sitesinde buna benzer kurallar vardır ve bu sitedeki yeni Tahmine dayalı yüklemeler bölümünün kullanılması, tarayıcının sayfada bulduğu tüm uygun URL'ler listelendiği için bu yeni sekmenin kullanışlılığını gösterir:

Tetiklenmeyen URL&#39;lerin yer aldığı Chrome Geliştirici Araçları Spekülasyonlar sekmesi
Tetiklenmeyen URL'lerin yer aldığı Chrome Geliştirici Araçları Spekülasyonlar sekmesi

Bunlar için önceden işleme süreci başlamadığından Durum bölümü Tetiklenmedi olarak gösterilir. Bununla birlikte, işaretçiyi bağlantıların üzerinde tuttuğumuzda, her bir URL önceden işlendiğinde durumun değiştiğini görürüz:

Önceden işlenmiş sayfaların tetiklendiği Chrome Geliştirici Araçları Spekülasyonlar sekmesi
Önceden oluşturulmuş sayfaların tetiklendiği Chrome Geliştirici Araçları Spekülasyonlar sekmesi

Chrome, moderate istekliliği için en fazla 2 önceden işleme de dahil olmak üzere önceden işlemelerle ilgili sınırlar belirlemiştir. Bu nedenle, 3. bağlantının üzerine geldikten sonra bu URL'nin hata nedenini görürüz:

Başarısız önceden yüklemelerin gösterildiği Chrome Geliştirici Araçları Spekülasyonlar sekmesi gösteriliyor
Başarısız önceden yüklemelerin gösterildiği Chrome Geliştirici Araçları Spekülasyonlar sekmesi

Diğer Geliştirici Araçları panelleriyle prerender hatalarını ayıklayın

Önceden getirmelerin aksine, önceden işlenmiş sayfalar kendi sahne arkası oluşturucularında oluşturulduğundan paneli gibi Geliştirici Araçları panellerindeki mevcut oluşturma işlemlerinde görünmez.

Ancak artık Geliştirici Araçları panelleri tarafından kullanılan oluşturucuyu sağ üstteki açılır menüyü kullanarak veya panelin üst kısmından bir URL seçip İncele'yi seçerek değiştirebilirsiniz:

Chrome Geliştirici Araçları artık ilgili bilgilerin gösterildiği oluşturucuları değiştirmenize olanak tanıyor
Chrome Geliştirici Araçları artık ilgili bilgilerin gösterildiği oluşturucuları değiştirmenize olanak tanıyor

Bu açılır liste (ve seçilen değer), paneli gibi diğer tüm panellerde de paylaşılır. İstenen sayfanın önceden işlenmiş sayfa olduğunu görebilirsiniz.

Önceden oluşturulmuş sayfa için ağ isteklerini gösteren Chrome Geliştirici Araçları Ağ paneli
Önceden oluşturulmuş sayfa için ağ isteklerini gösteren Chrome Geliştirici Araçları ağ paneli

Bu kaynakların HTTP üstbilgilerine baktığımızda, tümünün Sec-Purpose: prefetch;prerender başlığı ile ayarlandığını görüyoruz:

Önceden işlenmiş bir sayfanın Sec-Purpose başlığını gösteren Chrome Geliştirici Araçları ağ paneli
Önceden işlenmiş bir sayfanın ikinci amacı başlığını gösteren Chrome Geliştirici Araçları ağ paneli

Alternatif olarak, sayfa içeriklerini görebileceğiniz Elements panelidir. Örneğin, aşağıdaki ekran görüntüsünde yer alan <h1> öğesinin önceden oluşturulmuş sayfaya ait olduğunu görüyoruz.

Önceden oluşturulmuş sayfa için Chrome Geliştirici Araçları Öğe paneli
Önceden oluşturulmuş sayfa için Chrome Geliştirici Araçları öğe paneli

Alternatif olarak, önceden işlenmiş sayfa tarafından yayınlanan konsol günlüklerini görebileceğiniz Konsol paneli:

Önceden oluşturulmuş bir sayfadan konsol çıkışını gösteren Chrome Geliştirici Araçları konsol paneli
Önceden oluşturulmuş bir sayfanın konsol çıkışını gösteren Chrome Geliştirici Araçları konsol paneli

Önceden işlenmiş sayfada spekülasyon kurallarında hata ayıkla

Önceki bölümlerde, önceden işlemeyi başlatan sayfadaki önceden işlenmiş sayfalarda nasıl hata ayıklanacağı anlatılmaktadır. Bununla birlikte, önceden işlenmiş sayfaların hata ayıklama bilgileri sağlamaları da mümkün olabilir. Bunun için Analytics çağrıları yaparak veya konsola giriş yaparak bu bilgileri önceki bölümde açıklanan şekilde görüntüleyebilirsiniz.

Ayrıca, önceden işlenmiş bir sayfa, oraya giden kullanıcı tarafından etkinleştirildikten sonra Tahmine dayalı yüklemeler sekmesi bu durumu ve sayfanın başarıyla önceden işlenip işlenmediğini gösterir. Neden yapıldığına dair bir açıklama önceden oluşturulamıyorsa:

Chrome Geliştirici Araçları Tahmine dayalı yüklemeler sekmesi, hem başarılı hem de başarısız olan önceden işlenmiş sayfayı gösteren
Hem başarılı hem de başarısız olan önceden işlenmiş sayfayı gösteren Chrome Geliştirici Araçları Tahmine dayalı yüklemeler sekmesi

Ayrıca (önceden getirmede olduğu gibi), geçerli sayfayla eşleşmeyen tahmin kurallarına sahip bir sayfada gezinirken URL'lerin, Tahmine dayalı yüklemeler sekmesinde bir önceki sayfanın tahmin kurallarında ele alınan URL'lerle neden eşleşmediğini göstermeye çalışır:

Chrome Geliştirici Araçları Tahmine dayalı yüklemeler sekmesi, mevcut URL ile önceki sayfada kapsanan URL uyuşmazlıklarını gösterir
URL uyuşmazlıklarını gösteren Chrome Geliştirici Araçları

Sonuç

Bu yayında, geliştiricilerin önceden getirme ve önceden işleme spekülasyon kurallarında hata ayıklamak için kullanabilecekleri çeşitli yöntemleri gösterdik. Ekip, spekülasyon kuralları için araçlar üzerinde çalışmaya devam ediyor. Bu heyecan verici yeni API'de hata ayıklama konusunda başka hangi yolların faydalı olabileceği konusunda geliştiricilerden önerilerinizi duymak isteriz. Geliştiricilerin, özellik istekleri veya tespit edilen hatalar için Chrome Sorun Takip Aracı'nda sorun bildirmelerini öneririz.

Teşekkür

Nubelson Fernandes'in Unsplash'teki küçük resmi.