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ı'nda Yenilikler videosunu izleyebilirsiniz.

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

Artık Stiller bölmesinde CSS @supports kurallarını 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 kurallarını görüntüleyin. Düzenlemek için kuralın bildirimini 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ğeri 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

Kayıt seçiciyi özelleştirin

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 Kareler zaman çizelgesinde "Kısmen sunulan kareler" adlı yeni bir kare 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. Bununla birlikte, bazı karelerin birleştirici iş parçacığı tarafından yönlendirilen görsel güncellemeler (ör. kaydırma) üretmeye devam edebileceği durumlar vardır.

"Bırakılan karelerin" ekran görüntüleri hâlâ görsel güncellemeleri yansıttığından bu durum kullanıcıların kafasını karıştırıyor.

Yeni "Kısmen sunulan kareler", bazı içerikler karede zamanında sunulmasa da 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 değerini içeren bir kullanıcı aracısı dizesi vardır. (1289553)
  • Snippet'i artık 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üklüyor. Daha önce, konum doğru bir şekilde geri yüklenmiyordu ve hata ayıklamada sorunlara yol açı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

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