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

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

Jecelyn Yeen

Yeniden yüklemede Performans Paneli temizleniyor

Performans paneli artık Profil oluşturmayı başlat ve sayfayı yeniden yükle düğmesini tıkladığınızda hem ekran görüntüsünü hem de izlemeyi temizler.

Daha önce, Performans panelinde önceki kayıtların ekran görüntülerini içeren bir zaman çizelgesi gösteriliyordu. Bu durum, gerçek ölçümün ne zaman başladığını görmeyi zorlaştırıyordu. Panel artık kaydın boş bir izle başlayacağını garanti etmek için her zaman ilk olarak about:blank sayfasına gider. Bu, daha önce aynısını yapan Performans Analizleri paneliyle de paraleldir.

Yeniden yüklemede Performans Paneli temizleniyor.

Chromium sorunları: 1101268, 1382044

Kaydedici güncellemeleri

Kaydedici'deki kullanıcı işlemlerinizin kodunu görüntüleyin ve vurgulayın

Kaydedici artık bölünmüş kod görünümü sunarak kullanıcı akış kodunuzu görüntülemeyi kolaylaştırır. Kod görünümüne erişmek için bir kullanıcı işlemleri akışı açın ve Kodu Göster'i tıklayın.

Kaydedici, soldaki her bir adımın üzerine fareyle geldiğinizde ilgili kodu vurgular. Böylece, akışınızı takip edebilirsiniz. Kod biçimini, Gece Saati Testi komut dosyası gibi biçimler arasında geçiş yapmanıza olanak tanıyan açılır menüyü kullanarak değiştirebilirsiniz.

Kod görünümü'nü kaydedin.

Chromium sorunu: 1385489

Kaydın seçici türlerini özelleştirme

Yalnızca sizin için önemli olan seçici türlerini yakalayan kayıtlar oluşturabilirsiniz. Yeni bir kayıt oluştururken seçici türlerini özelleştirmeye yönelik yeni seçenek sayesinde, XPath gibi seçicileri dahil edebilir veya hariç tutabilirsiniz. Böylece, kullanıcı akışlarınızda yalnızca istediğiniz seçicileri yakaladığınızdan emin olabilirsiniz.

Seçici türlerini özelleştirmek için yeni seçenek.

Chromium sorunu: 1384431

Kayıt sırasında kullanıcı işlemleri akışını düzenleyin

Kaydedici artık kayıt sırasında düzenlemeye izin vererek gerçek zamanlı değişiklik yapma esnekliği sağlar. Düzenleme yapmak için artık kaydı sonlandırmanız gerekmez.

Kullanıcı akışı kaydı sırasında düzenleme yapılıyor.

Chromium sorunu: 1381971

Otomatik, yerinde güzel baskı

Kaynaklar paneli, artık küçültülmüş kaynak dosyaları otomatik olarak uygun şekilde yazdırır. Bu işlemi geri almak için pretty yaz düğmesini { } tıklayabilirsiniz.

Daha önce Kaynaklar paneli varsayılan olarak küçültülmüş içerik gösteriyordu. İçeriği biçimlendirmek için, güzel yazdır düğmesini elle tıklamanız gerekiyordu. Üstelik, oldukça basılmış içerik aynı sekmede değil, başka bir ::formatted sekmesinde gösteriliyordu.

Yazdırma işleminin öncesinde ve sonrasında otomatik olarak yerleştirilmiş bir dosyayı küçültün.

Chromium sorunları: 1383453, 1382752, 1382397

Vue, SCSS ve diğerleri için daha iyi söz dizimi vurgulama ve satır içi önizleme

Kaynaklar paneli, yaygın olarak kullanılan çeşitli dosya biçimlerinin söz dizimi vurgulamasını geliştirerek kodu daha kolay okumanızı ve Vue, JSX, Dart, LESS, SCSS, SASS ve satır içi CSS dahil olmak üzere yapısını tanımanızı sağladı.

Vue'da söz dizimi vurgulama

Geliştirici Araçları ayrıca Vue, satır içi HTML ve TSX için satır içi önizlemeyi de iyileştirdi. Değerini önizlemek için fareyle bir değişkenin üzerine gelin.

Vue için satır içi önizleme.

Bunun dışında Geliştirici Araçları artık Kaynaklar panelinde bir stil sayfasının kaynak eşlemesini gösteriyor. Örneğin, bir SCSS dosyasını açtığınızda, kaynak eşleme bağlantısını tıklayarak ilgili CSS dosyasına erişebilirsiniz.

SASS için kaynak eşleme bağlantısı.

Chromium sorunları: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 171710}

Console'da ergonomik ve tutarlı Otomatik Tamamlama

Geliştirici Araçları, aşağıdaki değişiklikleri uygulayarak otomatik tamamlama deneyimini iyileştirir:

Otomatik tamamlama için her zaman Tab kullanılır.
Arrow right ve Enter davranışı bağlama göre değişir.
Otomatik tamamlama deneyimi tüm metin düzenleyicilerde, Konsol, Kaynaklar ve Öğeler panellerinde tutarlıdır.

Örneğin, Konsola cons yazdığınızda şunlar olur:

Konsol'da otomatik tamamlama önerileri listesi görüntülenir. Üst seçeneğin etrafında, gezinmenin henüz başlamadığını belirten noktalı bir kenarlık bulunur.
Enter tuşuna bastığınızda Konsol satırı yürütür. Daha önce, en üstteki önerinin bulunduğu satır otomatik olarak tamamlanıyordu. Otomatik tamamlama için Tab veya Arrow Right tuşuna basın.
Konsol, Arrow up ve Arrow down kısayollarını kullanarak öneri listesinde gezinirken belirlenen seçeneği vurgular.
Gezinme sırasında belirlenen seçenekle otomatik olarak tamamlamak için Tab, Enter veya Arrow Right klavye tuşlarını kullanın.
Kodun ortasında düzenleme yaparken, örneğin, imleç n ile s arasındayken otomatik tamamlama için Tab, satırı yürütmek için Enter ve imleci ileri taşımak için Arrow Right kullanın.

Chromium sorunları: 1399436, 1276960

Öne çıkan çeşitli unsurlar

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

Satır içi komut dosyalarındaki debugger ifadesinde durma işleminin başarısız olduğu Geliştirici Araçları'ndaki bir regresyon sorunu çözüldü. (1385374)
console.trace() iletilerini varsayılan olarak genişletmenize veya daraltmanıza olanak tanıyan yeni bir Konsol ayarı. Ayarlar > Tercihler > console.trace() iletilerini varsayılan olarak genişlet aracılığıyla ayarları değiştirin. (1139616)
Kaynaklar panelindeki Snippet'ler bölmesi, Konsol'a benzer şekilde geliştirilmiş otomatik tamamlamayı destekler. (772949)

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