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

Sofia Emelianova
Sofia Emelianova
GitHub

Eksik stil sayfalarının hata ayıklama işlemi iyileştirildi

Eksik stil sayfalarıyla ilgili sorunları daha hızlı tespit edip hata ayıklamanıza yardımcı olmak için Geliştirici Araçları'nda çeşitli iyileştirmeler yapıldı:

  • Kaynaklar > Sayfa ağacı artık karışıklığı en aza indirmek için yalnızca başarıyla dağıtılan ve yüklenen stil sayfalarını gösterir.
  • Kaynaklar > Düzenleyici bölümünde, başarısız @import, url() ve href ifadelerinin yanında satır içi hata ipuçları gösterilir.

Kaynaklar panelinde ipucu içeren altı çizili ifadeler.

  • Konsol, başarısız isteklerin bağlantılarının yanı sıra artık yüklenemeyen bir stil sayfasına atıfta bulunan satırın tam bağlantısını da sağlar.

Console, sorunlu ifadelerin bulunduğu satırların bağlantılarını sağlar.

  • Ağ paneli, Başlatıcı sütununu, yüklenemeyen bir stil sayfasına referans veren 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.

Öğeler > Stiller > Easing Düzenleyici'de doğrusal zamanlama desteği

Öğeler > Stiller bölümündeki Yumuşatma Düzenleyicisi. Yumuşatma Düzenleyici, transition-timing-function ve animation-timing-function değerlerini tek tıklamayla ayarlamanıza olanak tanır. Bu sürümde, Yumuşatma Düzenleyicisi. Easing Editor doğrusal zamanlama işlevi desteğini alır.

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 ayarlama işlemini görmek için videoyu izleyin.

Chromium sorunu: 1421241.

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

Uygulama > Depolama bölümünde depolama paketleri desteği sunulur. Depolama paketleri birbirinden bağımsız olduğundan veri dilimleri için çıkarma önceliğini belirtebilir 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 sayfasına göz atın. Geliştirici Araçları'nı açın, Uygulama > Depolama > Dizine Eklenen Veritabanı'na gidin ve kodu çalıştırın. DevTools artık grupları ve içeriklerini gösterir. Meta verilerini görüntülemek için bir paket 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şik meta veri görünümü.

Chromium sorunları: 1448011, 1406017.

Lighthouse 10.3.0

Lighthouse panelinde artık Lighthouse 10.3.0 sürümü kullanılıyor. Bu sürümde en önemli değişiklik, tablo başlıklarıyla ve altyazılarla, giriş düğmesi adlarıyla ve dil uyuşmazlıklarıyla ilgili çeşitli erişilebilirlik sorunlarını tespit eden dört yeni denetimin eklenmesidir. Örneğin:

Tablo başlıklarını kontrol etme işleminin başarılı olduğu durum.

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

Chromium sorunu: 772558.

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

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

  • Artık içerik menüsünü klavye kısayoluyla açabilirsiniz. Örneğin, Windows ve birçok Linux dağıtımında Üst Karakter+F10 tuşlarına basarak içerik menüsünü açabilirsiniz. MacOS kısayolları için Alternatif işaretçi işlemleri bölümüne bakın.
  • Ekran okuyucu uygulamaları:
    • Onay kutusu etiketleri gereksiz yere iki kez duyurulmaz.
    • "Sütun başlığını oku" kısayoluna bastığınızda sıralanabilir sütunların sütun başlığı adlarını okur.

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

Chromium sorunları: 1446482, 1414952.

Diğer öne çıkan özellikler

Bu sürümdeki dikkate değer düzeltme ve iyileştirmelerden bazıları şunlardır:

  • Ağ paneli, zaman çizelgesiyle etkileşime geçtikten sonra bile ağ etkinliğini kaydetmeye devam eder (1422552).
  • Kapsam paneli artık ön oluşturma etkinleştirmesi veya geri/ileri önbellek gezinmesi olup olmadığını algılar ve sayfayı yeniden yüklemenizi ister (1393057).
  • Artık Kaynaklar > Kırılma noktaları bölmesine klavyeyle gidebilirsiniz: Taşımak için yukarı ok ve aşağı ok, seçmek için boşluk tuşlarını kullanın (1446150).
  • Ağ panelinde HAR dosyalarının yüklenmesi ve filtrelenmesi düzeltildi (1450622).
  • Performans panelindeki alev grafiği artık daha iyi oluşturmak için izlerle arasına küçük boşluklar ekliyor (1452150).
  • Kaynak haritalara 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, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.