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

Jecelyn Yeen

Kayıtlı kullanıcı akışlarını JSON dosyası olarak içe ve dışa aktarma

Kaydedici paneli artık kullanıcı akışı kayıtlarının JSON dosyası olarak içe ve dışa aktarılmasını desteklemektedir. Bu ekleme, kullanıcı akışlarının paylaşılmasını kolaylaştırır ve hata bildirme için yararlı olabilir.

Örneğin, bu JSON dosyasını indirin. İçe aktar düğmesiyle içe aktarabilir ve kullanıcı akışını yeniden oynatabilirsiniz.

Ayrıca kaydı da dışa aktarabilirsiniz. Kullanıcı akışını kaydettikten sonra dışa aktar düğmesini tıklayın. 3 dışa aktarma seçeneği vardır:

  • JSON dosyası olarak dışa aktar'ı tıklayın. Kaydı JSON dosyası olarak indirin.
  • @puppeteer/replay komut dosyası olarak dışa aktarın. Kaydı Puppeteer Replay komut dosyası olarak indirin.
  • Puppeteer komut dosyası olarak dışa aktarma . Kaydı Puppeteer komut dosyası olarak indirin.

Bu seçenekler arasındaki farklar hakkında daha fazla bilgi edinmek için dokümanlara göz atın.

Kaydedici panelindeki dışa aktarma seçenekleri

Chromium sorunu: 1257499

Stil bölmesinde basamaklı katmanları görüntüleme

Basamaklı katmanlar, stile özgü çakışmaları önlemek için CSS dosyalarınızın daha açık bir şekilde kontrol edilmesini sağlar. Bu, özellikle büyük kod tabanları, tasarım sistemleri ve uygulamalarda üçüncü taraf stilleri yönetirken yararlıdır.

Bu örnekte 3 basamaklı katman tanımlanmıştır: page, component ve base. Stiller bölmesinde her bir katmanı ve stillerini görüntüleyebilirsiniz.

Katman sırasını görüntülemek için katman adını tıklayın. page katmanı en yüksek özgürlüğe sahiptir, bu nedenle box arka planı yeşildir.

Stil bölmesinde basamaklı katmanları görüntüleme

Chromium sorunu: 1240596

hwb() renk işlevi için destek

Artık Geliştirici Araçları'nda HWB renk biçimini görüntüleyip düzenleyebilirsiniz.

Renk biçimini değiştirmek için Stiller bölmesinde Üst Karakter tuşunu basılı tutarken herhangi bir renk önizlemesini tıklayın. HWB renk biçimi eklendi.

Alternatif olarak, renk seçicide renk biçimini HWB olarak değiştirebilirsiniz.

hwb() renk işlevi

Özel mülklerin gösterilmesi iyileştirildi

Geliştirici Araçları artık özel erişimcileri doğru şekilde değerlendirip gösteriyor. Önceden, Konsol ve Kaynaklar panelinde özel erişimcilerin bulunduğu sınıfları genişletemiyordunuz.

Console'da özel mülkler

Chromium sorunları: 1296855, https://crbug.com/1303407

Diğer öne çıkan özellikler

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

  • Geri/ileri önbellek bölümünde artık mevcut olduğunda bfcache'i engelleyen uzantı kimliği gösteriliyor.( 1284548)
  • Dizi benzeri nesneler, CSS sınıf adları, map.get ve HTML etiketleri için otomatik tamamlama desteği düzeltildi. (1297101, 1297491, 1293807, 1296983)
  • Kelimeleri çift tıklayıp otomatik tamamlamayı geri aldığında yanlış vurgulama sorunu düzeltildi. (1298437, 1298667)
  • Kaynaklar panelindeki yorum klavye kısayolu düzeltildi. (1296535)
  • Kaynaklar panelinde birden fazla seçim yapmak için Alt (Seçenekler) tuşunu kullanma desteğini yeniden etkinleştirin. (1304070)

[Deneysel] Lighthouse panelindeki yeni zaman aralığı ve anlık görüntü modu

Lighthouse paneli, mevcut gezinme modunun yanı sıra kullanıcı akışlarını ölçmek için zaman aralığı ve anlık görüntü olmak üzere iki modu daha destekliyor.

Örneğin, kullanıcı etkileşimlerini analiz etmek için etkileşim süresi raporlarını kullanabilirsiniz. Bu demo sayfasını açın. Zaman aralığı modunu seçin ve Başlangıç zaman aralığı'nı tıklayın. Sayfada bir kahveyi tıklayın ve zaman aralığını sonlandırın. Etkileşimden kaynaklanan Toplam Engelleme Süresi ve Kümülatif Düzen Değişikliği'ni öğrenmek için raporu okuyun.

Her modun kendine özgü kullanım alanları, avantajları ve sınırlamaları vardır. Daha fazla bilgi için lütfen Lighthouse belgelerine göz atın.

Lighthouse panel evindeki zaman aralığı ve anlık görüntü modu

Chromium sorunu: 772558

Önizleme kanallarını indirme

Chrome Canary, Yeni geliştirilenler veya Beta'yı varsayılan geliştirme tarayıcınız olarak kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji web platformu API'lerini test etmenizi ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanızı sağlar.

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

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.