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

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

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ı:

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

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

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

Chromium sorunları: 1440626, 1442198, 1453611.

Elements'da doğrusal zamanlama desteği > Stiller > Yumuşak Geçiş Düzenleyici

Öğeler içindeki Yumuşak Geçiş Düzenleyici > Stiller, 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 alanı 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çıp Uygulama'ya gidin > Depolama > Dizine eklenmiş DB'yi ziyaret edip 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.

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 eklendi. Örneğin:

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"ya bastığınızda sıralanabilir sütunlar için sütun başlığı adlarını duyurur kısayolunu görürsünüz.

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 Kaynaklar > Klavyeyle Ayrılma noktaları bölmesi: Taşımak için yukarı ok ve aşağı ok, seçmek için Boşluk (1446150) tuşlarına basın.
• 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ı sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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