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

Jecelyn Yeen

Yeniden yükleme sırasında Performans panelini temizleme

Performans panelinde, Profil oluşturmaya başla ve sayfayı yeniden yükle düğmesini tıkladığınızda artık hem ekran görüntüsü hem de izleme temizlenir.

Daha önce Performans panelinde, önceki kayıtların ekran görüntülerinin yer aldığı bir zaman çizelgesi gösteriliyordu. Bu da gerçek ölçümün ne zaman başladığını görmeyi zorlaştırıyordu. Panel artık kayda boş bir izlemeyle başlamasını garanti etmek için her zaman önce about:blank sayfasına gider. Bu, daha önce aynı işlemi yapan Performans Analizleri paneliyle uyumludur.

Yeniden yükleme sırasında performans panelini temizleme.

Chromium sorunları: 1101268, 1382044

Kaydedici güncellemeleri

Kaydedici'de kullanıcı işlemlerinizin akışını görüntüleme ve kodunu vurgulama

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

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

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

Chromium sorunu: 1385489

Kayıtları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, kullanıcı akışlarınızda yalnızca istediğiniz seçicileri yakaladığınızdan emin olarak XPath gibi seçicileri dahil edebilir veya hariç tutabilirsiniz.

Seçici türlerini özelleştirmek için yeni 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üzenleme yapmanıza olanak tanıyarak gerçek zamanlı olarak değişiklik yapma esnekliği sunuyor. Artık düzenleme yapmak için kaydı sonlandırmanıza gerek yok.

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

Chromium sorunu: 1381971

Yerinde otomatik olarak okunaklı hâle getirme

Kaynaklar panelinde, küçültülmüş kaynak dosyaları artık otomatik olarak okunaklı hâle getiriliyor. İşlemi geri almak için okunaklı yazdırma düğmesini { } tıklayabilirsiniz.

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

Otomatik yerinde okunaklı hâle getirme işleminden önce ve sonra küçültülmüş bir dosyayı gösterin.

Chromium sorunları: 1383453, 1382752, 1382397

Vue, SCSS ve diğer diller 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çimleri için söz dizimi vurgulamayı iyileştirerek Vue, JSX, Dart, LESS, SCSS, SASS ve satır içi CSS dahil olmak üzere kodları daha kolay okumanızı ve yapılarını tanımanızı sağlar.

Vue'da söz dizimi vurgulama.

Ayrıca DevTools, Vue, satır içi HTML ve TSX için satır içi önizlemeyi de iyileştirdi. Değerini önizlemek için 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österir. Ö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, 1392106, 1149734

Console'da ergonomik ve tutarlı otomatik tamamlama

DevTools, aşağıdaki değişiklikleri uygulayarak otomatik tamamlama deneyimini iyileştirir:

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

Örneğin, Console'a cons yazdığınızda aşağıdakiler olur:

  • Konsol, otomatik tamamlama önerilerinin listesini gösterir. Üstteki seçeneğin etrafında, gezinmenin henüz başlamadığını belirten ince bir noktalı kenar çizgisi bulunur. En üstteki otomatik tamamlama seçeneğinin etrafındaki noktalı kenarlık.

  • Enter tuşuna bastığınızda Konsol satırı yürütür. Daha önce, satır en iyi öneriyle otomatik olarak tamamlanıyordu. Otomatik tamamlama için Tab veya Arrow Right tuşuna basın. Enter tuşuna basıldığında satırı yürütür.

  • Arrow up ve Arrow down kısayollarını kullanarak öneri listesinde gezinirken Konsol, seçili seçeneği vurgular. Öneriler arasında gezinirken öne çıkanlar.

  • Gezinme sırasında seçili seçenekle otomatik tamamlama yapmak için Tab, Enter veya Arrow Right klavye tuşlarını kullanın. Gezinme sırasında seçili seçenekle otomatik tamamlama.

  • Kodun ortasında düzenleme yaparken (ör. 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. Kodun ortasında düzenleme.

Chromium sorunları: 1399436, 1276960

Diğer öne çıkan özellikler

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

  • Satır içi komut dosyalarındaki debugger ifadesinde duraklayamadığı DevTools'daki bir gerileme sorunu çözüldü. (1385374)
  • console.trace() mesajlarını varsayılan olarak genişletmenize veya daraltmanıza olanak tanıyan yeni bir Console ayarı. Ayarlar > Tercihler > console.trace() mesajlarını varsayılan olarak genişlet bölümünden ayarları değiştirin. (1139616)
  • Kaynaklar panelindeki Snippet'ler bölmesi, Konsol'a benzer şekilde gelişmiş otomatik tamamlamayı destekler. (772949) Snippet'lerde otomatik tamamlama.

Ö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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.

Geliştirici Araçları'ndaki yenilikler

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