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ı destekliyor. Bu ekleme, kullanıcı akışlarının paylaşılmasını kolaylaştırır ve hata raporlama için faydalı olabilir.

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

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

  • JSON dosyası olarak dışa aktarı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 bakın.

Recorder panelindeki dışa aktarma seçenekleri

Chromium sorunu: 1257499

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

Basamaklı katmanlar, stil özgüllüğü çakışmalarını önlemek için CSS dosyalarınızın daha açık bir şekilde kontrol edilmesini sağlar. Bu özellik özellikle büyük kod tabanları, tasarım sistemleri ve uygulamalardaki üçüncü taraf stillerini 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 özelliğe sahip olduğundan box arka planı yeşildir.

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

Chromium sorunu: 1240596

hwb() renk işlevi desteği

Artık Geliştirici Araçları'nda 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österimi iyileştirildi.

DevTools artık özel erişim yöntemlerini doğru şekilde değerlendirip görüntülüyor. Daha önce, Console ve Sources panelinde özel erişimcileri olan sınıfları genişletemiyordunuz.

Console'daki özel mülkler

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

Diğer önemli noktalar

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

  • Geri/ileri önbellek, mevcut olduğunda bfcache'i engelleyen uzantı kimliğini artık gösteriyor.( 1284548)
  • Dizi benzeri nesneler, CSS sınıfı adları, map.get ve HTML etiketleri için sabit otomatik tamamlama desteği. (1297101, 1297491, 1293807, 1296983)
  • Kelimeler çift tıklanıp otomatik tamamlama işlemi geri alındığında oluşan yanlış vurgular düzeltildi. (1298437, 1298667)
  • Kaynaklar panelindeki yorum klavye kısayolu düzeltildi. (1296535)
  • Kaynaklar panelinde çoklu seçim için Alt (Seçenekler) tuşunun kullanımına yönelik desteği 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 iki modu daha destekliyor: zaman aralığı ve anlık görüntü.

Ö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 Zaman aralığını 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 Kayması değerlerini öğ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 belgelerini inceleyin.

Lighthouse panelinde 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, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.