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

Jecelyn Yeen

WebSocket isteklerini sınırlama

Ağ paneli artık web soket isteklerini azaltmayı desteklemektedir. Daha önce ağ kısıtlaması, web soketi isteklerinde çalışmıyordu.

Mesaj aktarma işlemlerini gözlemlemek için Ağ panelini açın, bir web soket isteğini tıklayın ve Mesajlar sekmesini açın. Hızı kısıtlamak için Yavaş 3G'yi seçin.

WebSocket isteklerini kısıtlama

Chromium sorunu: 423246

Uygulama panelindeki yeni Reporting API bölmesi

Sayfanızda oluşturulan raporları ve durumlarını izlemek için yeni Reporting API bölmesini kullanın.

Reporting API, sayfanızdaki güvenlik ihlallerini, desteği sonlandırılan API çağrılarını ve daha fazlasını izlemenize yardımcı olmak için tasarlanmıştır.

Reporting API'yi kullanan bir sayfa açın (ör. demo sayfası). Uygulama panelinde Arka plan hizmetleri bölümüne gidip Reporting API bölmesini seçin.

Raporlar bölümünde, sayfanızda oluşturulan raporların listesi ve raporların durumları gösterilir. Raporun ayrıntılarını görüntülemek için tıklayın.

Uç noktalar bölümünde, Reporting-Endpoints başlığında yapılandırılan tüm uç noktalara genel bir bakış sunulur.

Reporting API bölmesi

Chromium sorunu: 1205856

Destek, öğenin Kaydedici panelinde görünmesini/tıklanabilir olmasını bekleme

Bir kullanıcı akışı kaydını oynatırken Kaydedici paneli artık öğenin görüntü alanında görünür veya tıklanabilir hale gelmesini bekler ya da adımı oynatmadan önce öğeyi görüntü alanına otomatik olarak kaydırmayı dener. Daha önce, yeniden oynatma işlemi hemen başarısız oluyordu.

Görüntü alanının dışına yerleştirilen ve etkinleştirildiğinde kayan bir ekran dışı menü örneği aşağıda verilmiştir. Kullanıcı akışı, menüyü açmak ve menü öğesini tıklamaktır. Daha önce, menü öğesi hâlâ kaydırıldığı ve henüz ekran alanında görünmediği için yeniden oynatma son adımda başarısız oluyordu. Artık sorun çözüldü.

Chromium sorunu: 1257499

Daha iyi konsol stili, biçimlendirme ve filtreleme

ANSI kaçış koduyla günlük mesajlarını doğru şekilde biçimlendirme

Artık konsol mesajlarının stilini doğru şekilde belirlemek için ANSI çıkış sıralarını kullanabilirsiniz. Daha önce Geliştirici Araçları konsolu, ANSI çıkış sıraları için çok sınırlı (ve kısmen bozuk) desteğe sahipti.

Node.js geliştiricilerinin, genellikle chalk, colors, ansi-colors, kleur gibi bazı stil kitaplıklarının yardımıyla ANSI kaçış dizileri aracılığıyla günlük mesajlarını renklendirmesi yaygın bir durumdur.

Bu değişiklikler sayesinde artık DevTools'u kullanarak Node.js uygulamalarınızda doğru renklendirilmiş konsol mesajlarıyla sorunsuz bir şekilde hata ayıklama yapabilirsiniz. Kendiniz görüntülemek için bu demoyu açın.

Geliştirici Araçları'nı kullanarak konsol mesajlarını biçimlendirme ve biçimlendirme hakkında daha fazla bilgi edinmek için Console'da mesajları biçimlendirme ve stil bölümüne göz atın.

konsol stili

Chromium sorunları: 1282837, 1282076

%s, %d, %i ve %f biçim belirteçlerini doğru şekilde destekleme

Console artık Console Standardı'nda belirtildiği gibi %s, %d, %i ve %f türü dönüşümleri düzgün şekilde gerçekleştiriyor. Daha önce görüşme sonucu tutarsızdı.

console mesajında biçim belirteçlerini destekleme

Chromium sorunları: 1277944, 1282076

Daha sezgisel konsol grup filtresi

Konsol mesajı filtrelenirken artık mesaj içeriği filtreyle eşleşiyorsa veya grubun (veya üst grubun) başlığı filtreyle eşleşiyorsa konsol mesajı gösterilir. Önceden, filtreye rağmen konsol grubu başlığı gösteriliyordu.

Ayrıca, bir konsol mesajı gösteriliyorsa bu mesajın ait olduğu grup (veya üst grup) da artık gösteriliyor.

konsol grubu filtresi

Chromium sorunu: 1068788

Kaynak harita iyileştirmeleri

Kaynak haritası dosyalarıyla Chrome uzantısında hata ayıklama

Artık kaynak haritası dosyalarıyla Chrome uzantısında hata ayıklama yapabilirsiniz. Daha önce Geliştirici Araçları, Chrome uzantısı hata ayıklama için yalnızca satır içi kaynak eşlemeyi destekliyordu.

Kaynak haritası dosyalarıyla Chrome uzantısında hata ayıklama

Chromium sorunu: 212374

Kaynaklar panelindeki kaynak klasör ağacı geliştirildi

Kaynaklar panelindeki kaynak klasör ağacı, klasör yapılarında ve adlandırmada (ör. "../", "./" vb.) daha az karmaşa olacak şekilde iyileştirildi. Bu, kaynak haritalardaki mutlak kaynak URL'lerin normalleştirilmesinin sonucudur.

Kaynaklar panelinde iyileştirilmiş kaynak klasör ağacı

Chromium sorunu: 1284737

Kaynak panelinde çalışan kaynak dosyalarını görüntüleme

Göreli SourceURL içeren işçi (ör. web işçisi, hizmet işçisi) kaynak dosyaları artık Kaynak panelinde gösteriliyor. Daha önce, çalışan kaynak dosyaları doğru bir şekilde işlenmiyordu.

ALT_TEXT_HERE

Chromium sorunu: 1277002

Chrome'un otomatik koyu tema güncellemeleri

Otomatik koyu tema emülasyonu kullanıcı arayüzü artık basitleştirildi. Önceden bir açılır liste olarak kullanılan bu liste, artık onay kutusu olarak görünüyor.

Ayrıca, Otomatik Koyu Tema etkinleştirildiğinde prefers-color-scheme: dark açılır listesi devre dışı bırakılır ve otomatik olarak prefers-color-scheme: dark olarak ayarlanır.

Chrome 96, Android'de otomatik koyu tema için kaynak denemesi sunar. Bu özellik ile tarayıcı, kullanıcı işletim sisteminde koyu temaları etkinleştirdiğinde, açık temalı sitelere otomatik olarak oluşturulan koyu temayı uygular.

Otomatik koyu mod emülasyonu

Chromium sorunu: 1243309

Dokunmaya uygun renk seçici ve bölünmüş bölme

Artık dokunmatik ekranlı cihazlarda parmaklarınızı veya ekran kalemini kullanarak Geliştirici Araçları'ndaki Çekmecesi'ni yeniden boyutlandırabilir ve renk seçebilirsiniz.

Aşağıda, Google Pixelbook cihazının dokunmatik ekranıyla çekilmiş bir örnek verilmiştir.

Chromium sorunları: 1284245, 1284995

Diğer öne çıkan özellikler

Bu sürümdeki bazı önemli düzeltmeler şunlardır:

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