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

Jecelyn Yeen

Kaydedici: Adımlar için kopyalama seçenekleri, sayfa içi tekrar oynatma, adımın bağlam menüsü

Kaydedici panelinde yeni kopyalama seçenekleri.

Kaydedici'de mevcut bir kullanıcı işlemleri akışını açın. Daha önce, kullanıcı akışını yeniden oynattığınızda Geliştirici Araçları, oynatmayı her zaman sayfaya giderek veya sayfayı yeniden yükleyerek başlatıyordu.

En son güncellemelerle birlikte Kaydedici, gezinme adımını ayrı olarak gösterir. Sayfa içi tekrar oynatma için sağ tıklayıp kaldırabilirsiniz.

Bunun dışında, tüm kullanıcı akışını dışa aktarmak yerine bir adımı sağ tıklayıp *Kaydedici panelinde panoya kopyalayabilirsiniz. Uzantılarla da çalışır. Örneğin, bir adımı Nightwatch Test komut dosyası olarak kopyalamayı deneyin. Bu özellik sayesinde mevcut tüm komut dosyalarını kolayca güncelleyebilirsiniz.

Daha önce adım menüsüne yalnızca 3 nokta düğmesiyle erişebiliyordunuz. Artık menüye erişmek için adımın herhangi bir yerini sağ tıklayabilirsiniz.

Chromium sorunları: 1322313, 1351649, 1322313, 1339767

Performans kayıtlarında gerçek işlev adlarını gösterme

Performans paneli artık kaynak haritası varsa izlemede gerçek işlev adlarını ve kaynaklarını gösteriyor.

Performans panelinde gösterilen işlev adlarının öncesi ve sonrası karşılaştırmasını gösterin.

Bu örnekte, üretim sırasında bir kaynak dosya küçültülür. Örneğin, bu demoda sayHi işlevi n olarak, takeABreak işlevi ise o olarak küçültülür.

Küçültme işleminden önceki ve sonraki dosyaları gösterin.

Daha önce, Performans panelinde bir iz kaydettiğinizde izde yalnızca küçültülmüş işlev adları gösteriliyordu. Bu durum, hata ayıklamayı zorlaştırıyordu.

En son değişikliklerle birlikte Geliştirici Araçları artık kaynak eşlemesini okuyor ve gerçek işlev adlarını ve kaynak konumunu gösteriyor.

Chromium sorunları: 1364601, 1364601

Konsol ve Kaynaklar panelindeki yeni klavye kısayolları

Kaynaklar panelindeki sekmeler arasında geçiş yapmak için: MacOS'te Function + Command + yukarı ve aşağı ok Windows ve Linux'ta Control + Page Up veya Page Down tuşlarını kullanabilirsiniz.

Ayrıca, Emacs'e benzer şekilde, MacOS'te Ctrl + N ve Ctrl + P tuşlarını kullanarak otomatik tamamlama önerileri arasında gezinebilirsiniz. Örneğin, Console alanına window. yazabilir ve gezinmek için bu kısayolları kullanabilirsiniz.

Ayrıca, Geliştirici Araçları artık otomatik tamamlama için yalnızca satırın sonunda sağ ok tuşunu kabul ediyor. Örneğin, kodun ortasında bir şeyi düzenlerken otomatik tamamlama iletişim kutusu gösterilir. Sağ ok tuşuna bastığınızda, büyük olasılıkla imleci otomatik tamamlama yerine bir sonraki konuma ayarlamak istersiniz. Bu kullanıcı deneyimi değişikliği, içerik oluşturma iş akışınızla daha iyi uyum sağlar.

Chromium sorunu: 1167965, 1172535, 1371585. 1369503

Geliştirilmiş JavaScript hata ayıklama

