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

Denetimler panelinde çok müşterili destek

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

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

İ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ğine göre öncelikle oluşturma engelleme komut dosyaları için istekleri engelleyerek oluşturma engelleme komut dosyalarının yükleme performansınızı ne kadar etkilediğini hızlı bir şekilde ölçebilirsiniz:

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ı etiketlerinin 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. 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 etkinliklerini destekliyor.

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

    Ödeme İşleyici etkinlikleri kaydediliyor.

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

  4. Ödeme İşleyici etkinlikleriniz farklı bir kaynakta gerçekleşiyorsa Diğer alanlardan gelen etkinlikleri göster seçeneğini etkinleştirin.

  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şhis denetimi, üçüncü taraf kodu için ne kadar istekte bulunulduğunu ve bu üçüncü taraf kodunun, sayfa yüklenirken ana iş parçacığını ne kadar süreyle engellediğini bildirir. Üçüncü taraf kodun yükleme performansını nasıl düşürebileceği hakkında daha fazla bilgi edinmek için Üçüncü taraf kaynaklarınızı optimize etme bölümüne bakın.

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ük performansını analiz ederken, Zamanlamalar bölümünde artık Largest Contentful Paint (LCP) için bir işaretçi bulunuyor. 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ş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 Geliştirici Araçları'nı nasıl iyileştireceğiniz konusunda bir fikir edinip yeni bir özellik isteğinde bulunmak isterseniz Ana Menü > Yardım > Geliştirici Araçları sorunu bildir'e giderek Geliştirici Araçları mühendislik ekibinin izleyicisinde bir sorun oluşturun. Glitch ile ilgili minimum düzeyde, tekrarlanabilir bir örnek sunmak, ekibin hatanızı düzeltme veya özellik isteğinizi uygulama becerisini önemli ölçüde artırır.

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

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

Ö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ı'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını 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.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü