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

Eksik stil sayfalarıyla ilgili hata ayıklama iyileştirildi

Geliştirici Araçları, eksik stil sayfalarıyla ilgili sorunları daha hızlı belirleyip hata ayıklamanıza yardımcı olacak bir dizi iyileştirme aldı:

• Kaynaklar > Sayfa ağacı artık yalnızca başarıyla dağıtılan ve yüklenen stil sayfalarını göstererek kafa karışıklığını en aza indiriyor.
• Kaynaklar > Düzenleyici artık başarısız olan @import, url() ve href ifadelerinin yanında satır içi hata ipuçlarını gösteriyor ve altını çiziyor.

• Konsol, başarısız olan isteklere yönelik bağlantıların yanı sıra artık yüklenemeyen bir stil sayfasına referans veren tam satıra yönelik bağlantılar da sunuyor.

• Ağ paneli, Başlatan sütununu, yüklenemeyen bir stil sayfasına referans veren tam satırın bağlantılarıyla tutarlı bir şekilde doldurur.

• Sorunlar panelinde, bozuk URL'ler, başarısız istekler ve yanlış yerleştirilmiş @import ifadeleri dahil olmak üzere tüm stil sayfası yükleme sorunları listelenir.

Chromium sorunları: 1440626, 1442198, 1453611.

Elements > Styles > Easing Editor'da doğrusal zamanlama desteği

Öğeler > Stiller'deki Kolaylaştırma Düzenleyicisi, transition-timing-function ve animation-timing-function değerlerini tek bir tıklamayla ayarlamanıza olanak tanır. Bu sürümde Easing Editor, doğrusal zamanlama işlevi desteği alıyor.

Doğrusal zamanlamaları yapılandırmak için doğrusal seçici düğmesini tıklayın. Kontrol noktası eklemek için çizginin herhangi bir yerini tıklayın. Bir kontrol noktasını kaldırmak için ilgili noktayı çift tıklayın. Hazır ayarlardan birini de seçebilirsiniz: linear, elastic, bounce veya emphasized. Doğrusal ayarlamayı uygulamada görmek için videoyu izleyin.

Chromium sorunu: 1421241.

Depolama alanı grupları desteği ve meta veri görünümü

Uygulama > Depolama bölümü depolama paketleri desteği alır. Depolama paketleri birbirinden bağımsızdır. Bu nedenle, veri dilimleri için çıkarma önceliğini belirleyebilir ve en değerli verilerin silinmediğinden emin olabilirsiniz. Her depolama paketi, IndexedDB ve CacheStorage gibi yerleşik depolama API'leriyle ilişkili verileri depolayabilir.

Özelliği test etmek için bu fiddle'a göz atın. Geliştirici Araçları'nı açın, Application (Uygulama) > Storage (Depolama) > Indexed DB'ye gidin ve kodu çalıştırın. DevTools artık grupları ve içeriklerini gösteriyor. Meta verilerini görüntülemek için bir paket seçin.

Birleştirilmiş meta veri görünümü artık yerel, oturum ve önbellek depolama bölümleri için de kullanılabilir.

Chromium sorunları: 1448011, 1406017.

Lighthouse 10.3.0

Lighthouse paneli artık Lighthouse 10.3.0'ı çalıştırıyor. Bu sürümde, en önemlisi tablo başlıkları ve altyazılar, giriş düğmesi adları ve dil uyuşmazlıkları ile ilgili çeşitli erişilebilirlik sorunlarını yakalayan dört yeni denetim eklenmiştir. Örneğin:

Değişikliklerin tam listesini de inceleyin. Geliştirici Araçları'nda Lighthouse panelini kullanmanın temel bilgileri için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 772558.

Erişilebilirlik: Klavye komutları ve iyileştirilmiş ekran okuma

DevTools artık daha fazla kısayolu destekliyor ve ekran okuyucularla ilgili sorunları düzeltiyor:

• Artık bağlam menüsünü klavye kısayoluyla (ör. Windows ve birçok Linux dağıtımında üst karakter+F10) açabilirsiniz. MacOS kısayolları için Alternatif işaretçi işlemleri başlıklı makaleyi inceleyin.
• Ekran okuyucu uygulamaları:
  • Onay kutusu etiketlerini gereksiz yere iki kez duyurmaz.
  • "Sütun başlığını oku" kısayoluna bastığınızda sıralanabilir sütunların sütun başlığı adlarını duyurur.

DevTools ekibi, bu iyileştirmeleri kullanıma sunan Yanling Wang ve Elorm Coch'a teşekkür eder.

Chromium sorunları: 1446482, 1414952.

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

• Ağ paneli, zaman çizelgesiyle etkileşim kurduktan sonra bile ağ etkinliğini kaydetmeye devam eder (1422552).
• Kapsam paneli artık önceden oluşturma etkinleştirme veya geri/ileri önbellek gezinmesi olup olmadığını tanıyor ve yeniden yüklemenizi istiyor (1393057).
• Artık klavyeyi kullanarak Kaynaklar > Kesme Noktaları paneline gidebilirsiniz: taşımak için Yukarı ok ve Aşağı ok, seçmek için Boşluk (1446150).
• Ağ panelinde HAR dosyalarının yüklenmesi ve filtrelenmesiyle ilgili sorun düzeltildi (1450622).
• Performans panelindeki alev grafiği artık izler arasında küçük boşluklar bırakarak izlerin daha iyi oluşturulmasını sağlıyor (1452150).
• Kaynak eşlemelerine yerleştirilmiş dosyalar için otomatik eşleme düzeltildi (1446383).

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

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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