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

Denetim panelinde çok müşterili destek

Artık Denetim panelini İstek Engelleme ve Yerel Geçersiz Kılma gibi diğer DevTools özellikleriyle birlikte kullanabilirsiniz.

Örneğin, Denetlemeler panel raporunuzda sayfanızın performans puanının 70 olduğunu ve en büyük performans fırsatlarınızdan birinin oluşturma işlemini engelleyen kaynakları ortadan kaldırmak olduğunu varsayalım.

İlk performans puanı 70'tir.

Şekil 1. İlk Performans puanı.

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

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

Denetlemeler paneli artık istek engellemeyle birlikte kullanılabildiğinden, önce görüntüleme engelleyen komut dosyaları için istekleri engelleyerek görüntüleme engelleyen komut dosyalarının yükleme performansınızı ne kadar etkilediğini hızlıca ölçebilirsiniz:

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

Şekil 3. Sorunlu komut dosyalarını engellemek için İstek Engelleme sekmesini kullanın.

Ardından sayfayı tekrar denetleyin:

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

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

Alternatif olarak, komut dosyası etiketlerinin her birine async özellikleri eklemek için Yerel Geçersiz Kılmalar'ı da kullanabilirsiniz. Ancak bu konuyu okuyucunun çözmesi için bir alıştırma olarak bırakacağız. Denemek için Çok müşterili demo sayfasına gidin. Videolu açıklama için bu tweet'e göz atabilirsiniz.

Chromium sorunu #991906

Ödeme işleyici hata ayıklama

Uygulama panelinin Arka Plan Hizmetleri bölümünde artık Ödeme İşleyici etkinlikleri desteklenmektedir.

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

    Ödeme işleyici etkinliklerini kaydetme.

    Şekil 5. Ödeme işleyici etkinliklerini kaydetme.

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

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

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

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

Chromium sorunu #980291

Denetimler panelinde Lighthouse 5.2

Denetimler panelinde artık Lighthouse 5.2 kullanılıyor. Yeni Üçüncü Taraf Kullanımı teşhis denetimi, ne kadar üçüncü taraf kodunun istendiğini ve bu üçüncü taraf kodunun sayfa yüklenirken ana ileti dizisini ne kadar süreyle engellediğini gösterir. Üçüncü taraf kodunun yükleme performansını nasıl düşürebileceği hakkında daha fazla bilgi edinmek için Üçüncü taraf kaynaklarınızı optimize etme başlıklı makaleyi inceleyin.

Lighthouse raporu kullanıcı arayüzündeki "Üçüncü Taraf Kullanımı" denetiminin ekran görüntüsü.

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

Chromium sorunu #772558

Performans panelinde Largest Contentful Paint

Performans panelinde yükleme performansını analiz ederken Zamanlamalar bölümünde artık Largest Contentful Paint (LCP) için bir işaretçi yer alıyor. LCP, görüntü alanında görünen en büyük içerik öğesinin oluşturma süresini bildirir.

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

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

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

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

    Özet sekmesinin İlişkili Düğüm bölümü.

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

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

Ana menüden DevTools sorunlarını bildirme

Geliştirici Araçları'nda bir hatayla karşılaşırsanız ve sorun kaydı oluşturmak isterseniz ya da Geliştirici Araçları'nı nasıl iyileştireceğinizle ilgili bir fikriniz varsa ve yeni bir özellik istemek istiyorsanız Ana Menü > Yardım > Geliştirici Araçları sorunu bildir'e giderek Geliştirici Araçları mühendislik ekibinin izleyicisinde bir sorun kaydı oluşturabilirsiniz. Glitch'te minimum, yeniden üretilebilir bir örnek sağlamak, ekibin hatayı düzeltme veya özellik isteğinizi uygulama kapasitesini önemli ölçüde artırır.

Yardım > Geliştirici Araçları sorunu bildir" width="800" height="604">

Şekil 10. Ana Menü > Yardım > Geliştirici Araçları sorunu bildir'e gidin.

Ö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şmenize, en yeni web platformu API'lerini test etmenize 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.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.