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. Bir gönderi yayınlamayı gerektirecek kadar yeni özellik veya kullanıcı arayüzü değişikliği olmadığı için Chrome 69'u atladık.

Chrome 70'de DevTools'a eklenen yeni özellikler ve yapılan önemli değişiklikler arasında şunlar yer alır:

• Console'da Canlı İfadeler.
• Eager değerlendirme sırasında DOM düğümlerini vurgulama.
• Performans paneli optimizasyonları.
• Daha güvenilir hata ayıklama.
• Komut menüsünden ağ daraltmayı etkinleştirin.
• Koşullu Kesme Noktalarını Otomatik Tamamlama.
• AudioContext etkinliklerinde ara verin.
• 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.

Devamını okuyun veya bu dokümanın video sürümünü izleyin:

Console'da Canlı İfadeler

Değerini anlık olarak izlemek istediğiniz bir canlı ifadeyi Console'unuzun üst kısmına sabitleyin.

1. Canlı ifade oluştur'u tıklayın. Canlı ifade kullanıcı arayüzü açılır.

   

   Şekil 1. Canlı ifade kullanıcı arayüzü

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

   

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

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

   

   Şekil 3. Kayıtlı bir canlı ifade

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

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

Konsolda bir DOM düğümüne değer veren bir ifade yazın. Eager Evaluation (Acele Değerlendirme) artık görüntü alanında bu düğümü vurgular.

Şekil 4. Mevcut ifade bir düğüm olarak değerlendirildiği için bu düğüm görüntü alanında vurgulanır.

Yararlı bulabileceğiniz bazı ifadeler aşağıda verilmiştir:

• Şu anda odaklanılan düğümü vurgulamak için document.activeElement.
• s bir CSS seçici olduğunda, rastgele bir düğümü vurgulamak için document.querySelector(s). Bu işlem, DOM ağacında bir düğümün üzerine gelmekle aynıdır.
• DOM ağacında seçili olan düğümü vurgulamak için $0.
• $0.parentElement simgesini tıklayarak seçili düğümün üst öğesini vurgulayın.

Performans paneli optimizasyonları

Büyük bir sayfanın profilini oluştururken Performans panelinin verileri işlemesi ve görselleştirmesi 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ürebiliyordu. Chrome 70'de 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 haritalarla ilgili hataları da düzeltir. Bazı TypeScript kullanıcıları, kodda adım atarken DevTools'a belirli bir TypeScript dosyasını yok saymasını söyler. Bunun yerine DevTools, paketlenmiş JavaScript dosyasının tamamını yok sayar. Bu düzeltmeler, Kaynaklar panelinin genellikle yavaş çalışmasına neden olan bir sorunu da giderir.

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ı

Koşullu Kesme Noktalarını Otomatik Tamamlama

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ü, Console'u da destekleyen CodeMirror sayesinde kullanılabilir.

AudioContext etkinliklerinde durma

AudioContextBir yaşam döngüsü etkinlik işleyicisinin ilk satırında duraklamak için Etkinlik İşleyici Ayrılma Noktaları bölmesini kullanın.

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

Şekil 8. Etkinlik İşleyici Ayrılma Noktaları bölmesinde 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ı'ndan yararlanabileceğiniz normal hata ayıklama özelliklerinin yanı sıra şunları da sunar:

• Alt işlemleri algılama ve bunlara bağlanma.
• Modüller gerekli olmadan önce kesme noktaları yerleştirilmelidir.
• Geliştirici Araçları kullanıcı arayüzünde dosya düzenleme
• Varsayılan olarak, mevcut ç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 dosyasını inceleyin.

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

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

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

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

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

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

Ölçümlerinizi ayıklayarak anonim, toplu veriler toplamak için analiz hizmetinize 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, kodda hata ayıklama veya kod optimizasyonu yaparken de kullanışlıdır. Ö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, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize 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.

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.