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

Jecelyn Yeen

Yeniden yüklemede performans panelini temizleme

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 izlemeyi temizliyor.

Daha önce Performans panelinde, önceki kayıtlardan alınan 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şlamasını sağlamak için her zaman önce about:blank sayfasına gider. Bu, Performans Analizleri paneliyle uyumludur.

Chromium sorunları: 1101268, 1382044

Kaydedici güncellemeleri

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

Kaydedici artık bölünmüş kod görünümü sunuyor. Bu sayede kullanıcı akışı kodunuzu görüntülemek daha kolay. 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, soldaki her adımın üzerine geldiğinizde ilgili kodu vurgulayarak akışınızı takip etmenizi kolaylaştırır. Açılır menüyü kullanarak kod biçimini değiştirebilirsiniz. Bu menü, Nightwatch Test komut dosyası gibi biçimler arasında geçiş yapmanıza olanak tanır.

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 kayıt oluştururken seçici türlerini özelleştirme seçeneği sayesinde XPath gibi seçicileri dahil edebilir veya hariç tutabilirsiniz. Böylece, kullanıcı akışlarınızda yalnızca istediğiniz seçicileri yakalayabilirsiniz.

Chromium sorunu: 1384431

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

Kaydedici artık kayıt sırasında düzenlemeye olanak tanıyarak gerçek zamanlı değişiklik yapma esnekliği sunuyor. Artık ayarlamalar yapmak için kaydı sonlandırmanız gerekmiyor.

Chromium sorunu: 1381971

Otomatik yerinde okunaklı yazdırma

Kaynaklar paneli artık küçültülmüş kaynak dosyalarını yerinde otomatik olarak okunaklı hâle getiriyor. Bu işlemi geri almak için okunaklı yazdırma düğmesini { } tıklayabilirsiniz.

Daha önce, Kaynaklar panelinde varsayılan olarak küçültü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 yazdırılmış içerik aynı sekmede değil, başka bir ::formatted sekmesinde gösteriliyordu.

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, Vue, JSX, Dart, LESS, SCSS, SASS ve satır içi CSS dahil olmak üzere yaygın olarak kullanılan çeşitli dosya biçimlerinde söz dizimi vurgulamayı geliştirerek kodu daha kolay okumanıza ve yapısını tanımanıza olanak tanır.

Ayrıca, Vue, satır içi HTML ve TSX için satır içi önizleme de iyileştirildi. Değerini önizlemek için bir değişkenin üzerine gelin.

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

Chromium sorunları: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Konsolda ergonomik ve tutarlı otomatik tamamlama

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

• Tab her zaman otomatik tamamlama için kullanılır.
• Arrow right ve Enter simgelerinin davranışı bağlama göre değişir.
• Otomatik tamamlama deneyimi, metin düzenleyicilerde, Console, Sources ve Elements panellerinde tutarlıdır.

Örneğin, Console'da cons yazdığınızda olanlar:

• Konsol'da, otomatik tamamlama önerilerinin listesi gösterilir. En üstteki seçeneğin etrafında, gezinmenin henüz başlamadığını belirten ince bir noktalı kenarlık bulunur.

• Konsol, Enter tuşuna bastığınızda 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.

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

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

• Kodun ortasında düzenleme yaparken (ör. imleç n ve s arasındayken) otomatik tamamlama için Tab, satırı yürütmek için Enter ve imleci ileriye taşımak için Arrow Right tuşunu kullanın.

Chromium sorunları: 1399436, 1276960

Diğer önemli noktalar

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

• Geliştirici Araçları'nda satır içi komut dosyalarındaki debugger ifadesinde durdurulamamasına neden olan gerileme sorunu düzeltildi. (1385374)
• console.trace() mesajlarını varsayılan olarak genişletmenize veya daraltmanıza olanak tanıyan yeni bir Konsol ayarı. Ayarlar > Tercihler > console.trace() mesajlarını varsayılan olarak genişlet seçeneğini kullanarak ayarları açıp kapatın. (1139616)
• Kaynaklar panelindeki Snippet'ler bölmesi, Konsol'a benzer şekilde gelişmiş otomatik tamamlamayı destekler. (772949)

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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