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 inceleyin, 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:

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

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ında artık "Kısmen gösterilen kareler" adlı yeni bir kare kategorisi gösteriliyor. Kareler zaman çizelgesinde görünür.

Ç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" , karede bazı içerikler 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ı sorunlarını bildirmek için Diğer seçenekler'i Daha fazla > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları 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.