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

Jecelyn Yeen

Hata ayıklama sırasında kareyi yeniden başlatma

Çerçeveyi yeniden başlat özelliği geri döndü. Bir işlevin herhangi bir yerinde duraklatıldığında önceki kodu yeniden çalıştırabilirsiniz. Daha önce, bu özelliğin desteği sonlandırılmış ve Chrome 92'de kararlılık sorunları nedeniyle kaldırılmıştı.

Bu örnekte hata ayıklayıcı başlangıçta toggleColorScheme işlevinin sonuna yakın bir yerdeki kesme noktasında (343. satır) duraklatılmıştır. Hata ayıklama işlemini toggleColorScheme işlevinin başından başlatmak için Hata Ayıklama Aracı bölmesinde Çağrı yığını bölümünü genişletin, toggleColorScheme işlevini sağ tıklayın ve Çerçeveyi yeniden başlat'ı seçin.

Chromium sorunu: 1303521

Kaydedici panelindeki yavaş oynatma seçenekleri

Artık kullanıcı akışlarını daha yavaş bir hızda (yavaş, çok yavaş ve son derece yavaş) yeniden oynatabilirsiniz. Bu seçenekler, her adımın ekranda yeniden oynatılmasını daha iyi gözlemlemenize olanak tanır.

Kaydedici panelini açın ve yeni bir kayıt başlatın. Kayıt tamamlandığında Tekrar oynat açılır menüsünü tıklayın. Tekrar oynatmayı başlatmak için bir hız seçin.

Chromium sorunu: 1306756

Kaydedici paneli için uzantı oluşturma

Artık yeniden oynatma komut dosyalarını istediğiniz biçimde dışa aktarmak için bir Chrome uzantısı oluşturabilir veya yükleyebilirsiniz. Nasıl oluşturacağınızı öğrenmek için Kaydedici uzantısı API belgelerine bakın.

Demo uzantısı yüklemek için dokümanda açıklanan bu adımları uygulayın.

Chromium sorunu: 1325751

Kaynaklar panelinde dosyaları oluşturulma / dağıtılma bazında gruplandırma

Kaynaklar panelinde dosyalarınızı düzenlemek için yeni Dosyaları oluşturulma / dağıtılma bazında gruplandır seçeneğini etkinleştirin. Çerçevelerle (ör. React, Angular) web uygulamaları geliştirirken derleme araçları (ör. Webpack, Vite) tarafından oluşturulan sıkıştırılmış dosyalar nedeniyle kaynak dosyalarda gezinmek zor olabilir.

Bu onay kutusunu işaretleyerek dosyaları daha hızlı aramak için 2 kategoriye ayırabilirsiniz:

• Yazar. IDE'nizde görüntülediğiniz kaynak dosyalara benzer. Geliştirici Araçları, bu dosyaları kaynak haritalara (derleme araçlarınız tarafından sağlanır) göre oluşturur.
• Dağıtıldı. Tarayıcının okuduğu gerçek dosyalar. Bu dosyalar genellikle küçültülür.

Bu React demoğuyla kendiniz de deneyin.

Chromium sorunu: 960909

Performans analizleri panelinde yeni kullanıcı zamanlamaları izleme

Performans analizleri panelindeki yeni Kullanıcı Zamanlamaları kanalıyla kaydınızdaki performance.measure() işaretlerini görselleştirin.

Örneğin, bu web sayfası, metnin yüklenmesi için geçen süreyi hesaplamak üzere performance.measure() yöntemini kullanır.

Sayfa yüklemesini ölçmeye başladığınızda kayıtta Kullanıcı Zamanlamaları kanalı gösterilir. Ayrıntılarını yan bölmede görüntülemek için zamanlama öğesini tıklayın.

Chromium sorunu: 1322808

Bir öğenin atanmış aralığını gösterme

Öğeler panelindeki aralıksız öğelerin yeni bir slot rozeti var. Sayfa düzeni sorunlarında hata ayıklama yaparken, düğümün düzenini daha hızlı etkileyen öğeyi belirlemek için bu özelliği kullanın.

Bu örnekte, birkaç adlandırılmış yuvaya sahip kartlar bulunmaktadır. Bir kartın person-occupation yuvasını inceleyin, yanındaki slot rozetini tıklayarak atanmış yuvasını görün.

