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

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

Jecelyn Yeen

Chrome 100

Karşınızda 100. Chrome sürümü! Chrome Geliştirici Araçları, geliştiricilerin web'de uygulama geliştirmeleri için güvenilir araçlar sunmaya devam edecek. Bu dönüm noktalarını kutlamak için biraz zaman ayırarak Yenilikler sekmesini tıklayın.

Her zaman olduğu gibi, resmi tıklayarak DevTools'daki Yenilikler videosunu izleyebilirsiniz.

Stiller bölmesinde @supports değerlerini görüntüleyin ve düzenleyin

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

Kurallarda @supports mesajlarını görüntüleyin ve düzenleyin

Chromium sorunları: 1222574, 1222573

Kaydedici paneli iyileştirmeleri

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

veri-test kimliği
veri testi
data-qa
data-cy
data-test-id
data-qa-id
veri testi

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

Örneğin, bu demo sayfasını kullanarak yeni bir kayıt başlatabilirsiniz. Bir e-posta adresi girin ve seçici değerini kontrol edin.

E-posta öğesinde data-testid tanımlanmış olduğundan bu öğe, id veya class özellikleri yerine otomatik olarak seçici olarak kullanılır.

Ortak seçicileri varsayılan olarak destekleme

Kayıt seçiciyi özelleştirme

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

Örneğin, bu demo sayfası, seçici olarak data-automate özelliğini kullanır. yeni bir kayıt başlatın ve seçici özelliği olarak data-automate özelliğini girin. Bir e-posta adresi girin ve seçici değerine ([data-automate=email-address]) dikkat edin.

Kayıt seçiciyi özelleştirme

Özel seçici seçiminin sonucu

Kaydı yeniden adlandırma

Artık Kaydedici panelinde kaydın adının yanındaki düzenle düğmesi (kalem simgesi) ile kaydı yeniden adlandırabilirsiniz.

Kaydı yeniden adlandırma

Fareyle üzerine gelindiğinde sınıf/işlev özelliklerini önizle

Artık hata ayıklama sırasında Kaynaklar panelinde fareyle bir sınıfın veya işlevin üzerine gelerek özelliklerini önizleyebilirsiniz. Daha önce, kaynak kodunda yalnızca işlev adı ve konumuna yönelik bir bağlantı gösteriliyordu.

Fareyle üzerine gelindiğinde sınıf/işlev özelliklerini önizle

Chromium sorunu: 1049947

Performans panelinde kısmen sunulan kareler

Performans kaydı artık Kareler zaman çizelgesinde "Kısmen sunulan kareler" adlı yeni bir kare kategorisi görüntülüyor.

Önceden Kareler zaman çizelgesi, ana iş parçacığının gecikmeli çalıştığı 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 da vardır.

"Atlanan kareler" ekran görüntüleri hâlâ görsel güncellemeleri yansıttığından bu durum kullanıcıların kafasını karıştırmaktadır.

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

Performans panelinde kısmen sunulan kareler

Chromium sorunu: 1261130

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler şunlardır:

Öykünülmüş cihazlar için güncellenen iPhone kullanıcı aracısı dizeleri. 5'ten sonraki tüm iPhone sürümlerinde, iPhone OS 13_2_3 ile bir user-agent 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)
Kaynaklar paneli, kaynak eşlemeyle hata ayıklarken artık kapsam değişkeni adlarını doğru şekilde gösteriyor. Önceden Kaynaklar paneli, kaynak eşlemesi sağlansa bile küçültülmüş kapsam değişkeni adlarını gösteriyordu. (1294682)
Kaynaklar paneli artık sayfa yüklendiğinde kaydırma konumunu doğru bir şekilde geri yüklemektedir. Daha önce konum geri yüklenmediği için hata ayıklama zahmetine yol açıyordu. (1294422)

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.