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

Jecelyn Yeen

Chrome 100

100. Chrome sürümüne hoş geldiniz. Chrome Geliştirici Araçları, geliştiricilerin web'de geliştirme yapabilmesi için güvenilir araçlar sunmaya devam edecektir. Bu dönüm noktalarını kutlamak için Yenilikler sekmesine göz atın.

Her zamanki gibi, resmi tıklayarak en son Geliştirici Araçları'ndaki Yenilikler videosunu izleyebilirsiniz.

Stil bölmesindeki @supports at kurallarını görüntüleme ve düzenleme

Artık CSS @supports at-kuralları Stiller bölmesinde görüntüleyebilir ve düzenleyebilirsiniz. Bu değişiklikler, at-kuralları ile gerçek zamanlı deneme yapmayı kolaylaştırır. Bu demo sayfasını açın, <div class=”box”> öğesini inceleyin, Stiller bölmesinde @supports at-kuralları görüntüleyin. Düzenlemek için kuralın tanımını tıklayın.

@supports at kurallarını görüntüleme ve düzenleme

Chromium sorunları: 1222574, 1222573

Kaydedici panelinde yapılan iyileştirmeler

Yaygın seçicileri varsayılan olarak destekleme

Kaydedici paneli, kayıt sırasında benzersiz bir seçici belirlerken artık aşağıdaki özelliklere sahip öğeleri otomatik olarak tercih eder:

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

Yukarıdaki özellikler, test otomasyonunda kullanılan yaygın seçicilerdir.

Örneğin, bu demo sayfasıyla yeni bir kayıt başlatın. Bir e-posta adresi girin ve seçici değerini gözlemleyin.

E-posta öğesinde data-testid tanımlandığından, id veya class özellikleri yerine otomatik olarak seçici olarak kullanılır.

Yaygın seçicileri varsayılan olarak destekleme

Kaydın seçicisini özelleştirme

Yaygın seçicileri kullanmıyorsanız bir kaydın seçicisini özelleştirebilirsiniz.

Örneğin, bu demo sayfasında seçici olarak data-automate özelliği kullanılmaktadır. Yeni bir kayıt başlatın ve seçici özelliği olarak data-automate değerini girin. Bir e-posta adresi girin ve seçici değerini ([data-automate=email-address]) gözlemleyin.

Kaydın seçicisini özelleştirme

Özel seçici seçiminin sonucu

Kayıtları yeniden adlandırma

Artık Kaydedici panelinde, kaydın başlığının yanındaki düzenle düğmesini (kalem simgesi) kullanarak kayıtları yeniden adlandırabilirsiniz.

Kayıtları yeniden adlandırma

Fareyle üzerine geldiğinizde sınıf/işlev özelliklerini önizleme

Artık hata ayıklama sırasında Kaynaklar panelinde bir sınıfın veya işlevin üzerine gelerek özelliklerini önizleyebilirsiniz. Daha önce yalnızca işlev adını ve kaynak koddaki konumunun bağlantısını gösteriyordu.

Fareyle üzerine geldiğinizde sınıf/işlev özelliklerini önizleme

Chromium sorunu: 1049947

Performans panelinde kısmen gösterilen kareler

Performans kaydı artık Çerçeveler zaman çizelgesinde "Kısmen sunulan çerçeveler" adlı yeni bir çerçeve kategorisi gösteriyor.

Daha önce Kareler zaman çizelgesi, ana iş parçacığında gecikmeli çalışma içeren tüm kareleri "atlanan kareler" olarak görselleştiriyordu. Ancak bazı karelerin, birleştirici iş parçacığı tarafından yönlendirilen görsel güncellemeler (ör. kaydırma) oluşturmaya devam edebileceği durumlar vardır.

Bu "atlanan kareler"in ekran görüntülerinde hâlâ görsel güncellemeler gösterildiği için kullanıcılar bu durumdan rahatsız olur.

Yeni "Kısmen sunulan kareler", bazı içeriklerin karede zamanında sunulmamasına rağmen sorunun görsel güncellemeleri tamamen engelleyecek kadar ciddi olmadığını daha sezgisel bir şekilde belirtmeyi amaçlar.

Performans panelinde kısmen gösterilen kareler

Chromium sorunu: 1261130

Diğer öne çıkan özellikler

Bu sürümdeki bazı önemli düzeltmeler şunlardır:

  • Yapay zekayla taklit edilen cihazlar için iPhone kullanıcı aracısı dizeleri güncellendi. 5'ten sonraki tüm iPhone sürümlerinde iPhone OS 13_2_3 ile bir kullanıcı aracısı dizesi bulunur. (1289553)
  • Artık snippet'i doğrudan JavaScript dosyası olarak kaydedebilirsiniz. Daha önce .js dosya uzantısını manuel olarak eklemeniz gerekiyordu. (1137218)
  • Kaynak haritasıyla hata ayıklama yapılırken Kaynaklar panelinde artık kapsam değişkeni adları doğru şekilde gösteriliyor. Daha önce, kaynak eşlemesi sağlanmasına rağmen Kaynaklar panelinde küçültülmüş kapsam değişkeni adları gösteriliyordu. (1294682)
  • Kaynaklar paneli artık sayfa yüklendiğinde kaydırma konumunu doğru şekilde geri yüklemektedir. Daha önce, konum doğru şekilde geri yüklenmediğinden hata ayıklamada sorun yaşanıyordu. (1294422)

Ö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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.