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

Jecelyn Yeen

WebSocket isteklerini kısıtlama

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 isteklerini kısıtlama

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.

Endpoints (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.

Aşağıda, görüntü alanı dışında konumlandırılmış ve etkinleştirildiğinde kayarak açılan ekran dışı bir menü örneği verilmiştir. Kullanıcı akışı, menüyü açıp kapatmak ve menü öğesini tıklamaktır. Daha önce, menü öğesi kaymaya devam ettiği 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, DevTools 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 birlikte, 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.

Geliştirici Araçları 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 belirleyicileri 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 (ya da üst grubun) başlığı filtreyle eşleşiyorsa 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 eşleme 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 haritalarındaki mutlak kaynak URL'lerinin normalleştirilmesinin sonucudur.

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

Chromium sorunu: 1284737

Çalışan 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. Daha önce açılır liste olan bu seçenek artık onay kutusu olarak sunuluyor.

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 bir kaynak denemesi sunuyor. Bu özellik sayesinde tarayıcı, kullanıcı işletim sisteminde koyu temaları etkinleştirdiğinde 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 kaleminizi kullanarak renk seçebilir ve DevTools'taki Çekmece'yi yeniden boyutlandırabilirsiniz.

Google Pixelbook cihazının dokunmatik ekranıyla çekilen bir örneği aşağıda görebilirsiniz.

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

DevTools'taki Yenilikler serisinde ele alınan her şeyin listesi.