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

Jecelyn Yeen

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

Kaydedici panelinde yeni kopyalama seçenekleri.

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

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

Bunun dışında, kullanıcı akışının tamamını dışa aktarmak yerine bir adımı sağ tıklayıp *Kaydedici panelindeki panosuna kopyalayabilirsiniz. Uzantıları da destekler. Örneğin, bir adımı Nightwatch Testi komut dosyası olarak kopyalamayı deneyin. Bu özellik sayesinde mevcut komut dosyalarını kolayca güncelleyebilirsiniz.

Daha önce adım menüsüne yalnızca 3 nokta düğmesi üzerinden 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 gerçek işlev adlarını ve bunların izdeki kaynaklarını gösterir.

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

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

Dosyaları, sıkıştırmadan önce ve sonra gösterin.

Daha önce, Performans panelinde bir izleme kaydettiğinizde izlemede yalnızca sıkıştırılmış işlev adları gösteriliyordu. Bu durum, hata ayıklamayı zorlaştırıyordu.

En son değişikliklerle birlikte DevTools 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 panelinde yeni klavye kısayolları

Kaynaklar panelindeki sekmeler arasında geçiş yapmak için şunları kullanabilirsiniz: MacOS'te İşlev + Komut + Yukarı ok ve aşağı ok Windows ve Linux'te Control + Sayfa yukarı veya aşağı

Ayrıca, Emacs'a 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. yazıp gezinmek için bu kısayolları kullanabilirsiniz.

Ayrıca DevTools artık otomatik tamamlama için Sağ Ok'u yalnızca satırın sonunda 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 üretme iş akışınızla daha uyumlu.

Chromium sorunu: 1167965, 1172535, 1371585. 1369503

Geliştirilmiş JavaScript hata ayıklama

Bu sürümde JavaScript hata ayıklamayla ilgili bazı iyileştirmeler yapılmıştır:

  • new.target, bir işlevin veya oluşturucunun yeni operatör kullanılarak çağrılıp çağrılmadığını algılamanıza olanak tanıyan bir meta mülktür. Artık hata ayıklama sırasında değerini kontrol etmek için new.target değerini Konsol'a kaydedebilirsiniz. Daha önce new.target girdiğinizde hata döndürülüyordu. new.target değerlendirme hata ayıklama karşılaştırmasını önce ve sonra gösterin.
  • WeakRef nesnesi, başka bir nesnenin çöp toplanması işlemini engellemeden bu nesneye zayıf referans tutmanızı sağlar. DevTools artık değer için satır içi bir önizleme gösterir ve hata ayıklama sırasında zayıf referansı doğrudan konsolda değerlendirir. Daha önce, bu sorunu çözmek için açıkça "deref" işlevini çağırmanız gerekiyordu. Hata ayıklama sırasında WeakRef değerlendirmesinin öncesi ve sonrası karşılaştırmasını gösterin.
  • Gölgelenen değişken için satır içi önizleme düzeltildi. Daha önce görünen değer yanlıştı. Gölgelenen değişken için önce ve sonra karşılaştırma satır içi önizlemesini gösterin.
  • Kaynaklar panelindeki Kapsam bölmesinde Generator ve async işlevlerindeki değişken adlarının kodunu çözme.

Chromium sorunları: 1267690, 1246863 1371322, 1311637

Diğer öne çıkan özellikler

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

  • Stiller bölmesinde etkin olmayan CSS özellikleri için daha fazla ipucu desteği (satır içi yükseklik ve genişlik, esnek ve ızgara özellikleri). (1373597, 1178508, 1178508,1178508)
  • Söz dizimi vurgulama düzeltildi. Bu özellik, DevTools'taki son kod düzenleyici yükseltmesinden bu yana düzgün çalışmıyordu. (1290182)
  • Kaydedici'de bulanıklık etkinliğinden sonra giriş değişikliği etkinliklerini doğru şekilde yakalama. (1378488)
  • Kaydedici'de daha iyi bir hata ayıklama deneyimi için dışa aktarma sırasında Puppeteer yeniden oynatma komut dosyasını güncelleyin. (1351649)
  • Uzaktan hata ayıklama için Kaydedici'de kayıt ve yeniden oynatma desteği. (1185727)
  • var()'te özel CSS değişken adlarının ayrıştırılması düzeltildi. Daha önce DevTools, var(--fo\ o) gibi kaçan karakterlerle değişken ayrıştırmayı desteklemiyordu. , (1378992)

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

Mevcut Duraklatma noktaları bölmesi, tüm duraklatma noktalarını gözden geçirmek için çok az görsel yardım sağlar. Ayrıca, sık kullanılan işlemler bağlam menüsünün arkasına gizlenmiştir.

Bu deneysel kullanıcı deneyimi yeniden tasarımı, Duraklatma noktaları bölmesine yapı getiriyor ve geliştiricilerin duraklatma noktalarını düzenleme ve kaldırma gibi sık kullanılan özelliklere hızlıca erişmesine olanak tanıyor.

Öne çıkan bazı noktalar:

  • Her iki duraklatma seçeneği de Duraklatma noktaları bölmesindedir. Seçenekleri açıklayıcı hale getiren net metin etiketleri vardır.
  • Kesme noktaları dosyaya göre gruplandırılır ve satır veya sütun numarasına göre sıralanır. Bu bölümleri daraltabilir ve genişletebilirsiniz.**
  • Fareyle Duraklatma noktası bölmesinde bir duraklatma noktasının veya dosya adının üzerine geldiğinizde duraklatma noktasını kaldırmak ve düzenlemek için yeni seçenekler.

Değişikliklerin tamamını RFC (kapalı) dosyamızda okuyabilir ve geri bildiriminizi buradan gönderebilirsiniz.

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

Chromium sorunları: 1346231, 1324904

[Deneysel] Yerinde otomatik güzel yazdırma

Kaynaklar paneli artık küçültülmüş kaynak dosyalarını otomatik olarak okunaklı hâle getirir. Bu işlemi geri almak için okunaklı hâle getirme 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 bir şekilde yazdırılan içerik aynı dosyada 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 sorunu: 1164184

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