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şturmaya başla ve sayfayı yeniden yükle düğmesini tıkladığınızda hem ekran görüntüsünü hem de izi temizliyor.

Önceden Performans panelinde önceki kayıtlara ait ekran görüntülerinin bulunduğu bir zaman çizelgesi gösteriliyordu. Bu durum, gerçek ölçümün ne zaman başladığını görmekte zorlanıyordu. Panel artık kaydın boş bir izle başlamasını garanti etmek için her zaman ilk olarak about:blank sayfasına gider. Bu, daha önce aynı performansı gösteren Performans Analizleri paneliyle uyumludur.

Yeniden yüklemede Performans Paneli temizleniyor.

Chromium sorunları: 1101268, 1382044

Kaydedici güncellemeleri

Kullanıcı işlemleri akışınızın kodunu Kaydedici'de görüntüleyin ve vurgulayın

Kaydedici artık bölünmüş kod görünümü sunduğu için kullanıcı akış kodunuzu daha kolay şekilde görüntüleyebilir. 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, sol taraftaki her bir adımın üzerine geldiğinizde ilgili kodu vurgulayarak akışınızı takip etmenizi kolaylaştırır. Nightwatch Test komut dosyası gibi biçimler arasında geçiş yapmanızı sağlayan açılır listeyi kullanarak kod biçimini değiştirebilirsiniz.

Kaydedici'deki kod görünümü.

Chromium sorunu: 1385489

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

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çenekle, XPath gibi seçicileri dahil edebilir veya hariç tutabilirsiniz. Böylece, kullanıcı süreçlerinizde yalnızca istediğiniz seçicileri yakaladığınızdan emin olabilirsiniz.

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

Chromium sorunu: 1384431

Kayıt sırasında kullanıcı akışını düzenleme

Kaydedici artık kayıt sırasında düzenlemeye izin vererek size gerçek zamanlı değişiklikler yapma esnekliği sunar. Ayarlama yapmak için artık kaydı sonlandırmanız gerekmiyor.

Kullanıcı işlemleri akışı kaydı sırasında düzenleme.

Chromium sorunu: 1381971

Otomatik, yerinde güzel baskı

Kaynaklar paneli artık küçültülmüş kaynak dosyalarını otomatik olarak okunaklı hale getirmektedir. Bu işlemi geri almak için okunaklı yazdır düğmesini { } tıklayabilirsiniz.

Önceden Kaynaklar panelinde varsayılan olarak küçültülmüş içerik gösteriliyordu. İçeriği biçimlendirmek için, güzel yazdır düğmesini manuel olarak tıklamanız gerekiyordu. Ayrıca, okunaklı içerik aynı sekmede değil, başka bir ::formatted sekmesinde gösteriliyordu.

Otomatik yerinde güzel yazdırma işleminden önce ve sonra küçültülmüş bir dosya gösterin.

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çimlerinde söz dizimi vurgulamayı iyileştirdi. Böylece Vue, JSX, Dart, LESS, SCSS, SASS ve satır içi CSS gibi kodu daha kolay okuyabilir ve yapısını tanıyabilirsiniz.

Vue'da söz dizimi vurgulama.

Ayrıca Geliştirici Araçları; Vue, satır içi HTML ve TSX için satır içi önizlemeyi de iyileştirdi. Bir değişkenin değerini önizlemek için fareyle 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 haritasını gösteriyor. Örneğin, bir SCSS dosyasını açtığınızda kaynak haritası 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, 13651, 136521

Konsolda 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 özelliklerinin davranışı bağlama göre değişir.
Otomatik tamamlama deneyimi; Konsol, Kaynaklar ve Öğeler panellerindeki metin düzenleyiciler arasında tutarlıdır.

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

Konsol'da bir otomatik tamamlama önerileri listesi gösterilir. Üst seçeneğin etrafında, gezinmenin henüz başlamadığını belirten incelikli ve noktalı bir kenarlık bulunur.
Konsol, Enter tuşuna bastığınızda satırı yürütür. Önceden, en popüler önerinin yer aldığı satır otomatik olarak tamamlanıyordu. Otomatik tamamlama için Tab veya Arrow Right tuşlarına basın.
Arrow up ve Arrow down kısayollarını kullanarak öneri listesinde gezinirken Konsol, belirlediğiniz seçeneği vurgular.
Gezinme sırasında belirlenen seçenekle otomatik tamamlama yapmak 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 tuşlarını kullanın.

Chromium sorunları: 1399436, 1276960

Çeşitli öne çıkan anlar

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

Geliştirici Araçları'nda, satır içi komut dosyalarında debugger ifadesinde durdurulamayan 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 seçeneğini kullanarak ayarları değiştirin. (1139616)
Kaynaklar panelindeki Snippet'ler bölmesi, Konsola benzer şekilde gelişmiş otomatik tamamlama özelliğini destekler. (772949)

Ö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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.