Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Jecelyn Yeen

Yeni Medya paneli

DevTools artık Medya panelinde medya oynatıcı bilgilerini 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 sayfasında yer alıyordu.

Yeni Medya paneli; etkinlikleri, günlükleri, özellikleri ve kare kod çözme işlemlerinin zaman çizelgesini video oynatıcının kendisiyle aynı tarayıcı sekmesinde görüntülemek için daha kolay bir yol sağlar. Canlı görüntüleme ve olası sorunları (ör. atlanan karelerin nedeni, JavaScript'in oynatıcıyla beklenmedik bir şekilde etkileşmesinin nedeni) daha hızlı bir şekilde inceleyebilir ve inceleyebilirsiniz.

Chromium sorunu: 1018414

Nesne paneli içerik menüsü aracılığıyla düğüm ekran görüntülerini alın

Artık Nesneler panelindeki içerik menüsü aracılığıyla düğüm ekran görüntülerini yakalayabilirsiniz.

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

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

Chromium sorunu: 1100253

Sorunlar sekmesi güncellemeleri

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

Konsol mesajındaki sorunlar

Üçüncü taraf çerez sorunları artık Sorunlar sekmesinde varsayılan olarak gizleniyor. Bu sorunları 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ını emüle etmek için yeni Yerel yazı tiplerini devre dışı bırak özelliğini kullanın.

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

Yerel yazı tiplerini devre dışı bırak seçeneği etkinleştirildiğinde Geliştirici Araçları, local() yazı tiplerini yok sayar ve bunları 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ı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 kolaylaştırır:

Web yazı tiplerinin yükleme performansında ve optimizasyonunda hata ayıklayıp bunları ölçün
CSS @font-face kurallarınızın doğruluğunu onaylayın
Web yazı tipleri ve yerel sürümleri arasındaki farkları öğrenin

Chromium sorunu: 384968

Etkin olmayan kullanıcıların emülasyonu

Idle Detection API, geliştiricilerin etkin olmayan kullanıcıları tespit etmesine ve boşta kalma durumu değişikliklerine tepki vermesine olanak tanır. Artık Geliştirici Araçları'nı, gerçek boşta kalma durumunun değişmesini beklemek yerine, Sensörler sekmesinde hem kullanıcı durumu hem de ekran durumu için boşta kalma durumu değişikliklerinin benzetimini yapmak için kullanabilirsiniz. Çekmece'den Sensors (Sensörler) sekmesini açabilirsiniz.

Etkin olmayan kullanıcıların emülasyonu

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

Preferreds-reduced-data emülasyonu

Chromium sorunu: 1096068

Yeni JavaScript özellikleri için destek

DevTools artık en yeni JavaScript dili özelliklerinden bazılarını daha iyi desteklemektedir:

Mantıksal atama operatörleri: Geliştirici Araçları artık Konsol ve Kaynak panellerindeki yeni &&=, ||= ve ??= operatörleriyle mantıksal atamayı destekliyor.
Sayısal ayırıcıları okunaklı hale getirin: Geliştirici Araçları, sayısal ayırıcıları artık Kaynaklar panelinde düzgün şekilde yazdırıyor.

Chromium sorunları: 1086817, 1080569

Lighthouse panelinde Lighthouse 6.2

Lighthouse paneli artık Lighthouse 6.2'yi çalıştırıyor. 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 ileti dizisi görevlerinden kaçının. Ana iş parçacığındaki en uzun görevleri bildirir ve giriş gecikmesine en çok katkıda bulunanları belirlemekte faydalıdır.
Bağlantılar taranabilir. Bağlantıların keşfedilebilmesi için bağlantı öğelerinin href özelliğinin uygun bir hedefe bağlanıp bağlanmadığını kontrol edin.
Boyutlandırılmamış resim öğeleri - Resim öğelerinde açık bir width ve height ayarlanıp ayarlanmadığını kontrol edin. Açık resim boyutu, düzen kaymalarını azaltabilir ve CLS'yi iyileştirebilir.
Birleştirilmemiş animasyonlardan kaçının. Kötü görünen ve CLS'yi azaltan birleştirilmemiş animasyonları bildirir.
unload etkinliklerini dinler. unload etkinliğini bildirir. unload etkinliği güvenilir ş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, artık bir sayfada herkesin erişebileceği JavaScript kaynak haritaları varsa denetimi iyileştirecek.

Chromium sorunu: 772558

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

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

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

Diğer kaynaklara bağlantı

Chromium sorunu: 807440

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

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

Aşağıdaki örnekte, özetin CSS filtresi uygulandıktan sonra başlangıç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. ifadesini nasıl bıraktığına dikkat edin.

Filtrelenen öğeler için 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 sunuyor. Uygulama panelindeki Çerçeveler menüsü altında bir çerçeveyi tıklayarak erişebilirsiniz.

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

Chromium sorunu: 1093247

Açılan pencerelere ilişkin çerçeve ayrıntıları

Geliştirici Araçları artık açık pencereleri / pop-up'ları da çerçeve ağacının altında gösteriyor. Açık 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ı, Çapraz Kökenli-Yerleştirme-Politikası (COEP) ve Kaynaklar Arası-Açıcı-Politika (COOP) bilgilerini gösteriyor.

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 sağlıyor.

Aşağıdaki örnekte h1 düşük kontrastlı metne sahip. 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 panelinde Özellikler bölmesini yeniden etkinleştirme

Özellikler bölmesi tekrar kullanıma sunuldu 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ğ panelindeki kullanıcılar tarafından okunabilir `X-Client-Data` üst bilgi değerleri

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

X-Client-Data HTTP üst bilgisi, tarayıcınızda etkin olan deneme kimliklerinin ve Chrome işaretlerinin bir listesini içerir. Ham başlık değerleri base64 olarak kodlanmış, serileştirilmiş protokol arabellekleri oldukları için opak dizelere benzer. Geliştirici Araçları, içerikleri geliştiriciler açısından daha şeffaf hale getirmek için artık kodu çözülmüş değerleri gösteriyor.

İnsanlar tarafından okunabilir "X-Client-Data" üst bilgi değerleri

Chromium sorunu: 1103854

Stiller bölmesinde özel yazı tiplerini otomatik tamamla

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

Bu örnekte 'Noto Sans' yerel makinede yüklü özel bir yazı tipidir. CSS tamamlama listesinde gösterilir. Daha önce böyle bir durum söz konusu değildi.

Özel yazı tiplerini otomatik tamamlama

Chromium sorunu: 1106221

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

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

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

Yönlendirme kaynağı türünü görüntüle

Chromium sorunu: 997694

Nesneler ve Ağ panellerindeki düğmeleri temizle

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

Nesneler ve Ağ panellerindeki düğmeleri temizle

Chromium sorunu: 1067184

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.