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ştirmeler yapması için güvenilir araçlar sunmaya devam edecek. Önemli gelişmeleri kutlamak için Yenilikler sekmesinde birkaç tıklama yapın.

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

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

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

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

Chromium sorunları: 1222574, 1222573

Kaydedici paneliyle ilgili iyileştirmeler

Varsayılan olarak yaygın seçicileri destekleme

Kayıt sırasında benzersiz bir seçici belirlenirken Kaydedici paneli artık aşağıdaki özelliklere sahip öğeleri otomatik olarak tercih ediyor:

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

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

Varsayılan olarak yaygın seçicileri destekleme

Kaydın seçicisini özelleştirme

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

Örneğin, bu demo sayfasında seçici olarak data-automate özelliği kullanılı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]) inceleyin.

Kaydın seçicisini özelleştirme

Özel seçici seçiminin sonucu

Kaydı yeniden adlandırma

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

Kaydı yeniden adlandırma

Fareyle üzerine gelindiğinde 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 özelliklerini önizlemek için fareyle sınıfın veya işlevin üzerine gelebilirsiniz. Önceden yalnızca işlev adı ve kaynak kodundaki konumuna giden bir bağlantı gösteriliyordu.

Fareyle üzerine gelindiğinde 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, Frames zaman çizelgesi, ana iş parçacığı çalışması geciken tüm kareleri "bırakılan kareler" olarak görselleştiriyordu. Ancak bazı durumlarda, bazı kareler yine de birleştirici iş parçacığı tarafından yönlendirilen görsel güncellemeler (ör. kaydırma) üretebilir.

Bu durum, "Bırakılan kareler"in ekran görüntüleri görsel güncellemeleri yansıtmaya devam ettiği için kullanıcıların kafasını karıştırıyor.

Yeni "Kısmen sunulan kareler" metriği, 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 önemli noktalar

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

  • Emüle edilmiş cihazlar için iPhone kullanıcı aracısı dizeleri güncellendi. iPhone 5'ten sonraki tüm iPhone sürümlerinde iPhone OS 13_2_3 ile kullanıcı aracısı dizesi bulunur. (1289553)
  • Artık snippet'i doğrudan bir JavaScript dosyası olarak kaydedebilirsiniz. Daha önce, .js dosya uzantısını manuel olarak eklemeniz gerekiyordu. (1137218)
  • Kaynaklar paneli, kaynak eşlemeyle hata ayıklama yapılırken artık kapsam değişkeni adlarını doğru şekilde gösteriyor. Daha önce, kaynak eşleme 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 şekilde geri yüklenmediği için hata ayıklama sırasında sorun yaşanıyordu. (1294422)

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartış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.