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.

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.

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.

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.

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.

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.

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.

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.

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 aşağıdakiler gerçekleşir:

• Konsol'da bir otomatik tamamlama önerileri listesi gösterilir. Üst seçeneğin etrafında gezinmenin henüz başlamadığını belirten 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 > Varsayılan olarak console.trace() iletilerini genişletin. (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ı sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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