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.

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

WebSocket isteklerini sınırlama

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 kaydı panelinde öğenin görünür/tıklanabilir hale gelmesini 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, tekrar oynatma işlemi hemen başarısız oluyordu.

Aşağıda, ekran görüntüsünün dışında konumlandırılmış ve etkinleştirildiğinde kaydırılarak açılan bir ekran dışı menü örneği 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. Sorun düzeltildi.

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ına uygun bir stil uygulamak için ANSI kaçış dizilerini kullanabilirsiniz. Daha önce, DevTools konsolu ANSI kaçış dizileri 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. Kendi gözlerinizle görmek için bu demoyu açın.

DevTools ile konsol mesajlarını biçimlendirme ve biçimlendirme hakkında daha fazla bilgi edinmek için Konsol'da mesajları biçimlendirme ve biçimlendirme dokümanlarına gidin.

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 grubu 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 DevTools, Chrome uzantısı hata ayıklama için yalnızca satır içi kaynak haritasını destekliyordu.

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

Chromium sorunu: 212374

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

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, işleyici kaynak dosyaları doğru ş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. Daha önce açılır menü olan bu seçenek artık onay kutusu olarak değiştirildi.

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 sayesinde tarayıcı, kullanıcı işletim sisteminde koyu temaları etkinleştirdiğinde açık temalı sitelere otomatik olarak oluşturulmuş koyu bir tema uygular.

Otomatik koyu mod emülasyonu

Chromium sorunu: 1243309

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

Artık dokunmatik ekranlı cihazlarda parmaklarınızı veya ekran kalemini kullanarak DevTools'ta renk seçebilir ve Çekmecesi'ni yeniden boyutlandırabilirsiniz.

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şmenize, en yeni web platformu API'lerini test etmenize 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.