Chrome 134'teki DevTools'daki yenilikler

Sofia Emelianova
Sofia Emelianova
GitHub

Gizlilik ve güvenlik paneli

Eski Güvenlik paneli, Gizlilik ve güvenlik paneline dönüştü ve gizliliğe özel yeni bir bölüm eklendi. Bu bölümde şunları yapabilirsiniz:

  • Geliştirici Araçları açıkken, istisnalar olsun veya olmasın üçüncü taraf çerezlerini geçici olarak sınırlandırın ve bir web sitesinin nasıl davrandığını test edin.
  • Üçüncü taraf çerezleriyle ilgili bilgilerin yer aldığı bir tabloyu (geçici sınırlama modu tarafından engellenip engellenmedikleri veya muaf tutulup tutulmadıkları ve hangi tür çerezlerin etkilenebileceği dahil) görebilirsiniz.

Gizlilik bölümü, Güvenlik paneline eklenmeden önce ve sonra.

Chromium sorunu: 352364594.

Performans paneli iyileştirmeleri

Bu sürümde Performans panelinde çeşitli iyileştirmeler yapıldı.

Kalibre edilmiş CPU kısıtlama hazır ayarları

Artık otomatik olarak kalibre edebilir ve düşük ile orta seviye mobil cihazları daha doğru şekilde yaklaştıran iki ek CPU sınırlama ön ayarı alabilirsiniz.

Performans > CPU sınırlama açılır menüsünde Kalibre et...'i seçin, ardından Ayarlar'da Kalibre et'i ve Devam'ı tıklayın ve DevTools'un cihazınız için yavaşlama oranlarını hesaplamasını bekleyin. Kalibre edilmiş sınırlama seçeneklerini Performans > CPU sınırlama açılır menüsünde bulabilirsiniz.

Sınırlama kalibrasyonu eklemeden önce ve ekledikten sonra.

Aynı yapay zeka sohbetinde farklı performans etkinlikleri seçme

Yapay zeka yardımı paneli artık aynı sohbette performans izinde seçilen etkinliği değiştirmenize olanak tanıyor. Başka bir etkinlik hakkında konuşmak için yeni bir sohbet başlatmanız gerekmez.

Performans sekmesinde birinci ve üçüncü taraf vurgulama

Performans panelinin Özet sekmesine, birinci taraf, üçüncü taraf ve uzantı verileri arasında ayrım yapmanızı sağlayan yeni bir tablo ekleniyor.

Tablodaki girişlerin üzerine gelerek performans izinde ilgili etkinliklerin vurgulandığını görebilirsiniz. Yalnızca birinci taraf verilerine odaklanmak için Üçüncü tarafları karart'ı işaretleyin.

Ayrıca, üçüncü taraflara göre gruplandırılmış Aşağıdan yukarıya sekmesine gitmek için tablodaki vurgulanmış bir girişin yanındaki simgesini tıklayın.

İşaretçi ipuçlarındaki ve analizlerdeki alan verileri

Alan verileri etkinse artık bunları metrik işaretleyici ipuçlarında ve Analizler sekmesinde görebilirsiniz.

Dosyalanmış veriler işaretçi ipuçlarına ve Analizler sekmesine eklenmeden önce ve sonra.

Chromium sorunu: 368135130.

"Zorunlu yeniden düzenleme" analizi

Performans > Analizler sekmesindeki analizler grubuna yeni bir analiz eklendi: Yeniden akış zorlama. Oluşturma motoru, stil ve düzeni hesaplamak için komut dosyası yürütmeyi duraklattığında zorunlu yeniden akış gerçekleşir. Yeniden akışa zorlama, kaçınmak isteyebileceğiniz darboğazlara neden olabilir.

Yeni içgörünün üzerine geldiğinizde, zorunlu yeniden akışla birlikte en çok zaman alan işlev çağrısı, yığın izi vurgulanır ve toplam yeniden akış süresi gösterilir.

"Yeniden akış zorlandı" içgörüsü eklenmeden önce ve sonra.

