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 üçüncü taraf çerezlerini istisnalarla veya istisnasız olarak geçici olarak sınırlandırın ve bir web sitesinin nasıl davrandığını test edin.
  • Üçüncü taraf çerezleri hakkında bilgi içeren bir tabloya bakın. Bu tabloda, geçici sınır modu tarafından engellenip engellenmediği ve ne tür çerezlerin etkilenebileceği gibi bilgiler yer alır.

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ıtlaması hazır ayarları

Artık otomatik olarak kalibre edebilir ve düşük ve orta sınıf mobil cihazlara daha uygun iki ek CPU sınırlama hazır ayarı alabilirsiniz.

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

Yavaşlatma kalibrasyonunu eklemeden önce ve sonra.

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

Yapay zeka yardımı paneli artık performans izlemede seçili etkinliği aynı sohbette değiştirmenize olanak tanır. Diğer bir deyişle, farklı bir etkinlik hakkında konuşmak için yeni bir sohbet başlatmanız gerekmez.

Performans kampanyalarında birinci ve üçüncü taraf vurgulama

Performans panelinin Özet sekmesine, birinci taraf, üçüncü taraf ve uzantı verilerini ayırt etmenizi sağlayan yeni bir tablo eklendi.

Performans izlemede vurgulanan alakalı etkinlikleri görmek için fareyle tablodaki girişlerin üzerine gelin. Yalnızca birinci taraf verilerine odaklanmak için 3. tarafları karart'ı işaretleyin.

Ayrıca, tabloda vurgulanan bir girişin yanındaki simgesini tıklayarak üçüncü taraflara göre gruplandırılmış Aşağıdan yukarı sekmesine gidebilirsiniz.

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

Alan verilerini etkinleştirdiyseniz artık metrik işaretçisi ipuçlarında ve Analizler sekmesinde görebilirsiniz.

İşaretçi ipuçlarına ve Analizler sekmesine dosya verileri eklemeden önce ve sonra.

Chromium sorunu: 368135130.

"Zorunlu yeniden düzenleme" analizi

Performans > Analizler sekmesindeki analiz grubuna Zorunlu yeniden akış eklendi. Zorunlu yeniden akış, oluşturma motoru stil ve düzeni hesaplamak için komut dosyasının yürütülmesini duraklattığında gerçekleşir. Zorunlu yeniden akışlar, kaçınmak isteyebileceğiniz darboğazlar olabilir.

Fareyle yeni analizin üzerine geldiğinizde en çok zaman alan işlev çağrısı, zorla yeniden oluşturma ve yığın izleme ile vurgulanır ve toplam yeniden oluşturma süresi gösterilir.

"Zorunlu yeniden akış" analizini eklemeden önce ve sonra.

Chromium sorunu: 369766156.

"DOM boyutunu optimize edin" analizini

DOM boyutunu optimize edin de yeni bir analizdir. DOM ağacının büyük olması sayfanızın performansını yavaşlatabilir.

Analiz, performans izlemede büyük DOM boyutundan etkilenen uzun düzen yeniden düzenlemelerini ve stil yeniden hesaplamalarını vurgular ve toplam öğe sayısı, derinlik ve en çok alt öğe sayısıyla ilgili istatistikler sağlar.

"DOM boyutunu optimize edin" analizini eklemeden önce ve sonra.

Performans izlemeyi console.timeStamp ile uzatma

Extensibility API artıkconsole.timeStamp özelliğini destekliyor. Artık performance.measure ve performance.mark'e ek olarak performans izinde özel parçalar oluşturabilir ve console.timeStamp'yi kullanarak özel işaretler yakalayabilirsiniz. console.timeStamp, tarayıcıya 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");

Kayıt ayarları > Özel kanalları göster'i seçtiğinizde özel kanalınız izlemede gösterilir:

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

Öğe 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 panelinde 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ı desteklenmektedir.

&quot;:open&quot; seçeneğini eklemeden önce ve sonra.

Ayrıca Öğeler paneli artık birkaç yeni sözde öğeyi de destekliyor: ::checkmark, ::picker-icon ve bandoya ait ::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ı sağ tıklayıp tek seferde kopyalayabilirsiniz.

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

Ayrıca, Ağ > İstek Yüklü Veri bağlam menüsünde benzer bir kopyalama seçeneği bulabilirsiniz.

Chromium sorunları: 40206460, 384967020.

Bellek panelindeki bayt birimleri

Bellek panelinde artık büyük bayt sayıları yerine uygun bayt birimleri kullanılarak boyutlar gösteriliyor.

Bayt birimlerini göstermeden önce ve sonra.

Chromium sorunu: 388589515.

Diğer öne çıkan özellikler

Bu sürümdeki dikkate değer düzeltme ve iyileştirmelerden bazıları şunlardır:

  • Performans:
    • 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çilir.
  • Yok sayma listesi: node: ile başlayan düğüm dahili özellikleri 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öreli uzunluklar artık mutlak değeri gösteren bir pop-up'a sahip (crbug.com/40778486).
  • Erişilebilirlik: Sütun başlıkları artık sıralanabilir olup olmadıklarını bildirir.
  • Sekme simgeleri artık sol tarafta değil, sekme adlarının yanında sağ tarafta yer alıyor.

Ö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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.

Geliştirici Araçları'ndaki yenilikler

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