Bu sayfa, Cloud Translation API ile çevrilmiştir.

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 raporlaması için faydalı olabilir.

Örneğin, bu JSON dosyasını indirin. Verileri içe aktarma düğmesiyle içe aktarabilir ve kullanıcı akışını tekrar 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ın. Kaydı JSON dosyası olarak indirin.
@puppeteer/tekrar oynatma 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ümanları inceleyin.

Kaydedici panelindeki dışa aktarma seçenekleri

Chromium sorunu: 1257499

Basamaklı katmanları Stiller bölmesinde görüntüleyin

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 uygulamalardaki üçüncü taraf stillerinin yönetiminde kullanışlı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 belirginliğe sahip olduğundan box arka planı yeşildir.

Basamaklı katmanları Stiller bölmesinde görüntüleyin

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.

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

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

hwb() renk işlevi

Özel mülklerin görüntülenmesi 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

Çeşitli öne çıkan anlar

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

Geri-ileri önbellek, artık mevcut olduğunda bfcache'i engelleyen uzantı kimliğini gösteriyor.( 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)
Kelimelerin çift tıklanması ve otomatik tamamlamanın geri alınması sırasındaki hatalı 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ş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 dışında artık kullanıcı akışlarını ölçmede iki modu daha destekliyor: zaman aralığı ve anlık görüntü.

Örneğin, kullanıcı etkileşimlerini analiz etmek için zaman aralığı 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şimin neden olduğu Toplam Engelleme Süresi ve Cumulative Layout Shift 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 belgelerine bakın.

Lighthouse panel evindeki 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ı 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 > 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.