Chromium sorunu: 369766156.

"DOM boyutunu optimize edin" analizi

Diğer bir yeni analiz de DOM boyutunu optimize edin. DOM ağacının büyük olması sayfanızın performansını düşürebilir.

Analiz, performans izinde büyük bir DOM boyutundan etkilenen uzun düzen yeniden akışlarını ve stil yeniden hesaplamalarını vurgular. Ayrıca toplam öğeler, derinlik ve en çok alt öğe hakkında istatistikler sağlar.

"DOM boyutunu optimize edin" içgörüsü eklenmeden önce ve sonra.

console.timeStamp ile performans izini genişletin

Extensibility API artıkconsole.timeStamp destekliyor. performance.measure ve performance.mark'ye ek olarak, artık performans izinde özel izler oluşturabilir ve console.timeStamp kullanarak özel işaretler yakalayabilirsiniz. Bu, tarayıcının dahili performans zaman çizelgesine giriş eklemeyen ancak yalnızca performans izinde gösteren daha hafif bir alternatiftir.

Örneğin, aşağıdaki söz dizimini kullanabilirsiniz:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

Yakalama ayarları > Özel kanalları göster seçeneği etkinleştirildiğinde özel kanalınız izde gösterilir:

console.timeStamp desteği eklenmeden önce ve sonra.

Nesne paneli iyileştirmeleri

Bu sürümde Öğeler panelinde çeşitli iyileştirmeler yapıldı.

Animasyonlu stillerin gerçek zamanlı değerleri

Öğeler > Stiller sekmesi artık animasyonlu stillerin değerlerini gerçek zamanlı olarak güncelliyor.

:open sözde sınıfı ve çeşitli sözde öğeler için destek

Öğeler paneli artık <details>, <select>, <dialog> ve <input> gibi belirli HTML öğeleri için Stiller > :hov > Belirli öğe durumunu zorla bölümünde :open sözde sınıfını destekliyor.

&quot;:open&quot; seçeneği eklenmeden önce ve sonra.

Ayrıca, Öğeler paneli artık birkaç yeni sözde öğeyi de destekliyor: ::checkmark, ::picker-icon ve carousel-related ::column, ::scroll-button, ::scroll-marker ve ::scroll-marker-group.

Chromium sorunları: 383157184, 379805728.

Tüm konsol mesajlarını kopyalama

Artık tüm konsol mesajlarını tek seferde sağ tıklayıp kopyalayabilirsiniz.

&quot;Konsolu kopyala&quot; seçeneği eklenmeden önce ve sonra

Ayrıca, Network > Request Payload bağlam menüsünde benzer bir kopyalama seçeneği bulabilirsiniz.

Chromium sorunları: 40206460, 384967020.

Bellek panelindeki bayt birimleri

Bellek panelinde artık boyutlar, büyük bayt sayıları yerine uygun bayt birimleriyle gösteriliyor.

Bayt birimlerini gösteren öncesi ve sonrası.

Chromium sorunu: 388589515.

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

  • Performans:
    • Ek açıklamalar: Artık etiketinizi tıklayarak ilgili girişi seçebilirsiniz (crbug.com/388224764).
    • Analizler: Analizler sekmesinde CLS'yi tıkladığınızda artık en kötü kayma yerine en kötü küme seçiliyor.
  • Yok sayma listesi: node: ile başlayan düğüm iç kısımları artık varsayılan olarak yok sayılıyor (crbug.com/382453615).
  • Canlı ifadeler: Canlı ifadenin $_ komutunu etkilemesine neden olan hata düzeltildi (crbug.com/388437265).
  • Öğeler > Stiller: Göreceli uzunluklar artık mutlak değeri gösteren bir popover'a sahip (crbug.com/40778486).
  • Erişilebilirlik: Sütun başlıkları artık sıralanabilir olup olmadıklarını bildiriyor.
  • Sekme simgeleri artık solda değil, sağ tarafta sekme adlarının yanında yer alıyor.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.