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

Yeni Medya paneli

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

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 içinde bulundu.

Yeni Medya paneli; etkinlikleri, günlükleri, özellikleri ve karenin zaman çizelgesini görüntülemek için daha kolay bir yol sağlar kodu video oynatıcının kendisiyle aynı tarayıcı sekmesinde çözer. Canlı görüntüleme ve inceleme işlemleri için daha hızlı yardımcı olabilir (ör. neden atlanan kareler, neden JavaScript'in oyuncuyla beklenmedik bir şekilde iletişim kurabilirsiniz.

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 içerik tablosunun ekran görüntüsünü alıp Düğüm ekran görüntüsü yakala'yı seçin.

Chromium sorunu: 1100253

Sorunlar sekmesi güncellemeleri

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

Üçüncü taraf çerez sorunları artık Sorunlar sekmesinde varsayılan olarak gizleniyor. Yeni Dahil Et üçüncü taraf çerezi sorunları onay kutusunu işaretleyin.

Chromium sorunları: 1096481, 1068116, 1080589

Eksik yerel yazı tipleri emülasyonu

Oluşturma sekmesini açın ve eksik emülasyonu yapmak için yeni Yerel yazı tiplerini devre dışı bırak özelliğini kullanın @font-face kuralda local() kaynak var.

Örneğin, "Rubik" yazı tipi cihazınızda yüklü ve @font-face src kuralı bunu kullanıyor Chrome, local() yazı tipi olarak 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 bu yazı tiplerini ağ.

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 ederek boşta kalma durumuna tepki vermesine olanak tanır. anlamına gelir. Artık Sensörler sekmesindeki boşta kalma durumu değişikliklerini emüle etmek için kullanıcı durumunu ve ekran durumunu değiştirebilirsiniz. Chrome Web Mağazası'ndaki Çekmece'deki Sensörler sekmesine gidin.

Chromium sorunu: 1090802

prefers-reduced-data emülasyonu

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

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

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 yeni Konsol ve Kaynaklar panellerinde &&=, ||= ve ??= operatörlerini kullanabilirsiniz.
• Sayısal ayırıcıları kolayca yazın - Geliştirici Araçları artık sayısal ayırıcıları düzgün şekilde yazdırıyor tıklayın.

Chromium sorunları: 1086817, 1080569

Lighthouse 6.2 panelindeki Lighthouse 6.2

Lighthouse paneli şu anda Lighthouse 6.2'yi çalıştırmaktadır. Tam sürüm için sürüm notlarına değişiklik listesi.

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 raporlar; giriş gecikmesine en çok katkıda bulunanları belirleme.
• Bağlantılar taranabilir olmalıdır. Anchor öğelerinin href özelliğinin uygun bir bulunabilir.
• 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 ve kötü görünen birleştirilmemiş animasyonları raporlar CLS'yi azaltır.
• unload etkinliklerini dinler. unload etkinliğini bildirir. pagehide veya unload etkinliği güvenilir bir şekilde tetiklenmediğinden bunun yerine visibilitychange etkinlikleri.

Lighthouse 6.2'de güncellenmiş denetimler:

• Kullanılmayan JavaScript'i kaldırın. Lighthouse artık bir sayfada mevcut olan herkesin erişebileceği JavaScript kaynak eşlemeleridir.

Chromium sorunu: 772558

"Diğer kaynaklar"ın kullanımdan kaldırılması Hizmet Çalışanları bölmesindeki liste

Geliştirici Araçları artık diğer kaynaklardan hizmet çalışanlarının tam listesini yeni bir tarayıcı sekmesi - chrome://serviceworker-internals/?devtools.

Önceden Geliştirici Araçları, Uygulama paneli altında iç içe yerleştirilmiş bir liste gösteriyordu > Hizmet çalışanları bölmesini de kullanabilirsiniz.

Chromium sorunu: 807440

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

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

Aşağıdaki örnekte, özetin başlangıçta ne ifade ettiğine 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. ve ardından şöyle diyor: CSS filtrelemesi uygulandıktan sonra 57 kB of 604 kB (10%) used so far. 546 kB unused..

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. Çerçeveler'in altındaki bir çerçeveyi tıklayarak erişebilirsiniz. Uygulama panelindeki yeni uygulamalar menüsünü kullanın.

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. Çerçeve ayrıntıları görünümü - ek güvenlik bilgileri içeren açık pencereler.

Chromium sorunu: 1107766

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

Geliştirici Araçları artık güvenli bağlamı, Cross-Origin-Embedder-Policy (COEP) ve Cross-Origin-Opener-Policy (COOP) ekleyin.

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. Düzeltmek için color uygulamasının renk seçiciyi açın özelliğini kullanabilirsiniz. Kontrast oranı bölümünü genişlettiğinizde Geliştirici Araçları, AA sağlar ve AAA seviye renk önerileri var. 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 sürümlerinden birinde öğelerin özelliklerini incelemeye ilişkin iş akışını iyileştireceğiz.

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 tüm X-Client-Data Üstbilgiler bölmesindeki üstbilgi değerlerini kod olarak görüntüleme.

X-Client-Data HTTP başlığı, etkinleştirilen deneme kimliklerinin ve Chrome işaretlerinin listesini içerir. ziyaret edin. Ham başlık değerleri, base 64 olarak kodlandığından opak dizeler gibi görünür. protokol arabellekleri serileştirildi. Geliştirici Araçları, içeriklerini geliştiriciler için daha şeffaf hale getirmek amacıyla artık kodu çözülmüş değerler gösteriliyor.

Chromium sorunu: 1103854

Stiller bölmesinde özel yazı tiplerini otomatik tamamla

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

Bu örnekte 'Noto Sans', yerel makinede yüklenen özel bir yazı tipidir. Gösterildiği yer ve CSS tamamlama listesi. Daha önce öyle değildi.

Chromium sorunu: 1106221

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

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

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

Chromium sorunu: 997694

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

Stiller bölmesindeki ve Ağ panelindeki filtre metin kutuları ve DOM arama metni kutusundaki Öğeler panelinde Temizle düğmeleri bulunuyor. Temizle'yi tıkladığınızda en iyi uygulamaları paylaşacağız.

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ı sorunlarını bildirmek için Diğer seçenekler'i > 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.