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

Sofia Emelianova
Sofia Emelianova
GitHub

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

Geliştirici Araçları'nda, eksik stil sayfalarıyla ilgili sorunları daha hızlı belirleyip hata ayıklamanıza yardımcı olacak çeşitli iyileştirmeler yapıldı:

  • 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ındaki satır içi hata ipuçlarını gösteriyor ve bu ifadelerin altını çiziyor.

Kaynaklar panelinde, fareyle üzerine gelindiğinde ipucu gösterilen altı çizili ifadeler.

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

Konsol, sorunlu ifadelerin bulunduğu satırlara bağlantılar sağlar.

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

Kaynaklara ve isteklere bağlantılar içeren Sorunlar paneli.

Chromium sorunları: 1440626, 1442198, 1453611.

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

Öğeler > Stiller'deki Yumuşatma Düzenleyici. 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 Yumuşatma Düzenleyici. 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 Alanı bölümüne depolama paketleri desteği eklendi. Depolama paketleri birbirinden bağımsızdır. Bu nedenle, veri dilimleri için çıkarma önceliği 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 istediğiniz grubu seçin.

Bir paketin meta verilerini görüntüleme.

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

Yeni birleştirilmiş meta veri görünümü.

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:

Tablo başlıkları kontrolünün başarılı olması

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.

Geliştirici Araçları'ndaki yenilikler

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