Geliştirici Araçları'ndaki Yenilikler (Chrome 78)

Denetimler panelinde çok müşterili destek

Artık Denetimler panelini İstek isteği gibi diğer Geliştirici Araçları özellikleriyle birlikte kullanabilirsiniz. Engelleme ve Yerel Geçersiz Kılmalar.

Örneğin, Denetimler paneli raporunuzun sayfanızın performans puanının 70 olduğunu söylediğini varsayalım ve en büyük performans fırsatlarınızdan biri oluşturma engelleyen kaynakları ortadan kaldırmaktır.

İlk Performans puanı 70'tir.

Şekil 1. İlk Performans puanı.

İlk raporda, oluşturma engelleyen 3 komut dosyasının sorun olduğu belirtiliyor.

Şekil 2. İlk raporda, oluşturma engelleyen 3 komut dosyasının sorun olduğu belirtiliyor.

Denetimler paneli artık istek engellemeyle birlikte kullanılabildiğinden oluşturma önleyici komut dosyalarının yükleme performansınızı ne kadar etkilediğini ölçmek için öncelikle bu komut dosyalarının oluşturma engelleme komut dosyaları için istekler:

Sorunlu komut dosyalarını engellemek için İstek Engelleme sekmesini kullanma.

Şekil 3. Sorunlu komut dosyalarını engellemek için Engelleme İsteğinde Bulun sekmesini kullanın.

Ardından sayfayı tekrar denetleyin:

İstek engelleme etkinleştirildikten sonra performans puanı 97'ye yükseldi.

Şekil 4. Sorunlu komut dosyalarını engelledikten sonra Performans puanı 97'ye yükseldi.

Alternatif olarak, komut dosyasının her birine async özellikleri eklemek için Yerel Geçersiz Kılmalar'ı kullanabilirsiniz. ancak "bunu okuyucu için bir alıştırma olarak bırakacağız". Denemek için Çok müşterili demoya gidin çıkar. Ayrıca, tanıtım videosu için bu tweet'e göz atabilirsiniz.

Chromium sorunu #991906

Ödeme İşleyici hata ayıklama

Uygulama panelinin Arka Plan Hizmetleri bölümü artık Ödeme İşleyici'yi destekliyor. etkinlikler.

  1. Uygulama paneline gidin.
  2. Ödeme İşleyici bölmesini açın.
  3. Kaydet'i tıklayın. Geliştirici Araçları, Ödeme İşleyici etkinliklerini 3 gün boyunca kaydeder. Bu süre, kapalı.

    Ödeme İşleyici etkinlikleri kaydediliyor.

    Şekil 5. Ödeme İşleyici etkinlikleri kaydediliyor.

  4. Ödeme İşleyici etkinlikleriniz farklı bir alanda gerçekleşiyorsa Diğer alanlardan etkinlikleri göster'i etkinleştirin. kaynak.

  5. Ödeme İşleyici etkinliğini tetikledikten sonra, etkinlik hakkında daha fazla bilgi edinmek için ilgili satırı tıklayın.

    Ödeme İşleyici etkinliğini görüntüleme.

    Şekil 6. Ödeme İşleyici etkinliğini görüntüleme.

Chromium sorunu #980291

Denetimler panelinde Lighthouse 5.2

Denetimler paneli şu anda Lighthouse 5.2'yi çalıştırıyor. Yeni Üçüncü Taraf Kullanımı teşhisi denetim, üçüncü taraf kodun ne kadar istendiğini ve üçüncü taraf kodun ne kadar süreyle engellendiğini gösterir ana ileti dizisine geri dönmesini sağlar. Daha fazla bilgi edinmek için Üçüncü taraf kaynaklarınızı optimize etme konusuna bakın üçüncü taraf kodun yükleme performansını nasıl düşürebileceğiyle ilgili bilgi edinin.

'Üçüncü Taraf Kullanımı'nın ekran görüntüsü denetimden geçmesi gerekiyor.

Şekil 7. Üçüncü taraf kullanımı denetimi.

Chromium sorunu #772558

Performans panelinde Largest Contentful Paint

Performans panelinde yük performansını analiz ederken artık Zamanlamalar bölümünde Largest Contentful Paint (LCP) için bir işaretçi içerir. LCP, görüntü alanında görünen en büyük içerik öğesi.

Zamanlamalar bölümündeki LCP işaretçisi.

Şekil 8. Zamanlamalar bölümündeki LCP işaretçisi.

LCP ile ilişkilendirilmiş DOM düğümünü vurgulamak için:

  1. Zamanlamalar bölümünde LCP işaretçisini tıklayın.
  2. Görüntü alanındaki düğümü vurgulamak için Özet sekmesinde İlgili Düğüm'ün üzerine gelin.

    Özet sekmesinin İlgili Düğüm bölümü.

    Şekil 9. Özet sekmesinin İlgili Düğüm bölümü.

  3. İlgili Düğüm'ü tıklayarak DOM Ağacı'nda seçin.

Ana menüden Geliştirici Araçları sorunlarını dosyalama

Geliştirici Araçları'nda bir hatayla karşılaşırsanız ve bir sorun bildirmek isterseniz veya bu durumun Geliştirici Araçları'nı iyileştirmek ve yeni bir özellik istemek için Ana Menü'ye gidin > Yardım > Bir Geliştirici Araçları sorunu ile Geliştirici Araçları mühendislik ekibinin izleyicisinde bir sorun oluşturun. Bunu sağlamak için Glitch'teki en küçük, tekrarlanabilir örnek, ekibin sorunları düzeltme becerisini önemli ölçüde artırıyor hatanızı giderip özellik isteğinizi uygulayın.

Yardım > Geliştirici Araçları sorunu bildir." genişlik="800" yükseklik="604">

Şekil 10. Ana Menü > Yardım > Geliştirici Araçları sorunu bildirin.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

  • Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
  • Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i Daha fazla > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
  • @ChromeDevTools adresinden tweet atabilirsiniz.
  • Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.