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

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

Sofia Emelianova

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

Geliştirici Araçları'nda, eksik stil sayfalarıyla ilgili sorunları daha hızlı tanımlamanıza 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ı artık yalnızca başarıyla dağıtılan ve yüklenen stil sayfalarını gösteriyor.
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ı çiziyor ve satır içi hata ipuçlarını gösteriyor.

Kaynaklar panelinde, ipuçlarıyla altı çizili ifadeler.

Konsol, başarısız isteklere yönelik bağlantıların yanı sıra artık yüklenemeyen bir stil sayfasına referans veren tam satırın bağlantılarını sağlıyor.

Console, sorunlu ifadeler içeren tam satırların bağlantılarını sağlar.

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

Kaynak ve istek bağlantılarının yer aldığı 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, tek tıklamayla transition-timing-function ve animation-timing-function değerlerini ayarlamanızı sağlar. Bu sürümde, Yumuşak Geçiş Düzenleyici 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. Denetim noktası eklemek için satırda herhangi bir yeri 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ü, depolama paketleri desteği alır. 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. Geliştirici Araçları'nı açın, Uygulama > Depolama > Dizine Eklenmiş 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ı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ü başarılı oldu.

Ayrıca değişikliklerin tam listesini de inceleyebilirsiniz. Geliştirici Araçları'nda Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme konusuna bakın.

Chromium sorunu: 772558.

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

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

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 etiketlerini gereksiz yere iki kez duyurmamalıdır.
- "Sütun başlığını oku" kısayoluna bastığınızda sıralanabilir sütunların sütun başlığı adlarını duyurur.

Geliştirici Araçları ekibi, bu iyileştirmeleri gerçekleştirdikleri için Yanling Wang ve Elorm Coch'a teşekkür ediyor.

Chromium sorunları: 1446482, 1414952.

Çeşitli öne çıkan anlar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları ş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ştirme veya geri-ileri önbellek üzerinden gezinme olup olmadığını algılar ve yeniden yükleme yapmanızı ister (1393057).
Artık klavyeyle Kaynaklar > Ayrılma noktaları bölmesine gidebilirsiniz: taşımak için yukarı ok ve aşağı ok, seçim yapmak için Boşluk (1446150).
Ağ panelinde (1450622) HAR dosyalarının yüklenmesi ve filtrelenmesi düzeltildi.
Performans panelindeki Flamechart, artık bu izleri daha iyi hale getirmek için aralarında 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, 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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.