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

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

Ayrıca, kaydı dışa aktarabilirsiniz. Bir 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/replay komut dosyası olarak dışa aktarın. Kaydı, Kuklacı Tekrar Oynatma komut dosyası olarak indirin.
Puppeteer komut dosyası olarak dışa aktar . Kaydı Puppeteer komut dosyası olarak indirin.

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

Kaydedici panelindeki dışa aktarma seçenekleri

Chromium sorunu: 1257499

Stiller 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 stillerini yönetirken 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 belirliliğ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 için destek

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

Stiller bölmesinde, renk biçimini değiştirmek için Üst Karakter tuşunu basılı tutun ve herhangi 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ünümü iyileştirildi

Geliştirici Araçları artık özel erişimcileri düzgün şekilde değerlendirip gösteriyor. Önceden, Konsol'da ve Kaynaklar panelinde özel erişimcileri olan sınıfları genişletemiyordunuz.

Konsoldaki özel mülkler

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

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer 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)
Kelimeler çift tıklandığında ve otomatik tamamlama geri alınırken yapılan yanlış vurgulamalar 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 panelinde yeni zaman aralığı ve anlık görüntü modu

Lighthouse paneli, mevcut gezinme modundan ayrı olarak kullanıcı akışlarını ölçme konusunda artık 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 Zaman aralığını başlat'ı tıklayın. Sayfada bir kahveyi tıklayıp zaman aralığını sonlandırın. Etkileşimden kaynaklanan 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 dokümanlarına bakı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'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.