Bir web bileşeninin gölge DOM'unu doldurmak için kullanılabilecek esnek bir şablon oluşturmak üzere <template> ve <slot> öğelerinin nasıl kullanılacağını öğrenin.

Chromium sorunu: 1018906

Performans kayıtları için donanım eşzamanlılığını simüle etme

Performans panelindeki yeni Donanım eşzamanlılığı ayarı, geliştiricilerin navigator.hardwareConcurrency tarafından raporlanan değeri yapılandırmasına olanak tanır.

Bazı uygulamalar, uygulamalarının paralellik derecesini kontrol etmek için navigator.hardwareConcurrency kullanır (ör. Emscripten pthread havuzu boyutunu kontrol etmek için). Geliştiriciler bu özellik sayesinde uygulama performanslarını farklı çekirdek sayılarıyla test edebilir.

Chromium sorunu: 1297439

CSS değişkenlerini otomatik olarak tamamlarken renk olmayan değerleri önizleme

DevTools, CSS değişkenlerini otomatik olarak tamamlarken artık renk olmayan değişkeni anlamlı bir değerle doldurur. Böylece, değerin düğümde nasıl bir değişiklik yapacağını önizleyebilirsiniz.

Chromium sorunu: 1285091

Geri/ileri önbellek bölmesinde engelleyen kareleri belirleme

Uygulama panelindeki Geri/ileri önbelleği bölmesinde, sayfanın bfcache için uygun olmasını engelleyen engelleyen çerçeveleri belirlemenize yardımcı olacak yeni bir çerçeve bölümü vardır.

Chromium sorunu: 1288158

JavaScript nesneleri için iyileştirilmiş otomatik tamamlama önerileri

JavaScript nesnesi özelliklerinin otomatik tamamlama özelliği artık şu sıraya göre gösterilir:

1. Kendine ait dizilenebilir özellikler
2. Listelenemeyen kendi özellikleri
3. Devralınan, dizine eklenebilen özellikler
4. Devralınan, dizine eklenemeyen özellikler

Daha önce, öneri yalnızca devralınan mülkler yerine kendi mülkleri tercih ettiği ve tüm devralınan mülklere eşit öncelik verildiği için geliştiriciler alakalı mülkleri bulmakta zorlanıyordu.

Chromium sorunu: 1299241

Kaynak harita iyileştirmeleri

Genel hata ayıklama deneyimini iyileştirmek için kaynak haritalarda yapılan birkaç düzeltmeyi aşağıda bulabilirsiniz:

• Kesme noktaları artık sourceURL ek açıklamalarıyla satır içi <script> olarak çalışır.
• Hata ayıklayıcı artık Kapsam görünümündeki blok kapsamlı değişkenleri kaynak haritalarla çözmektedir.
• Hata ayıklayıcı artık kaynak haritalarla Kapsam görünümündeki ok işlevlerindeki değişkenleri çözer.

Chromium sorunları: 1329113, 1322115

Diğer öne çıkan özellikler

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

• Kaynaklar paneli için Otomatik tamamlama ayarı düzeltildi. Daha önce, otomatik tamamlama ayarı devre dışı olsa bile her zaman açıktı. (1323286)
• En son renk şeması biçimini ayrıştırmak için Uygulama panelindeki Manifest sekmesi güncellendi. (1318305)
• Performans analizleri panelindeki <script async> oluşturma engelleme sorunlarıyla ilgili öneriler iyileştirildi. Daha önce Geliştirici Araçları, komut dosyası zaten async olarak işaretlenmiş olsa bile add async attribute to the script tag olarak ayarlanmasını öneriyordu. (1334096)
• Performans analizleri paneli artık düzen kaymalarının olası nedenleri olarak iFrame'leri algılar. Iframe ayrıntılarını Ayrıntılar bölmesinde görüntüleyebilirsiniz. (1328873)
• Komut menüsünde dosyayı aç seçeneği kullanıldığında, yazılan dosyalar (kaynak haritalar tarafından oluşturulan dosyalar) artık daha yüksek bir sıralamaya sahip olduğundan benzer şekilde adlandırılmış dağıtılmış komut dosyalarının üzerinde görünür. (1312929)

Ö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.

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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