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

Jecelyn Yeen

Hata ayıklama sırasında çerçeveyi yeniden başlat

Çerçeveyi yeniden başlatma özelliği geri geldi. İşlevin herhangi bir yerinde duraklatıldığında önceki kodu yeniden çalıştırabilirsiniz. Daha önce bu özelliğin desteği sonlandırılmış ve kararlılık sorunları nedeniyle Chrome 92 sürümünde kaldırılmıştı.

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

Chromium sorunu: 1303521

Kaydedici panelindeki yavaş tekrar oynatma seçenekleri

Artık kullanıcı akışlarını daha yavaş (yavaş, çok yavaş ve çok yavaş) tekrar oynatabilirsiniz. Bu seçenekler, her bir adımı ekranda tekrar oynatabilmenizi sağlar.

Kaydedici panelini açın ve yeni bir kayıt başlatın. Kayıt tamamlandıktan sonra Tekrar oynat açılır düğmesini tıklayın. Tekrar oynatmak için hız seçin.

Chromium sorunu: 1306756

Kaydedici paneli için bir uzantı oluşturun

Artık tekrar oynatma komut dosyalarını favori biçiminizde dışa aktarmak için bir Chrome uzantısı oluşturabilir veya yükleyebilirsiniz. Nasıl oluşturacağınızı öğrenmek için Recorder uzantı API'si dokümanlarına bakın.

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

Chromium sorunu: 1325751

Dosyaları, Kaynaklar panelinde Yazılan / Dağıtılanlara göre gruplandırın

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

Bu onay kutusuyla, daha hızlı dosya araması için dosyaları 2 kategoriye ayırabilirsiniz:

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

Bu React demosu ile kendiniz deneyin.

Chromium sorunu: 960909

Performans analizleri panelindeki yeni Kullanıcı Zamanlamaları kanalı

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

Örneğin bu web sayfasında, metin yükleme için geçen süreyi hesaplamak için performance.measure() yöntemi kullanılır.

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

Chromium sorunu: 1322808

Bir öğenin atanan alanını göster

Öğeler panelindeki yuvalanmış öğelerde yeni bir slot rozeti vardır. Düzen sorunlarını ayıklarken, düğümün düzenini daha hızlı etkileyen öğeyi tanımlamak için bu özelliği kullanın.

Bu örnek, birkaç adlandırılmış yuva içeren kartlar içerir. Bir kartın person-occupation yuvasını inceleyin ve atanan yuvayı görüntülemek için yanındaki slot rozetini tıklayın.

Daha sonra bir web bileşeninin gölge DOM'sini doldurmak üzere kullanılabilecek esnek bir şablon oluşturmak için <template> ve <slot> öğelerini nasıl kullanacağınızı öğrenin.

Chromium sorunu: 1018906

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

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

Bazı uygulamalar, uygulamalarının paralellik derecesini kontrol etmek için navigator.hardwareConcurrency kullanır (örneğin, Emscripten pthread havuzu boyutunu kontrol etmek). Bu özellik sayesinde geliştiriciler, uygulama performanslarını farklı temel sayılarla test edebilirler.

Chromium sorunu: 1297439

CSS değişkenleri otomatik tamamlanırken renk olmayan değeri önizle

CSS değişkenleri otomatik olarak tamamlanırken Geliştirici Araçları artık renk olmayan değişkeni anlamlı bir değerle doldurur. Böylece düğümdeki değerin ne tür bir değişikliği olacağını önizleyebilirsiniz.

Chromium sorunu: 1285091

Geri-ileri önbellek bölmesindeki engelleyen kareleri tanımla

Geri-ileri önbellek bölmesinde Uygulama panelindeki yeni çerçeveler bölümü, sayfanın bf için uygun olmasını engelleyebilecek blokeli çerçeveleri belirlemenize yardımcı olur.

Chromium sorunu: 1288158

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

JavaScript nesne özellikleri için otomatik tamamlama artık şu sıraya göre görüntüleniyor:

1. Kendi numaralanabilir özellikleri
2. Numaralandırılamayan mülklerin sahibi
3. Devralınan numaralanabilir özellikler
4. Devralınan ve numaralandırılamayan özellikler

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

Chromium sorunu: 1299241

Kaynak eşleme iyileştirmeleri

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

• Kesme noktaları artık kaynak URL ek açıklamalarıyla satır içi <script> içinde çalışıyor.
• Hata ayıklayıcı artık kaynak eşlemelerini kullanarak Kapsam görünümündeki blok kapsamlı değişkenleri çözer.
• Hata ayıklayıcı artık Kapsam görünümündeki ok işlevlerindeki değişkenleri kaynak eşlemeleriyle çözer.

Chromium sorunları: 1329113, 1322115

Çeşitli öne çıkan anlar

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

• Kaynaklar panelindeki Otomatik tamamlama ayarı düzeltildi. Önceden, otomatik tamamlama özelliği ayar bile devre dışı olsa bile her zaman açık durumdaydı. (1323286)
• Uygulama panelindeki Manifest sekmesi, en son renk şeması biçimini ayrıştıracak şekilde güncellendi. (1318305)
• Performans analizleri panelindeki <script async> oluşturma engelleme sorunları için öneriler iyileştirildi. Geliştirici Araçları daha önce, komut dosyası zaten eşzamansız olarak işaretlenmiş olmasına rağmen add async attribute to the script tag uygulamasını öneriyordu. (1334096)
• Performans analizleri paneli artık iframe'leri düzen kaymalarının olası nedenleri olarak algılıyor. 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ılırken, yazılan dosyalar (kaynak eşlemeleri tarafından oluşturulan dosyalar) artık daha üst sıralarda yer alıyor. Böylece, benzer şekilde adlandırılmış ve dağıtılan komut dosyalarının üzerinde görünüyorlar. (1312929)

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

Geliştirici Araçları'ndaki yenilikler

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