Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Sofia Emelianova

Eksik stil sayfalarında hata ayıklama iyileştirildi

Geliştirici Araçları'nda, eksik stil sayfalarıyla ilgili sorunları daha hızlı tespit etmenize ve hata ayıklamanıza yardımcı olacak birçok iyileştirme yapıldı:

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

Kaynaklar panelinde, ipuçları içeren altı çizili ifadeler.

Konsol, artık başarısız isteklere yönelik bağlantılara ek olarak, yüklenemeyen bir stil sayfasına referans veren tam satırın bağlantılarını da sağlamaktadır.

Konsol, sorunlu ifadeleri içeren tam satırların bağlantılarını sunar.

Ağ paneli, Başlatan sütununu sürekli olarak, yüklenemeyen bir stil sayfasına başvuruda bulunan satırın bağlantılarıyla doldurur.
Sorunlar paneli, bozuk URL'ler, başarısız istekler ve yanlış yerleştirilen @import ifadeleri dahil olmak üzere tüm stil sayfaları yükleme sorunlarını listeler.

Kaynaklara ve isteklere yönelik bağlantıların bulunduğu Sorunlar paneli.

Chromium sorunları: 1440626, 1442198, 1453611.

Öğeler > Stiller > Yumuşak Geçiş Düzenleyici'de doğrusal zamanlama desteği

Öğeler > Stiller bölümündeki Yumuşak Geçiş Düzenleyici'yi kullanarak transition-timing-function ve animation-timing-function değerlerini tek tıklamayla ayarlayabilirsiniz. Yumuşak Geçiş Düzenleyici, bu sürümde doğrusal zamanlama işlevi desteğini almaktadır.

Doğrusal zamanlamaları yapılandırmak için doğrusal seçici düğmesini tıklayın. Denetim noktası eklemek için çizginin herhangi bir yerini tıklayın. Bir denetim noktasını kaldırmak için çift tıklayın. Hazır ayarlardan birini de seçebilirsiniz: linear, elastic, bounce veya emphasized. Doğrusal ayarlamanın nasıl çalıştığını görmek için videoyu izleyin.

Chromium sorunu: 1421241.

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

Uygulama > Depolama bölümüne depolama paketleri desteği sunulur. Depolama paketleri birbirinden bağımsızdır. Bu sayede, 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 kemana göz atın. DevTools'u açıp Application > Storage > Indexed DB'ye gidin ve kodu çalıştırın. Geliştirici Araçları artık paketleri ve içeriklerini gösterir. Meta verilerini görüntülemek için bir paket seçin.

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ırmaktadır. Bu sürüme eklenen dört yeni denetim özellikle tablo başlıkları ve altyazıları, giriş düğmesi adları ve dil uyuşmazlıkları ile ilgili çeşitli erişilebilirlik sorunlarını tespit eder. Örneğin:

Tablo başlığı kontrolünden geçti.

Ayrıca değişikliklerin tam listesine de bakabilirsiniz. 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 iyileştirilmiş ekran okuma

Geliştirici Araçları artık daha fazla kısayolu destekliyor ve ekran okuyucularla ilgili sorunları düzeltiyor:

Artık Windows'da ve birçok Linux dağıtımında Üst Karakter+F10 gibi bir klavye kısayoluyla içerik menüsünü açabilirsiniz. MacOS kısayolları için Alternatif işaretçi işlemleri başlıklı makaleyi inceleyin.
Ekran okuyucu uygulamaları:
- Onay kutusu etiketleri gereksiz bir şekilde iki kez duyurulmaz.
- "Sütun başlığını oku" kısayoluna bastığınızda sıralanabilir sütunlar için sütun başlığı adları duyurulur.

DevTools ekibi, bu iyileştirmeleri gerçekleştirdikleri için Yanling Wang ve Elorm Coch'a teşekkür eder.

Chromium sorunları: 1446482, 1414952.

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler ve iyileştirmeler şunlardır:

Ağ paneli, zaman çizelgesiyle (1422552) etkileşimde bulunmanızdan sonra bile ağ etkinliğini kaydetmeye devam eder.
Kapsam paneli artık önceden işleme etkinleştirmesi veya geri-ileri önbellek gezinmesi olup olmadığını algılar ve sayfayı yeniden yüklemenizi ister (1393057).
Artık Kaynaklar > Kesme noktaları bölmesinde klavye kullanarak gezinebilirsiniz: Yukarı ok, aşağı ok ile ilerlemek ve Boşluk seçmek için 1446150 tuşlarına basın.
Ağ panelinde (1450622) HAR dosyalarının yüklenmesi ve filtrelenmesi işlemi düzeltildi.
Performans panelindeki Flamechart, izleri daha iyi hale getirmek için artık izler arasına küçük boşluklar yerleştiriyor (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'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.