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

Jecelyn Yeen

WebSocket isteklerini kısıtlama

Ağ paneli artık web yuvası isteklerinin kısıtlanmasını desteklemektedir. Daha önce ağ kısıtlama, web yuvası isteklerinde çalışmıyordu.

Ağ panelini açın, bir web yuvası isteğini tıklayın ve mesaj aktarımlarını gözlemlemek için Mesajlar sekmesini açın. Hızı azaltmak 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ızın 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'nin kullanıldığı 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 durumları gösterilir. Raporun ayrıntılarını görüntülemek için tıklayın.

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

Reporting API bölmesi

Chromium sorunu: 1205856

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

Bir kullanıcı akışı kaydını tekrar oynatırken Kaydedici paneli artık öğe görüntü alanında görünür olana veya tıklanabilir olana kadar bekler ya da adımı tekrar oynatmadan önce öğeyi otomatik olarak görüntü alanına kaydırmaya çalışır. Önceden, tekrar 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ı işlemleri akışı, menüyü açıp kapatmak ve menü öğesini tıklamaktır. Daha önce, menü öğesi hâlâ kayarak yer aldığı ve henüz görüntü alanında görünmediği için tekrar oynatma işlemi 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 çıkış koduyla günlük mesajlarının stilini doğru şekilde belirleme

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 günlük mesajlarını, genellikle tebeşir, renkler, ansi-colors, kleur gibi bazı stil kitaplıklarının yardımıyla ANSI kod dışına alma sıraları aracılığıyla renklendirmesi yaygın bir uygulamadır.

Bu değişiklikler sayesinde artık Node.js uygulamalarınızdaki hataları, doğru renklendirilmiş konsol mesajlarıyla ve Geliştirici Araçları'nı kullanarak sorunsuz bir şekilde ayıklayabilirsiniz. Kendiniz görüntülemek için bu demoyu açın.

Biçimlendirme ve biçimlendirme hakkında daha fazla bilgi Geliştirici Araçları'nı kullanarak konsol mesajlarına stil eklemek için Console'da mesajları biçimlendirme ve stil dokümanını inceleyin.

konsol stili

Chromium sorunları: 1282837, 1282076

%s, %d, %i ve %f biçim belirteçlerini gerektiği gibi destekleme

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

konsol mesajında destek biçimi belirteçleri

Chromium sorunları: 1277944, 1282076

Daha sezgisel konsol grup filtresi

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

Buna ek olarak, bir konsol mesajı gösterilirse ait olduğu grup (veya üst grup) da artık gösterilir.

konsol grubu filtresi

Chromium sorunu: 1068788

Kaynak eşleme iyileştirmeleri

Kaynak eşleme dosyalarıyla Chrome uzantısındaki hataları ayıklama

Artık kaynak eşleme dosyalarıyla Chrome uzantılarında hata ayıklayabilirsiniz. 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 eşleme dosyalarıyla Chrome uzantısındaki hataları ayıklama

Chromium sorunu: 212374

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

Kaynaklar panelindeki kaynak klasör ağacı artık klasör yapılarında ve adlandırmada daha az karmaşıklık (ör. "../", "./" vb.) olacak şekilde iyileştirildi. Bu durum, kaynak eşlemelerindeki mutlak kaynak URL'lerinin normalleştirilmesi sonucunda ortaya çıkar.

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

Chromium sorunu: 1284737

Çalışan kaynak dosyalarını Kaynaklar panelinde göster

Göreli SourceURL'ye sahip çalışan (ör. web çalışanı, hizmet çalışanı) kaynak dosyaları artık Kaynak panelinde görüntüleniyor. 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ştirilmiştir. Önceden bir açılır liste olarak kullanılan bu liste, artık onay kutusu olarak görünüyor.

Bunun dışında, Otomatik Koyu Tema etkinleştirildiğinde Emulate Preferreds-color-scheme (renk şemasını emüle etme) açılır listesi devre dışı bırakılır ve otomatik olarak prefers-color-scheme: dark (renk şemasını tercih eder) değerine ayarlanır.

Chrome 96, Android'de Otomatik Koyu Tema için bir Kaynak Denemesi sunuyor. 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 Tema emülasyonu

Chromium sorunu: 1243309

Dokunmaya duyarlı renk seçici ve bölünmüş ekran

Dokunmatik ekranlı cihazlarda, Geliştirici Araçları'ndaki parmak veya ekran kalemiyle renk seçebilir ve Çekmece'yi yeniden boyutlandırabilirsiniz.

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

Chromium sorunları: 1284245, 1284995

Çeşitli öne çıkan anlar

Bu sürümde yer alan bazı önemli düzeltmeler şunlardır:

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

  • Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
  • Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i Daha fazla > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
  • @ChromeDevTools adresinden tweet atabilirsiniz.
  • Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.