Chrome 138'deki DevTools'daki yenilikler

Sofia Emelianova
Sofia Emelianova
GitHub

Performans paneli iyileştirmeleri

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

"Ağ bağımlılık ağacı" analizindeki önceden bağlanmış kaynaklar

Performans > Analizler > Ağ bağımlılığı ağacı analizinde artık kullanılan veya kullanılmayan önceden bağlanmış kaynakların ve varsa önceden bağlanma adaylarının listesi gösteriliyor.

Önceden bağlanma ipuçları, sitenizin önemli üçüncü taraf kaynaklara erken bağlantılar oluşturmasına ve sayfa yükleme hızını artırmasına olanak tanır.

"Ağ bağımlılık ağacı" analizine önceden bağlanılmış kaynaklar ve adaylar eklenmeden önceki ve sonraki durum.

Daha fazla bilgi için Gerekli kaynaklara önceden bağlanma başlıklı makaleyi inceleyin.

"Doküman isteğiyle ilgili gecikme" analizindeki sunucu yanıtı ve yönlendirme süreleri

Performans > Analizler > Belge isteği gecikmesi analizinde artık sunucu yanıt süresi ve varsa yönlendirmelerin sayısı ile yönlendirme süresi gösteriliyor.

Yönlendirme ve sunucu yanıt süreleri "Belge isteği gecikmesi" analizine eklenmeden önceki ve sonraki durum.

Ağ isteklerinin özetindeki yönlendirmeler

Performans paneli artık yönlendirme URL'lerini ağ isteklerinin Özet bölümünde ve ipuçlarında gösteriyor.

Yönlendirme URL'leri eklenmeden önce ve eklendikten sonra ağ isteklerinin özeti ve ipuçları.

Chromium sorunu: 402353313.

Performans izindeki gürültü azaltıldı.

Performans panelinde artık v8 JavaScript motorunun compile kategorisindeki etkinlikler gösterilmeyecek. Daha önce bu etkinlikler, özellikle compile code etkinliği, çok fazla gereksiz ek yük ve gürültüye neden oluyordu.

Performans izinden "compile code" etkinlikleri kaldırılmadan önce ve sonra.

Sizin için önemli olan bazı etkinliklerin artık eksik olduğunu fark ederseniz crbug.com/414330508 adresinden geri bildiriminizi paylaşabilirsiniz.

"JavaScript örneklerini devre dışı bırak" özelliği kullanımdan kaldırıldı

Performans > Ayarları yakala bölümündeki JavaScript örneklerini devre dışı bırak seçeneği, nadiren kullanılması ve düşük kullanım oranı nedeniyle desteği sonlandırılıp kaldırıldı.

"JavaScript örneklerini devre dışı bırak" seçeneği, "Çekim ayarları"ndan kaldırılmadan önce ve kaldırıldıktan sonraki görünüm.

Chromium sorunu: 414734883.

Sensörler'deki coğrafi konum doğruluğu parametresi

Sensörler paneli artık coğrafi konum emülasyonunda doğruluğu ayarlamanıza olanak tanıyor. Bu sayede, farklı GPS doğruluk düzeylerinin nasıl işlendiğini test edebilirsiniz.

Sensörler panelinde coğrafi konum emülasyonuna "Doğruluk" parametresi eklenmeden önce ve eklendikten sonraki durum.

Chromium sorunu: 40074843.

Nesne paneliyle ilgili iyileştirmeler

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

Karmaşık CSS değerlerinde daha kolay hata ayıklama

Karmaşık CSS değerlerinde hata ayıklamanıza yardımcı olmak için Öğeler > Stiller sekmesi artık fareyle üzerine gelindiğinde ipucunda şunları gösteriyor:

  • CSS değişkenlerinin tam tanım zinciri sayesinde birden fazla bağlantıyı tıklamanız gerekmez.
  • Karmaşık CSS hesaplamalarının adım adım değerlendirilmesi sayesinde hataları daha verimli bir şekilde belirleyebilir ve bir değerin nasıl hesaplandığına dair daha ayrıntılı bilgi edinebilirsiniz.

İpucu, her tanım için bir satır olacak şekilde birden fazla satırda tanım zincirlerini gösterir. Ayrıca, karmaşık hesaplamaları genişletebilir ve hesaplanan değeri vurgulayıp başlangıç ifadesine geri izlemek için değerlerin üzerine gelebilirsiniz.

Tanım zincirleri ve genişletilebilir karmaşık hesaplamalar içeren bir ipucu eklemeden önce ve sonra.

Chromium sorunu: 396080529.

@function Elements > Styles'da desteklenir.

Chrome'da @function desteğine hazırlık olarak Öğeler > Stiller sekmesi artık özel işlev adlarınızı özel bir bölümdeki tanımlarına bağlıyor.

Özel işlev adınızı ilgili bölüme bağlamadan önce ve bağladıktan sonra.

Ağ paneli iyileştirmeleri

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

has-request-header filtre

Ağ paneli artık belirli bir istek başlığı adına göre filtreleme yapmanıza olanak tanıyan has-request-header filtresini destekliyor.

Ağ paneline "has-request-header" filtresi eklenmeden önce ve eklendikten sonraki durum.

Chromium sorunu: 397481040.

Yalıtılmış web uygulamalarında Direct Sockets

Ağ panelinde artık TCPSocket, UDPSocket (bağlı modda) ve UDPSocket (bağlı modda) üzerinden yalıtılmış web uygulamalarının (IWA) trafiğini izleyebilirsiniz.

Bunu yapmak için tablodaki normal isteklerin yanından bir directscoket bağlantısı seçin ve İletiler sekmesinde bir ileti seçin.

IWAs'da doğrudan soket desteği eklenmeden önce ve eklendikten sonraki durumun Ağ paneli.

Yalıtılmış web uygulamaları (IWA'lar), web uygulamaları için yüksek güvene dayalı bir güvenlik modeli sunar. Daha fazla bilgi için Yalıtılmış web uygulamalarını kullanmaya başlama başlıklı makaleyi inceleyin ve Direct Sockets API'yi uygulayan demo uygulamasını inceleyin.

Diğer önemli noktalar

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

  • Uygulama > Depolama: Kullanımdan kaldırılan Web SQL seçeneği kaldırıldı (crbug.com/412707590).
  • Öğeler:
  • Ağ: Tarayıcı davranışını kontrol eden bir yanıt başlığı olduğundan ve istemci tarafı talimatı olmadığından (crbug.com/413904896) Getirme olarak kopyala seçeneğinden Referrer-Policy HTTP başlığı kaldırıldı.
  • Performans: Ana iş parçacıklarını engellemedikleri için çalışan iş parçacıklarındaki "uzun görev" uyarıları kaldırıldı (crbug.com/40248589).
  • Sorunlar. Şimdi raporlar:
    • Kullanıcıları izlediğinden şüphelenilen kaynaklar engellenirse.
    • Yönlendirme sırasında depolamaya erişip erişmediklerine bakılmaksızın hemen çıkma durumunu izleme çözümleri.
  • Erişilebilirlik. Öğeler > Stiller'deki aşağıdaki öğeler artık klavye ile odaklanılabilir:

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