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

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şlat özelliği geri döndü! İşlevde bir yerde duraklatıldığında önceki kodu yeniden çalıştırabilirsiniz. Daha önce bu özellik kullanımdan kaldırılmış ve kararlılık sorunları nedeniyle Chrome 92'de kaldırılmıştı.

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

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

Chromium sorunu: 1303521

Kaydedici panelinde yavaş tekrar oynatma seçenekleri

Artık kullanıcı akışlarını daha düşük hızlarda (yavaş, çok yavaş ve son derece yavaş) yeniden oynatabilirsiniz. Bu seçenekler, ekrandaki her adımın tekrarını daha iyi gözlemlemenizi sağlar.

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

Kaydedici panelinde yavaş tekrar oynatma seçenekleri

Chromium sorunu: 1306756

Kaydedici paneli için uzantı oluşturma

Tekrar oynatılan komut dosyalarını en sevdiğiniz biçimde dışa aktarmak için artık bir Chrome uzantısı oluşturabilir veya yükleyebilirsiniz. Nasıl uzantı oluşturacağınızı öğrenmek için Recorder uzantısı API'si dokümanlarına bakın.

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

Kaydedici paneli için özel uzantı

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ı Yazılan / Dağıtılana göre 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 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:

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

Bu React demosu ile kendiniz deneyin!

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

Chromium sorunu: 960909

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

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

Örneğin, bu web sayfasında geçen metin yükleme süresini hesaplamak için performance.measure() yöntemi kullanılmaktadı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 zamanlamalar öğesini tıklayın.

Performans analizleri panelindeki Kullanıcı Zamanlamaları kanalı

Chromium sorunu: 1322808

Bir öğenin atanan slotunu göster

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

Bu örnekte, adlandırılmış birkaç alanın bulunduğu kartlar yer alır. Bir kartın person-occupation yuvasını inceleyin ve yanındaki slot rozetini tıklayarak atanmış yuvasını görüntüleyin.

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.

Bir öğenin atanan slotunu göster

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 raporlanan değeri yapılandırmasına olanak tanır.

Bazı uygulamalar, uygulamalarının paralellik derecesini denetlemek (örneğin, Emscripten iş parçacığı havuzu boyutunu kontrol etmek) için navigator.hardwareConcurrency özelliğini kullanır. Geliştiriciler bu özellik sayesinde farklı çekirdek sayılarıyla uygulama performanslarını test edebilirler.

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

Chromium sorunu: 1297439

CSS değişkenlerini otomatik tamamlarken renk olmayan değeri önizle

Geliştirici Araçları, CSS değişkenlerini otomatik olarak tamamlarken artık renk olmayan değişkeni anlamlı bir değerle dolduruyor. Böylece, düğümde ne tür bir değişikliğin olacağını önizleyebilirsiniz.

CSS değişkenlerini otomatik tamamlarken renk olmayan değeri önizle

Chromium sorunu: 1285091

Geri-ileri önbellek bölmesinde engelleyen çerçeveleri tanımlayın

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

Geri-ileri önbellek bölmesinde engelleyen çerçeveleri tanımlayın

Chromium sorunu: 1288158

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

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

Numaralandırılabilir özelliklere sahip olma
Numaralandırılamayan kendi mülkleriniz
Devralınan numaralandırılabilir özellikler
Devralınan numaralandırılamayan özellikler

Önceden, öneri devralınan mülklere kıyasla yalnızca kendi mülklerini tercih ettiğinden ve devralınan tüm mülklere eşit öncelik verildiğinden geliştiriciler alakalı mülkleri bulmakta zorlanıyordu.

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

Chromium sorunu: 1299241

Kaynak eşlemeleriyle ilgili iyileştirmeler

Aşağıda, genel hata ayıklama deneyimini iyileştirmek için kaynak eşlemeleriyle ilgili birkaç düzeltme sunulmuştur:

Kesme noktaları artık sourceURL ek açıklamalarıyla satır içinde <script> çalışır.
Hata ayıklayıcı, artık kaynak eşlemeleriyle Kapsam görünümünde blok kapsamlı değişkenleri çözümliyor.
Hata ayıklayıcı, artık Kapsam görünümündeki ok işlevlerindeki değişkenleri kaynak eşlemeleriyle çözümliyor.

Chromium sorunları: 1329113, 1322115

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler şunlardır:

Kaynaklar paneli için Otomatik tamamlama ayarı düzeltildi. Daha önce, ayar devre dışı bırakılmış olsa bile otomatik tamamlama özelliği her zaman açıktı. (1323286)
Uygulama panelindeki Manifest sekmesi en son renk şeması biçimini ayrıştırmak üzere güncellendi. (1318305)
Performans analizleri panelindeki <script async> oluşturmayı engelleyen soruna ilişkin öneriler iyileştirildi. Geliştirici Araçları daha önce komut dosyası eşzamansız olarak işaretlenmiş olmasına rağmen add async attribute to the script tag işlemi için öneride bulunuyordu. (1334096)
Performans analizleri paneli artık düzen kaymalarının olası nedenleri olarak iframe'leri algılamaktadır. iframe ayrıntılarını Ayrıntılar bölmesinde görüntüleyebilirsiniz. (1328873)
Komut menüsünde dosya açtığınızda, yazılan dosyalar (kaynak eşlemeleri tarafından oluşturulan dosyalar) artık daha üst sıralarda yer alıyor ve benzer ada sahip dağıtılmış komut dosyalarının üzerinde görünüyor. (1312929)

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