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ı JSON dosyası olarak içe ve dışa aktarmayı destekliyor. 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ışı 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 aktarın . 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.

Recorder panelindeki dışa aktarma seçenekleri

Chromium sorunu: 1257499

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

Dizi katmanları, stil özgünlüğüne ilişkin anlaşmazlıkları önlemek için CSS dosyalarınız üzerinde daha net bir kontrol 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 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 DevTools'da HWB renk biçimini görüntüleyebilir ve düzenleyebilirsiniz.

Renk biçimini değiştirmek için Stiller bölmesinde Üst Karakter tuşunu basılı tutarak 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şim sağlayıcıları doğru şekilde değerlendirip gösteriyor. Daha önce, Konsol ve Kaynaklar panelinde özel erişim sağlayıcıları olan 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 panelinde 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. Dönem modunu seçin ve Dönem başlat'ı 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 evinde zaman aralığı ve anlık görüntü modu

Chromium sorunu: 772558

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 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.