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

Jecelyn Yeen

Chrome 100 sürümü

İşte 100. Chrome sürümü! Chrome Geliştirici Araçları, geliştiricilerin web'de derlemeleri için güvenilir araçlar sağlamaya devam edecek. Dönüm noktalarını kutlamak için bir dakikanızı ayırıp Yenilikler sekmesini tıklayın.

Her zaman olduğu gibi, resmi tıklayarak Geliştirici Araçları'ndaki Yenilikler videosunu izleyebilirsiniz.

Stiller bölmesinde @supports kurallarını görüntüleyin ve düzenleyin

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

@supports&#39;i kurallarda görüntüleyin ve düzenleyin

Chromium sorunları: 1222574, 1222573

Kaydedici paneli iyileştirmeleri

Yaygın seçicileri varsayılan olarak destekler

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

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

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

Örneğin bu tanıtım sayfasından yeni bir kayıt başlatabilirsiniz. Bir e-posta adresi girin ve seçici değeri gözlemleyin.

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

Yaygın seçicileri varsayılan olarak destekler

Kayıt seçiciyi özelleştirin

Ortak seçicileri kullanmıyorsanız bir kayıt 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ğeri ([data-automate=email-address]) gözlemleyin.

Kayıt seçiciyi özelleştirin

Özel seçici seçiminin sonucu

Kaydı yeniden adlandırma

Artık Kaydedici panelinde kayıt başlığının yanındaki düzenle düğmesini (kalem simgesi) kullanarak kaydı 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 fareyle bir sınıfın veya işlevin üzerine gelerek özelliklerini önizleyebilirsiniz. Daha önce, kaynak kodunda yalnızca işlev adı ve konumunun bir bağlantısı 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 gösterilen kareler" adlı yeni bir kare kategorisi gösteriyor.

Çerçeveler zaman çizelgesi daha önce, gecikmiş ana iş parçacığı çalışmasına sahip 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

Çeşitli öne çıkan anlar

Bu sürümde yer alan bazı önemli düzeltmeler şunlardır:

  • Emüle 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. Önceden, .js dosya uzantısını manuel olarak eklemeniz gerekiyordu. (1137218)
  • Kaynaklar paneli, kaynak eşleme ile hata ayıklarken artık kapsam değişken adlarını doğru bir şekilde gösteriyor. Daha önce, Kaynaklar paneli, kaynak eşlemesi sağlanmasına rağmen küçültülmüş kapsam değişkeni adlarını görüntülüyordu. (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, 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ı'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını 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.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü