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

Kayce Basques

Tekrar hoş geldiniz! Chrome 68 için yaptığımız son güncellemeden bu yana yaklaşık 12 hafta geçti. Yeterli sayıda yeni özellik veya kullanıcı arayüzü değişikliği olmadığı için Chrome 69'u atladık.

Chrome 70'te Geliştirici Araçları'na eklenecek yeni özellikler ve önemli değişiklikler:

• Konsolda Canlı İfadeler.
• Eager değerlendirme sırasında DOM düğümlerini vurgulayın.
• Performans paneli optimizasyonları
• Daha güvenilir hata ayıklama.
• Komut menüsünden ağ daraltmayı etkinleştirin.
• Otomatik Tamamlama Koşullu Kesme Noktaları.
• AudioContext etkinliklerinde mola
• ndb ile Node.js uygulamalarında hata ayıklama.
• Bonus ipucu: Kullanıcı Zamanlaması API'si ile gerçek dünyadaki kullanıcı etkileşimlerini ölçün.

Okumaya devam edin veya bu dokümanın video sürümünü izleyin:

Konsolda Canlı İfadeler

Değerini gerçek zamanlı olarak izlemek istediğinizde bir Canlı İfade'yi konsolunuzun en üstüne sabitleyin.

1. Create Live Expression'ı (Canlı İfade Oluştur) tıklayın . Live Expression kullanıcı arayüzü açılır.

   

   Şekil 1. Canlı İfade kullanıcı arayüzü

2. İzlemek istediğiniz ifadeyi yazın.

   

   Şekil 2. Canlı İfade kullanıcı arayüzüne Date.now() yazma

3. İfadenizi kaydetmek için Canlı İfade kullanıcı arayüzünün dışını tıklayın.

   

   Şekil 3. Kaydedilmiş bir canlı ifade

Canlı İfade değerleri 250 milisaniyede bir güncellenir.

Eager değerlendirme sırasında DOM düğümlerini vurgulama

Konsol'da bir DOM düğümüne değerlendirilen bir ifade yazın. Eager Evaluation artık bu düğümü görünüm alanında vurguluyor.

Şekil 4. Mevcut ifade bir düğüm olarak değerlendirildiğinden bu düğüm, görünüm penceresinde vurgulanır.

İşinize yarayabilecek bazı ifadeler:

• Şu anda odaklanılan düğümü vurgulamak için document.activeElement.
• document.querySelector(s), rastgele bir düğümü vurgulamak için kullanılır. Burada s bir CSS seçicidir. Bu işlem, DOM ağacında bir düğümün üzerine gelmeye eşdeğerdir.
• DOM ağacında şu anda seçili olan düğümü vurgulamak için $0.
• $0.parentElement tuşuna basarak seçili düğümün üst öğesini vurgulayın.

Performans paneli optimizasyonları

Büyük bir sayfanın profilini oluştururken Performans paneli, verileri işlemek ve görselleştirmek için daha önce onlarca saniye sürüyordu. Özet sekmesinde bir etkinlik hakkında daha fazla bilgi edinmek için etkinliği tıkladığınızda da bazen yükleme işlemi birkaç saniye sürüyordu. Chrome 70'te işleme ve görselleştirme daha hızlıdır.

Şekil 5. Performans verilerini işleme ve yükleme

Daha güvenilir hata ayıklama

Chrome 70, kesme noktalarının kaybolmasına veya tetiklenmemesine neden olan bazı hataları düzeltir.

Ayrıca kaynak haritalarıyla ilgili hataları da düzeltir. Bazı TypeScript kullanıcıları, kodda adım adım ilerlerken Geliştirici Araçları'na belirli bir TypeScript dosyasını yok sayma talimatı veriyordu. Ancak Geliştirici Araçları, bunun yerine paketlenmiş JavaScript dosyasının tamamını yok sayıyordu. Bu düzeltmeler, Kaynaklar panelinin genel olarak yavaş çalışmasına neden olan bir sorunu da ele almaktadır.

Komut menüsünden ağ sınırlamayı etkinleştirme

Artık Komut Menüsü'nden ağ kısıtlamasını hızlı 3G veya yavaş 3G olarak ayarlayabilirsiniz.

Şekil 6. Komut menüsündeki ağ kısıtlama komutları

Otomatik Tamamlama Koşullu Kesme Noktaları

Koşullu kesme noktası ifadelerinizi daha hızlı yazmak için otomatik tamamlama kullanıcı arayüzünü kullanın.

Şekil 7 Otomatik Tamamlama Kullanıcı Arayüzü

Biliyor muydunuz? Otomatik tamamlama kullanıcı arayüzü, Konsol'a da güç veren CodeMirror sayesinde mümkündür.

AudioContext etkinliklerinde duraklatma

AudioContext Yaşam döngüsü etkinlik işleyicisinin ilk satırında duraklatmak için Event Listener Breakpoints (Etkinlik İşleyici Ayrılma Noktaları) bölmesini kullanın.

AudioContext, ses işlemek ve sentezlemek için kullanabileceğiniz Web Audio API'nin bir parçasıdır.

Şekil 8 Etkinlik işleyici ayrılma noktaları bölmesindeki AudioContext etkinlikleri

ndb ile Node.js uygulamalarında hata ayıklama

ndb, Node.js uygulamaları için yeni bir hata ayıklayıcıdır. ndb, Geliştirici Araçları'nda bulunan normal hata ayıklama özelliklerinin yanı sıra şunları da sunar:

• Alt işlemleri algılama ve bunlara bağlanma.
• Modüllerden önce kesme noktaları yerleştirilmesi gerekir.
• Geliştirici Araçları kullanıcı arayüzünde dosyaları düzenleme
• Varsayılan olarak, geçerli çalışma dizininin dışındaki tüm komut dosyaları yoksayılır.

Şekil 9. ndb kullanıcı arayüzü

Daha fazla bilgi edinmek için ndb'nin README'sine göz atın.

Bonus ipucu: Kullanıcı Zamanlaması API'si ile gerçek dünyadaki kullanıcı etkileşimlerini ölçme

Gerçek kullanıcıların sayfalarınızdaki önemli yolculukları tamamlamasının ne kadar sürdüğünü ölçmek mi istiyorsunuz? Kodunuza User Timing API'yi eklemeyi düşünebilirsiniz.

Örneğin, bir kullanıcının harekete geçirici mesaj (CTA) düğmenizi tıklamadan önce ana sayfanızda ne kadar zaman geçirdiğini ölçmek istediğinizi varsayalım. Öncelikle, yolculuğun başlangıcını bir sayfa yükleme etkinliğiyle ilişkilendirilmiş bir etkinlik işleyicide (ör. DOMContentLoaded) işaretlersiniz:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

Ardından, yolculuğun sonunu işaretleyip düğme tıklandığında süresini hesaplarsınız:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

Ayrıca, ölçümlerinizi de ayıklayabilirsiniz. Böylece, anonim ve toplu veriler toplamak için bunları analiz hizmetinize kolayca gönderebilirsiniz:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

DevTools, Performans kayıtlarınızın Kullanıcı Zamanlaması bölümünde Kullanıcı Zamanlaması ölçümlerinizi otomatik olarak işaretler.

Şekil 10. Kullanıcı Zamanlaması bölümü

Bu özellik, kodda hata ayıklama veya kodu optimize etme konusunda da işe yarar. Örneğin, yaşam döngünüzün belirli bir aşamasını optimize etmek istiyorsanız yaşam döngüsü işlevinizin başında ve sonunda window.performance.mark() işlevini çağırın. React bunu geliştirme modunda yapar.

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

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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