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

Jecelyn Yeen

WebSocket isteklerinin sıklığını sınırlama

Ağ paneli artık web soketi isteklerinin sınırlandırılmasını destekliyor. Daha önce, ağ sınırlama web soketi isteklerinde çalışmıyordu.

Ağ panelini açın, bir WebSocket isteğini tıklayın ve ileti aktarımlarını gözlemlemek için İletiler sekmesini açın. Hızı kısıtlamak için Yavaş 3G'yi seçin.

WebSocket isteklerinin sıklığını sınırlama

Chromium sorunu: 423246

Uygulama panelinde 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, kullanımdan kaldı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 gidin ve Reporting API bölmesini seçin.

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

Uç noktalar bölümünde, Reporting-Endpoints üstbilgisinde yapılandırılan tüm uç noktaların genel görünümü sunulur.

Reporting API bölmesi

Chromium sorunu: 1205856

Kaydedici panelinde öğe görünür/tıklanabilir olana kadar bekleme desteği

Kullanıcı akışı kaydı yeniden oynatılırken Kaydedici paneli artık öğe, görüntü alanında görünür veya tıklanabilir olana kadar bekleyecek ya da adımı yeniden oynatmadan önce öğeyi otomatik olarak görüntü alanına kaydırmaya çalışacak. Daha önce, tekrar oynatma işlemi hemen başarısız oluyordu.

Görünüm alanının dışında konumlandırılmış ve etkinleştirildiğinde kayarak gelen ekran dışı bir menü örneğini aşağıda görebilirsiniz. Kullanıcı akışı, menüyü açıp kapatmak ve menü öğesini tıklamaktır. Daha önce, menü öğesi hâlâ kaydığı ve henüz görüntü alanında görünmediği için tekrar oynatma son adımda başarısız oluyordu. Bu sorun artık 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ını düzgün şekilde biçimlendirmek için ANSI kaçış dizilerini kullanabilirsiniz. Daha önce, Geliştirici Araçları konsolunda ANSI kaçış dizileri için çok sınırlı (ve kısmen bozuk) destek vardı.

Node.js geliştiricileri, 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ı renklendirir.

Bu değişikliklerle artık Node.js uygulamalarınızda Geliştirici Araçları'nı kullanarak sorunsuz bir şekilde hata ayıklayabilir ve konsol mesajlarını uygun şekilde renklendirebilirsiniz. Kendiniz görüntülemek için bu demoyu açın.

DevTools ile konsol mesajlarını biçimlendirme ve stil oluşturma hakkında daha fazla bilgi edinmek için Konsol'daki mesajları biçimlendirme ve stil oluşturma dokümanına gidin.

konsol stili

Chromium sorunları: 1282837, 1282076

%s, %d, %i ve %f biçim belirleyicilerini düzgün şekilde destekleme

Konsol artık Konsol 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ı.

Konsol mesajında biçim belirleyicilerini destekleme

Chromium sorunları: 1277944, 1282076

Daha sezgisel konsol grubu filtresi

Konsol mesajı filtrelenirken, mesaj içeriği filtreyle eşleşiyorsa veya grubun (ya da üst grubun) başlığı filtreyle eşleşiyorsa artık bir konsol mesajı gösteriliyor. Daha önce, filtreye rağmen konsol grubu başlığı gösteriliyordu.

Ayrıca, bir konsol mesajı gösteriliyorsa ait olduğu grup (veya üst grup) da gösterilir.

konsol grubu filtresi

Chromium sorunu: 1068788

Kaynak eşlemeleriyle ilgili iyileştirmeler

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

Artık kaynak haritası dosyalarıyla Chrome uzantıları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 daha az karmaşa olacak şekilde iyileştirildi (ör. "../", "./" vb.). Bu, kaynak eşlemelerindeki mutlak kaynak URL'lerinin normalleştirilmesinin sonucudur.

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

Chromium sorunu: 1284737

Worker kaynak dosyalarını Kaynaklar panelinde görüntüleme

Göreceli SourceURL'ye sahip Worker (ör. web worker, service worker) kaynak dosyaları artık Kaynak panelinde gösteriliyor. Daha önce, çalışan 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 daha basit. Bu seçenek artık onay kutusu olarak sunuluyor. Daha önce açılır listeydi.

Bunun dışında, Otomatik Koyu Tema etkinleştirildiğinde Emulate prefers-color-scheme 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 sunuyor. Bu özellik sayesinde tarayıcı, kullanıcının işletim sisteminde koyu temaları etkinleştirmesi durumunda açık temalı sitelere otomatik olarak oluşturulan bir koyu tema uygular.

Otomatik koyu tema 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 renk seçebilir ve DevTools'taki Çekmece'yi 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 önemli noktalar

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

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