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

Jecelyn Yeen

Yeni Medya paneli

Geliştirici Araçları, artık medya oynatıcılarla ilgili bilgileri Medya panelinde gösteriyor.

Yeni Medya paneli

Geliştirici Araçları'ndaki yeni medya panelinden önce video oynatıcılarla ilgili günlük kaydı ve hata ayıklama bilgileri chrome://media-internals adresinde bulunabilir.

Yeni Medya paneli; etkinlikleri, günlükleri, özellikleri ve kare kod çözme işlemlerinin zaman çizelgesini video oynatıcının kendisiyle aynı sekmede görüntülemenin daha kolay bir yolunu sunar. Canlı görüntülemeyi ve olası sorunları daha hızlı şekilde inceleyebilir (ör. neden bırakılan kareler, JavaScript'in oynatıcıyla beklenmedik bir şekilde etkileşim kurma nedeni).

Chromium sorunu: 1018414

Öğeler paneli içerik menüsünden düğüm ekran görüntülerini alın

Artık Öğeler panelindeki içerik menüsünü kullanarak düğüm ekran görüntülerini yakalayabilirsiniz.

Örneğin, öğeyi sağ tıklayıp Düğüm ekran görüntüsü yakala'yı seçerek içerik tablosunun ekran görüntüsünü alabilirsiniz.

Düğüm ekran görüntülerini al

Chromium sorunu: 1100253

Sorunlar sekmesi güncellemeleri

Konsol panelindeki Sorunlar uyarı çubuğunun yerini normal mesaj aldı.

Konsol mesajındaki sorunlar

Üçüncü taraf çerez sorunları artık Sorunlar sekmesinde varsayılan olarak gizleniyor. Bunları görüntülemek için yeni Üçüncü taraf çerezi sorunlarını dahil et onay kutusunu etkinleştirin.

üçüncü taraf çerez sorunları onay kutusu

Chromium sorunları: 1096481, 1068116, 1080589

Eksik yerel yazı tipleri emülasyonu

Oluşturma sekmesini açın ve @font-face kurallarında eksik local() kaynakları emüle etmek için yeni Yerel yazı tiplerini devre dışı bırak özelliğini kullanın.

Örneğin, cihazınıza "Rubik" yazı tipi yüklendiğinde ve @font-face src kuralı bu yazı tipini local() yazı tipi olarak kullandığında, Chrome cihazınızdaki yerel yazı tipi dosyasını kullanır.

Yerel yazı tiplerini devre dışı bırak etkinleştirildiğinde Geliştirici Araçları, local() yazı tiplerini yoksayar ve ağdan getirir.

Eksik yerel yazı tipleri emülasyonu

Geliştiriciler ve tasarımcılar genellikle geliştirme sırasında aynı yazı tipinin iki farklı kopyasını kullanırlar:

  • Tasarım araçlarınız için yerel bir yazı tipi ve
  • Kodunuz için bir web yazı tipi

Yerel yazı tiplerini devre dışı bırakmak şunları kolaylaştırır:

  • Web yazı tipleri yükleme performansı ve optimizasyonu için hata ayıklayın ve ölçün
  • CSS @font-face kurallarınızın doğruluğunu doğrulayın
  • Web yazı tipleri ve yerel sürümleri arasındaki farkları öğrenin

Chromium sorunu: 384968

Etkin olmayan kullanıcılar emülasyonu

Idle Detection API, geliştiricilerin etkin olmayan kullanıcıları tespit etmesini ve boşta kalma durumu değişikliklerine tepki vermesini sağlar. Artık gerçek boşta kalma durumunun değişmesini beklemek yerine, Sensörler sekmesindeki boşta kalma durumu değişikliklerini hem kullanıcı durumu hem de ekran durumu için emüle etmek amacıyla Geliştirici Araçları'nı kullanabilirsiniz. Sensörler sekmesini Çekmece'den açabilirsiniz.

Etkin olmayan kullanıcılar emülasyonu

Chromium sorunu: 1090802

prefers-reduced-data emülasyonu

prefers-reduced-data medya sorgusu, kullanıcıya sayfanın oluşturulması için daha az veri kullanan alternatif içerik sunmayı tercih edip etmediğini algılar.

Artık prefers-reduced-data medya sorgusunu emüle etmek için Geliştirici Araçları'nı kullanabilirsiniz.

tercihen-azaltılmış-veri emülasyonu

Chromium sorunu: 1096068

Yeni JavaScript özellikleri için destek

Geliştirici Araçları artık en yeni JavaScript dil özelliklerinden bazılarını daha iyi destekliyor:

  • Mantıksal atama operatörleri: Geliştirici Araçları artık Konsol ve Kaynaklar panellerinde yeni &&=, ||= ve ??= operatörleriyle mantıksal atamayı desteklemektedir.
  • Sayısal ayırıcıları kolayca yazın: Geliştirici Araçları artık Kaynaklar panelindeki sayısal ayırıcıları düzgün şekilde yazdırıyor.

Chromium sorunları: 1086817, 1080569

Lighthouse 6.2 panelindeki Lighthouse 6.2

Lighthouse paneli şu anda Lighthouse 6.2'yi çalıştırmaktadır. Değişikliklerin tam listesi için sürüm notlarına göz atın.

Resmin boyutunu değiştir

Lighthouse 6.2'deki yeni denetimler:

  • Uzun ana iş parçacığı görevlerinden kaçının. Ana iş parçacığındaki en uzun görevleri bildirir. Bu, giriş gecikmesine en çok katkıda bulunanları belirlemek için kullanışlıdır.
  • Bağlantılar taranabilir olmalıdır. Bağlantıların keşfedilebilmesi için bağlantı öğelerinin href özelliğinin uygun bir hedefe bağlantı verip vermediğini kontrol edin.
  • Boyutlandırılmamış resim öğeleri - Resim öğelerinde açıkça belirtilmiş bir width ve height ayarlanıp ayarlanmadığını kontrol edin. Uygunsuz resim boyutu, düzen kaymalarını azaltabilir ve CLS'yi iyileştirebilir.
  • Birleştirilmemiş animasyonlardan kaçının. Titiz görünen ve CLS'yi azaltan birleştirilmemiş animasyonları raporlar.
  • unload etkinliklerini dinler. unload etkinliğini bildirir. unload etkinliği güvenilir bir şekilde tetiklenmediğinden, bunun yerine pagehide veya visibilitychange etkinliklerini kullanabilirsiniz.

Lighthouse 6.2'de güncellenmiş denetimler:

  • Kullanılmayan JavaScript'i kaldırın. Lighthouse artık bir sayfanın herkes tarafından erişilebilen JavaScript kaynak eşlemeleri varsa denetimi geliştirecek.

Chromium sorunu: 772558

Hizmet Çalışanları bölmesindeki "diğer kaynaklar" girişinin kullanımdan kaldırılması

Geliştirici Araçları, artık diğer kaynaklardan gelen hizmet çalışanlarının tam listesini yeni bir tarayıcı sekmesinde görebileceğiniz bir bağlantı sunuyor: chrome://serviceworker-internals/?devtools.

Geliştirici Araçları'nda eskiden Uygulama paneli > Hizmet çalışanları bölmesinin altında iç içe yerleştirilmiş bir liste gösteriliyordu.

Diğer kaynaklara bağlantı oluşturun

Chromium sorunu: 807440

Filtrelenen öğeler için kapsam özetini göster

Geliştirici Araçları, Kapsam sekmesinde filtreler uygulandığında artık kapsam bilgilerinin özetini yeniden hesaplayıp dinamik olarak gösteriyor. Önceden Kapsam sekmesi her zaman tüm kapsam bilgilerinin bir özetini gösteriyordu.

Aşağıdaki örnekte, özetin CSS filtresi uygulandıktan sonra ilk başta 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. ve ardından 57 kB of 604 kB (10%) used so far. 546 kB unused. yazdığına dikkat edin.

Filtrelenen öğelerin kapsam özeti

Chromium sorunu: 1061385

Uygulama panelinde yeni çerçeve ayrıntıları görünümü

Geliştirici Araçları artık her kare için ayrıntılı bir görünüm gösteriyor. Bu araca, Uygulama panelindeki Çerçeveler menüsünün altındaki bir çerçeveyi tıklayarak erişebilirsiniz.

Uygulama panelinde yeni çerçeve ayrıntıları görünümü

Chromium sorunu: 1093247

Açık pencereler için çerçeve ayrıntıları

Geliştirici Araçları artık açık pencereler / pop-up'ları çerçeve ağacının altında da gösteriyor. Açılan pencerelerin çerçeve ayrıntıları görünümü ek güvenlik bilgileri içerir.

Pencere çerçevesi ayrıntıları açıldı

Chromium sorunu: 1107766

Güvenlik ve yalıtım bilgileri (COEP / COOP)

Geliştirici Araçları artık çerçeve ayrıntılarında güvenli bağlam, Cross-Origin-Embedder-Policy (COEP) ve Cross-Origin-Opener-Policy (COOP) gösterir.

Güvenlik ve yalıtım bilgileri

Yakında çerçeve ayrıntıları görünümüne daha fazla güvenlik bilgisi eklenecek.

Chromium sorunu: 1051466

Öğeler ve Ağ paneli güncellemeleri

Stiller bölmesinde erişilebilir renk önerisi

Geliştirici Araçları artık düşük renk kontrastlı metinler için renk önerileri sunuyor.

Aşağıdaki örnekte, h1 düşük kontrastlı metin içeriyor. Bunu düzeltmek için Stiller bölmesinde color özelliğinin renk seçiciyi açın. Kontrast oranı bölümünü genişlettikten sonra Geliştirici Araçları, AA ve AAA renk önerileri sağlar. Rengi uygulamak için önerilen rengi tıklayın.

Chromium sorunu: 1093227

Nesne panelindeki Özellikler bölmesini yeniden etkinleştir

Özellikler bölmesi geri döndü ve Chrome 84'te kullanımdan kaldırıldı. Geliştirici Araçları'nın gelecekteki bir sürümünde, öğelerin özelliklerini inceleme iş akışını iyileştireceğiz.

Nesne panelindeki Özellikler bölmesi

Chromium sorunu: 1105205, 1116085

Ağ panelinde kullanıcılar tarafından okunabilir X-Client-Data başlık değerleri

Geliştirici Araçları, Ağ panelinde bir ağ kaynağını incelerken artık Başlıklar bölmesindeki tüm X-Client-Data başlık değerlerini kod olarak biçimlendiriyor.

X-Client-Data HTTP başlığı, tarayıcınızda etkinleştirilen deneme kimliklerinin ve Chrome işaretlerinin listesini içerir. Ham başlık değerleri; base 64 olarak kodlanmış, serileştirilmiş protokol arabellekleri olduğundan opak dizeler gibi görünür. İçerikleri geliştiriciler için daha şeffaf hale getirmek amacıyla Geliştirici Araçları artık kodu çözülmüş değerleri gösteriyor.

Kullanıcıların okuyabileceği "X-Client-Data" başlık değerleri

Chromium sorunu: 1103854

Stiller bölmesinde özel yazı tiplerini otomatik tamamla

İçe aktarılan yazı tipi yüzleri, artık Stiller bölmesinde font-family özelliği düzenlenirken CSS otomatik tamamlama listesine ekleniyor.

Bu örnekte 'Noto Sans', yerel makinede yüklenen özel bir yazı tipidir. CSS tamamlama listesinde gösterilir. Daha önce öyle değildi.

Özel yazı tiplerini otomatik tamamla

Chromium sorunu: 1106221

Ağ panelinde kaynak türünü sürekli göster

Geliştirici Araçları artık orijinal ağ isteğiyle aynı kaynak türünü sürekli olarak gösteriyor ve yönlendirme gerçekleştiğinde (durum 302) Tür sütun değerine / Redirect ekliyor.

Daha önce Geliştirici Araçları, türü bazen Other olarak değiştiriyordu.

Yönlendirme kaynağı türünü göster

Chromium sorunu: 997694

Öğeler ve Ağ panellerindeki düğmeleri temizle

Stiller bölmesindeki ve Ağ panelindeki filtre metin kutularının yanı sıra Öğeler panelindeki DOM arama metin kutusunda ise artık Temizle düğmesi bulunmaktadır. Temizle'yi tıkladığınızda girdiğiniz tüm metinler kaldırılır.

Öğeler ve Ağ panellerindeki düğmeleri temizle

Chromium sorunu: 1067184

Ö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ü