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

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

Jecelyn Yeen

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

Kaydedici panelindeki yeni kopyalama seçenekleri.

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

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

Bunun dışında, bir adımı sağ tıklayıp *Recorder (Kaydedici) panelindeki tüm kullanıcı akışını dışa aktarmak yerine panoya kopyalayabilirsiniz. Uzantılarla da çalışır. Örneğin, bir adımı Gece Saati Testi komut dosyası olarak kopyalamayı deneyebilirsiniz. Bu özelliği kullanarak mevcut herhangi bir komut dosyasını kolayca güncelleyebilirsiniz.

Daha önce, adım menüsüne yalnızca 3 noktalı düğmeyle erişebiliyordunuz. Artık adımdaki herhangi bir yeri sağ tıklayarak menüye erişebilirsiniz.

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 gerçek işlev adlarını ve bunların kaynaklarını izde gösteriyor.

İşlev adlarının önceki ve sonraki karşılaştırmasını, Performans panelinde göster.

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

Dosyaları küçültme işleminden önce ve sonra göster.

Önceden, Performans panelinde iz kaydederken yalnızca küçültülmüş işlev adları gösteriliyordu. Bu da hata ayıklamayı zorlaştırıyordu.

DevTools artık son değişikliklerle birlikte kaynak haritasını okuyup gerçek işlev adlarını ve kaynak konumunu gösteriyor.

Chromium sorunları: 1364601, 1364601

Konsol ve Kaynaklar panelinde yeni klavye kısayolları

Kaynaklar panelinde sekmeler arasında geçiş yapmak için aşağıdakileri 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ına basarak, Emacs'e benzer şekilde otomatik tamamlama önerileri arasında gezinebilirsiniz. Örneğin, Console bölümüne window. yazıp gezinmek için bu kısayolları kullanabilirsiniz.

Üstelik, Geliştirici Araçları artık yalnızca satırın sonundaki otomatik tamamlama için Sağ Ok tuşunu 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 sonraki konuma ayarlamak istersiniz. Bu kullanıcı deneyimi değişikliği, içerik oluşturma iş akışınıza daha uygundur.

Chromium sorunu: 1167965, 1172535, 1371585. 1369503

İyileştirilmiş JavaScript hata ayıklaması

Aşağıda, bu sürümde JavaScript hata ayıklaması için yapılan iyileştirmelerden bazıları verilmiştir:

new.target, bir işlevin veya kurucunun yeni operatör kullanılarak çağrılıp çağrılmadığını tespit etmenizi sağlayan bir meta özelliktir. Artık hata ayıklama sırasında değerini kontrol etmek için new.target Konsolu'na kaydedebilirsiniz. Daha önce new.target değerini girdiğinizde hata döndürürdü.
WeakRef nesnesi, başka bir nesne için zayıf bir referans tutmanıza olanak tanır ve söz konusu nesnenin çöp toplamasını engellemez. 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 konsolda değerlendiriyor. Daha önce, bu sorunu çözmek için açıkça "deref" çağrısı yapmanız gerekiyordu.
Gölgelendirilen değişken için satır içi önizleme düzeltildi. Daha önce, görüntülenen değer yanlıştı.
Kaynaklar panelindeki Kapsam bölmesindeki Generator ve async işlevlerinde değişken adlarının gizlemesini kaldırın.

Chromium sorunları: 1267690, 1246863 1371322, 1311637

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler şunlardır:

Stiller bölmesinde satır içi yükseklik ve genişlik, esnek ve ızgara özellikleri gibi etkin olmayan CSS özellikleri için daha fazla ipucu desteklenir. (1373597, 1178508, 1178508,1178508)
Söz dizimi vurgulaması düzeltildi. Geliştirici Araçları'nda, yakın zamanda yapılan kod düzenleyici güncellemesinden bu yana kod düzgün çalışmıyordu. (1290182)
Kaydedici'de bulanıklaştırma etkinliğinden sonra giriş değişikliği olaylarını düzgün bir ş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 sunulur. (1185727)
var() içindeki özel CSS değişkeni adlarının ayrıştırılması düzeltildi. Geliştirici Araçları önceden var(--fo\ o) gibi çıkış yapılmış karakterlere sahip değişkenlerin ayrıştırılmasını desteklemiyordu. (1378992)

[Deneysel] Ayrılma noktalarının yönetiminde iyileştirilmiş kullanıcı deneyimi

Mevcut Ayrılma Noktaları bölmesi, tüm ayrılma noktalarının denetlenmesinde çok az görsel yardım sağlar. Üstelik sık kullanılan işlemler içerik menüsünün arkasında gizlidir.

Bu deneysel kullanıcı deneyimi yeniden tasarımı, Ayrılma Noktaları bölmesine yapı katar ve geliştiricilerin, ayrılma noktalarını düzenleme ve kaldırma gibi sık kullanılan özelliklere hızlı bir şekilde erişmelerine olanak tanır.

Bazı önemli noktalar aşağıda belirtilmiştir:

Her iki duraklatma seçeneği de Kesme noktaları bölmesindedir. Seçeneklerin anlaşılmasını sağlayan açık metin etiketleri vardır.
Ayrılma noktaları dosya bazında gruplanır ve satır veya sütun numarasına göre sıralanır. Bunları 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.

RFC'de (kapalı) değişikliklerin tamamını okuyun ve geri bildiriminizi buraya bırakın.

Yeniden tasarım öncesinde ve sonrasında 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 uygun şekilde yazdırır. Bu işlemi geri almak için pretty yaz düğmesini { } tıklayabilirsiniz.

Daha önce Kaynaklar paneli varsayılan olarak küçültülmüş içerik gösteriyordu. İçeriği biçimlendirmek için güzel yazdır düğmesini manuel olarak tıklamanız gerekiyordu. Üstelik, oldukça basılmış içerik aynı dosyada değil, başka bir ::formatted sekmesinde görüntüleniyordu.

Yazdırma işleminin öncesinde ve sonrasında otomatik olarak yerleştirilmiş bir dosyayı küçültün.

Chromium sorunu: 1164184

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.