Bu sürümde JavaScript hata ayıklama ile ilgili yapılan bazı iyileştirmeler şunlardır:

  • new.target, bir işlevin veya oluşturucunun yeni operatör kullanılarak çağrılıp çağrılmadığını algılamanızı sağlayan bir meta özelliktir. Artık hata ayıklama sırasında değerini kontrol etmek için Console'da new.target günlüğe kaydedebilirsiniz. Daha önce new.target girdiğinizde hatalar döndürülüyordu. new.target değerlendirme hata ayıklamasının öncesi ve sonrası karşılaştırmasını gösterin.
  • WeakRef nesnesi, başka bir nesnenin çöp toplama işlemine tabi tutulmasını engellemeden bu nesneye zayıf bir referans tutmanıza olanak tanır. DevTools artık değer için satır içi önizleme gösteriyor ve hata ayıklama sırasında zayıf referansı doğrudan konsolda değerlendiriyor. Daha önce, bunu çözmek için "deref"i açıkça çağırmanız gerekiyordu. Hata ayıklama sırasında WeakRef değerlendirmesinin öncesi ve sonrası karşılaştırmasını gösterin.
  • Gölge değişkeni için satır içi önizleme düzeltildi. Daha önce görüntü değeri yanlıştı. Gölge değişken için satır içi önizlemede öncesi ve sonrası karşılaştırmasını gösterin.
  • Kaynaklar panelindeki Kapsam bölmesinde Generator ve async işlevlerindeki değişken adlarının kodunu çözün.

Chromium sorunları: 1267690, 1246863 1371322, 1311637

Diğer önemli noktalar

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

  • Stiller bölmesinde etkin olmayan CSS özellikleri (satır içi yükseklik ve genişlik, esnek ve ızgara özellikleri) için daha fazla ipucu desteği. (1373597, 1178508, 1178508,1178508)
  • Söz dizimi vurgulama düzeltildi. Geliştirici Araçları'ndaki son kod düzenleyici yükseltmesinden beri düzgün çalışmıyordu. (1290182)
  • Kaydedici'de bulanıklaştırma etkinliğinden sonra giriş değişikliği etkinliklerini düzgün şekilde yakalama. (1378488)
  • Kaydedici'de daha iyi bir hata ayıklama deneyimi için dışa aktarma sırasında Puppeteer tekrar oynatma komut dosyasını güncelleyin. (1351649)
  • Uzaktan hata ayıklama için Kaydedici'de kaydetme ve tekrar oynatma desteği. (1185727)
  • var() içinde özel CSS değişken adlarının ayrıştırılması düzeltildi. Daha önce DevTools, var(--fo\ o) gibi kaçış karakterleri içeren değişkenlerin ayrıştırılmasını desteklemiyordu. , (1378992)

[Deneysel] Kesme noktalarını yönetirken gelişmiş kullanıcı deneyimi

Mevcut Breakpoints (Kesme Noktaları) bölmesi, tüm kesme noktalarının denetlenmesi konusunda çok az görsel yardım sunuyor. Ayrıca, sık kullanılan işlemler bağlam menüsünün arkasında gizlenir.

Bu deneysel UX yeniden tasarımı, Kesme Noktaları bölmesine yapı kazandırır ve geliştiricilerin kesme noktalarını düzenleme ve kaldırma gibi sık kullanılan özelliklere hızlıca erişmesini sağlar.

Öne çıkan bazı noktalar:

  • Her iki duraklatma seçeneği de Kesme Noktaları panelindedir. Seçenekleri kendi kendine açıklayan açık metin etiketleri vardır.
  • Kesme noktaları dosyaya göre gruplandırılır ve satır ya da sütun numarasına göre sıralanır. Bunları daraltıp genişletebilirsiniz.**
  • Kesme noktası bölmesinde kesme noktasının veya dosya adının üzerine gelindiğinde kesme noktasını kaldırma ve düzenleme için yeni seçenekler.

Değişikliklerin tamamını RFC'mizde (kapalı) okuyabilir ve geri bildiriminizi buradan iletebilirsiniz.

Yeniden tasarımdan önce ve sonra kesme noktası bölmesini gösterin.

Chromium sorunları: 1346231, 1324904

[Deneysel] 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 pretty print 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 yazılmış içerik aynı dosyada değil, başka bir ::formatted sekmesinde gösteriliyordu.

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

Chromium sorunu: 1164184

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

Geliştirici Araçları'ndaki yenilikler

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