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

Yeni Medya paneli

DevTools, medya oynatıcı bilgilerini artık Medya panelinde gösterir.

DevTools'taki yeni medya panelinden önce, video oynatıcılarla ilgili günlük kaydı ve hata ayıklama bilgileri chrome://media-internals'te bulunabiliyordu.

Yeni Medya paneli, etkinlikleri, günlükleri, mülkleri ve kare kod çözme zaman çizelgesini video oynatıcıyla aynı tarayıcı sekmesinde görüntülemenin daha kolay bir yolunu sunar. Olası sorunları (ör. kare atlama nedenlerinin ne olduğu, JavaScript'in oynatıcıyla beklenmedik bir şekilde etkileşime geçmesinin nedeni) canlı olarak görüntüleyebilir ve daha hızlı inceleyebilirsiniz.

Chromium sorunu: 1018414

Nesneler paneli içerik menüsü üzerinden düğüm ekran görüntüsü alma

Artık Öğeler panelindeki içerik menüsü aracılığıyla düğüm ekran görüntüleri alabilirsiniz.

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

Chromium sorunu: 1100253

Sorunlar sekmesi güncellemeleri

Konsol panelindeki Sorunlar uyarı çubuğu artık normal bir mesajla değiştirildi.

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

Chromium sorunları: 1096481, 1068116, 1080589

Eksik yerel yazı tiplerini taklit etme

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

Örneğin, cihazınızda "Rubik" yazı tipi yüklüyse ve @font-face src kuralı bunu local() yazı tipi olarak kullanıyorsa Chrome, cihazınızdaki yerel yazı tipi dosyasını kullanır.

Yerel yazı tiplerini devre dışı bırak etkinleştirildiğinde DevTools, local() yazı tiplerini yoksayar ve ağdan getirir.

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

• 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 aşağıdakileri yapmanızı kolaylaştırır:

• Web yazı tiplerinin yükleme performansını ve optimizasyonunu hata ayıklama ve ölçme
• CSS @font-face kurallarınızın doğruluğunu doğrulama
• Web yazı tipleri ile yerel sürümleri arasındaki farkları keşfetme

Chromium sorunu: 384968

Etkin olmayan kullanıcıları taklit etme

Etkin Olmayan Kullanıcıları Tespit Etme API'si, geliştiricilerin etkin olmayan kullanıcıları tespit etmesine ve etkin olmayan durum değişikliklerine tepki vermesine olanak tanır. Artık gerçek boş durumda kalma durumunun değişmesini beklemek yerine, hem kullanıcı durumu hem de ekran durumu için Sensörler sekmesindeki boş durumda kalma durumu değişikliklerini taklit etmek üzere DevTools'u kullanabilirsiniz. Çekmece'den Sensörler sekmesini açabilirsiniz.

Chromium sorunu: 1090802

prefers-reduced-data emülasyonu

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

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

Chromium sorunu: 1096068

Yeni JavaScript özellikleri için destek

DevTools, en son JavaScript dil özelliklerinden bazıları için artık daha iyi destek sunar:

• Mantıksal atama operatörleri: DevTools artık Konsolu ve Kaynaklar panellerindeki yeni operatörler &&=, ||= ve ??= ile mantıksal atamayı destekliyor.
• Sayı ayırıcıları okunaklı hâle getirme: DevTools artık Kaynaklar panelindeki sayı ayırıcıları düzgün bir şekilde okunaklı hâle getiriyor.

Chromium sorunları: 1086817, 1080569

Lighthouse panelinde Lighthouse 6.2

Lighthouse panelinde artık Lighthouse 6.2 sürümü kullanılıyor. Değişikliklerin tam listesi için sürüm notlarına göz atın.

Lighthouse 6.2'deki yeni denetimler:

• Uzun ana iş parçacığı görevlerinden kaçının. Ana ileti dizisindeki en uzun görevleri raporlar; giriş gecikmesine en çok katkıda bulunanları belirlemekte faydalıdır.
• Bağlantılar taranabilir olmalıdır. Bağlantı öğelerinin href özelliğinin uygun bir hedefe bağlantı verip vermediğini kontrol edin. Böylece bağlantılar keşfedilebilir.
• Boyutlandırılmamış resim öğeleri: Resim öğelerinde açıkça belirtilmiş bir width ve height olup olmadığını kontrol edin. Açıkça belirtilen resim boyutu, düzen kaymalarını azaltabilir ve CLS'yi iyileştirebilir.
• Bileşik olmayan animasyonlardan kaçının. Kalitesiz görünen ve CLS'yi düşüren birleştirilmemiş animasyonları bildirir.
• 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üncellenen denetimler:

• Kullanılmayan JavaScript'i kaldırın. Lighthouse, bir sayfanın herkese açık JavaScript kaynak eşlemeleri varsa denetleme işlemini artık iyileştirir.

Chromium sorunu: 772558

Hizmet Çalışanları bölmesinde "diğer kaynaklar" listelemesinin kullanımdan kaldırılması

Geliştirici Araçları artık başka kaynaklardan gelen hizmet çalışanlarının tam listesini yeni bir tarayıcı sekmesinde görüntülemek için bir bağlantı sağlıyor: chrome://serviceworker-internals/?devtools.

Daha önce DevTools, Uygulama paneli > Hizmet çalışanları bölmesinin altında iç içe yerleştirilmiş bir liste gösteriyordu.

Chromium sorunu: 807440

Filtrelenmiş öğeler için kapsam özetini gösterme

DevTools artık Kapsam sekmesinde filtreler uygulandığında kapsam bilgilerini dinamik olarak yeniden hesaplayıp özetini gösterir. Daha önce Kapsam sekmesinde her zaman tüm kapsam bilgilerinin özeti gösteriliyordu.

Aşağıdaki örnekte, özetin başlangıçta 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused., CSS filtrelemesi uygulandıktan sonra ise 57 kB of 604 kB (10%) used so far. 546 kB unused. olduğunu fark edin.

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. Uygulama panelindeki Çerçeveler menüsünden bir çerçeveyi tıklayarak erişebilirsiniz.

Chromium sorunu: 1093247

Açık pencerelerin çerçeve ayrıntıları

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

Chromium sorunu: 1107766

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

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

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

Chromium sorunu: 1051466

Öğeler ve Ağ paneli güncellemeleri

Stiller bölmesinde erişilebilir renk önerisi

DevTools artık düşük renk kontrastına sahip metinler için renk önerileri sunuyor.

Aşağıdaki örnekte h1 metninin kontrastı düşüktür. Bu sorunu düzeltmek için Stil bölmesindeki color mülkünün renk seçicisini açın. Kontrast oranı bölümünü genişlettikten sonra DevTools, AA ve AAA renk önerileri sunar. Önerilen rengi uygulamak için rengi tıklayın.

Chromium sorunu: 1093227

Nesneler panelinde Özellikler bölmesini yeniden etkinleştirme

Chrome 84'te desteği sonlandırılan Özellikler bölmesi geri döndü. DevTools'un gelecekteki bir sürümünde, öğelerin özelliklerini incelemek için iş akışını iyileştireceğiz.

Chromium sorunu: 1105205, 1116085

Ağ panelinde kullanıcılar tarafından okunabilen X-Client-Data üstbilgi değerleri

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

X-Client-Data HTTP başlığı, tarayıcınızda etkinleştirilen deneme kimliklerinin ve Chrome işaretlerinin bir listesini içerir. Ham başlık değerleri, base64 kodlu, serileştirilmiş protokol arabellekleri olduğundan opak dizeler gibi görünür. İçerikleri geliştiriciler için daha şeffaf hale getirmek amacıyla DevTools artık kod çözülmüş değerleri gösteriyor.

Chromium sorunu: 1103854

Stiller bölmesinde özel yazı tiplerini otomatik tamamlama

Aktarılan yazı tipleri artık Stiller bölmesinde font-family mülkünü düzenlerken CSS otomatik tamamlama listesine eklenir.

Bu örnekte 'Noto Sans', yerel makineye yüklenen özel bir yazı tipidir. CSS tamamlama listesinde gösterilir. Daha önce bu mümkün değildi.

Chromium sorunu: 1106221

Ağ panelinde kaynak türünü tutarlı bir şekilde gösterme

DevTools artık orijinal ağ isteğiyle tutarlı bir şekilde aynı kaynak türünü gösterir ve yönlendirme (durum 302) gerçekleştiğinde Tür sütunu değerine / Redirect ekler.

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

Chromium sorunu: 997694

Nesne ve Ağ panellerindeki temizle düğmeleri

Stiller bölmesi ve Ağ panelindeki filtre metin kutularının yanı sıra Nesneler panelindeki DOM arama metin kutusunda artık Temizle düğmeleri bulunuyor. Temizle'yi tıkladığınızda girdiğiniz tüm metinler kaldırılır.

Chromium sorunu: 1067184

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

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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