Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Jecelyn Yeen

Kaydedici: Adım seçenekleri, sayfa içi tekrar oynatma, adımın içerik menüsü olarak kopyala

Kaydedici panelinde yeni kopyalama seçenekleri.

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

Kaydedici, son güncellemelerde gezinme adımını ayrı olarak gösterir. Sayfa içi tekrar oynatmak 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 panelindeki panoya kopyalayabilirsiniz. Bu özellik uzantılarla da çalışır. Örneğin, bir adımı Nightwatch Test komut dosyası olarak kopyalamayı deneyin. Bu özelliği kullanarak mevcut komut dosyalarını kolayca güncelleyebilirsiniz.

Önceden, adım menüsüne yalnızca 3 noktalı düğmeyle erişebiliyordunuz. Artık menüye erişmek için adımdaki herhangi bir yeri sağ tıklayabilirsiniz.

Chromium sorunları: 1322313, 1351649, 1322313, 1339767

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

Performans paneli artık kaynak eşlemesi varsa izdeki gerçek işlev adlarını ve bunların kaynaklarını gösteriyor.

İşlev adlarının önce ve sonra karşılaştırmasını Performans panelinde göster.

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

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

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.

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

Chromium sorunları: 1364601, 1364601

Console ve Kaynaklar paneli

Kaynaklar panelindeki sekmeler arasında geçiş yapmak için şunları kullanabilirsiniz: MacOS'te Function + Command + Yukarı ok ve aşağı ok Windows ve Linux'ta Control + Page up veya down

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

Üstelik, Geliştirici Araçları artık yalnızca satırın sonunda otomatik tamamlama için Sağ Ok'u kabul ediyor. Örneğin, kodun ortasında bir şey 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, yazma iş akışınızla daha uyumlu.

Chromium sorunu: 1167965, 1172535, 1371585. 1369503

İyileştirilmiş JavaScript hata ayıklaması

Bu sürümde yapılan JavaScript hata ayıklama iyileştirmelerinden bazıları şunlardır:

new.target, yeni operatör kullanılarak bir işlevin veya kurucunun çağrılıp çağrılmadığını tespit etmenizi sağlayan bir meta özelliktir. Artık hata ayıklama sırasında new.target değerini kontrol etmek için Konsola'da new.target kaydedebilirsiniz. Daha önce, new.target kodunu girdiğinizde hata döndürüyordu.
WeakRef nesnesi, söz konusu nesnenin çöp toplanmasını engellemeden başka bir nesneye zayıf bir referans tutmanıza olanak tanır. Geliştirici Araçları artık değer için bir satır içi önizleme gösteriyor ve hata ayıklama sırasında zayıf referansı doğrudan konsoldan değerlendiriyor. Daha önce, sorunu çözmek için bunlara açık bir şekilde "deref" çağrısı yapmak zorundaydınız. .
Gölgelendirilmiş değişken için satır içi önizleme düzeltildi. Daha önce, görüntü değeri yanlıştı. .
Kaynaklar panelindeki Kapsam bölmesinde yer alan Generator ve async işlevlerindeki değişken adlarının kodunu gösterme.

Chromium sorunları: 1267690, 1246863 1371322, 1311637

Çeşitli öne çıkan anlar

Bu sürümde yer alan bazı önemli düzeltmeler şunlardır:

Stiller bölmesinde etkin olmayan CSS özelliklerine ilişkin daha fazla ipucunu destekleyin: satır içi yükseklik ve genişlik, esnek ve ızgara özellikleri. (1373597, 1178508, 1178508,1178508)
Söz dizimi vurgulama düzeltildi. Geliştirici Araçları'ndaki kısa süre önce kod düzenleyici yeni sürüme geçirildiğinden beri düzgün çalışmıyordu. (1290182)
Kaydedici'de bulanıklaştırma olayından sonra giriş değişikliği etkinliklerini düzgün şekilde yakalayın. (1378488)
Kaydedici'de daha iyi 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 kayıt ve tekrar oynatma desteği. (1185727)
var() içindeki özel CSS değişkeni adlarının ayrıştırılması düzeltildi. Daha önce Geliştirici Araçları, var(--fo\ o) gibi çıkış karakterli değişkenlerin ayrıştırılmasını desteklemiyordu. , (1378992)

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

Geçerli Kırma Noktaları bölmesi, tüm ayrılma noktalarının denetlenmesi konusunda küçük bir görsel yardım sağlar. Ayrıca, sık kullanılan işlemler içerik menüsünün arkasına gizlenir.

Kullanıcı deneyiminin bu deneysel yeniden tasarımı, Kırma Noktaları bölmesine yapı kazandırarak geliştiricilerin, ayrılma noktalarını düzenleme ve kaldırma gibi sık kullanılan özelliklere hızlı bir şekilde erişmesine olanak tanır.

Bazı önemli noktaları aşağıda bulabilirsiniz:

Her iki duraklatma seçeneği de Ayrılma Noktaları bölmesindedir. Bu reklamlar, seçenekleri anlaşılır hale getiren müstehcen metin etiketlerine sahiptir.
Kesme noktaları, satır veya sütun numarasına göre sıralanarak dosyaya göre gruplanır. Bu reklam öğelerini daraltabilir ve genişletebilirsiniz.**
Ayrılma noktası bölmesinde, fareyle ayrılma noktasının veya dosya adının üzerine geldiğinizde ayrılma noktasını kaldırmak ve düzenlemek için yeni seçenekler.

Değişikliklerin tamamını RFC (kapalı) sayfamızda okuyun ve buradan geri bildirimlerinizi paylaşın.

Yeniden tasarımdan önceki ve sonraki Kesme noktası bölmesini göster.

Chromium sorunları: 1346231, 1324904

[Deneysel] Otomatik yerinde güzel baskı

Kaynaklar paneli artık küçültülmüş kaynak dosyaları otomatik olarak okunaklı hale getirir. Bu işlemi geri almak için okunaklı şekilde 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 okunaklı yazdır düğmesini manuel olarak tıklamanız gerekiyordu. Ayrıca, okunaklı içerik aynı dosyada değil, başka bir ::formatted sekmesinde gösteriliyordu.

Otomatik yerinde güzel yazdırma işleminden önce ve sonra küçültülmüş bir dosya gösterin.

Chromium sorunu: 1164184

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