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 sürümünde Geliştirici Araçları'nda sunulacak yeni özellikler ve önemli değişiklikler şunlardı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 gerçek zamanlı olarak izlemek istediğiniz Canlı İfadeyi, Konsolunuzun ü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. Live Expression 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ı İfade

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

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

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

4. Şekil. Geçerli 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:

• document.activeElement, şu anda odaklanılan düğümü vurgulamak için kullanılır.
• 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'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 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ğ sınırlama 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 duraklatmak 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ı aracılığıyla sağladığınız her zamanki hata ayıklama özelliklerinin yanı sıra şu olanakları 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, yolculuğun başlangıcını DOMContentLoaded gibi bir sayfa yükleme etkinliğiyle ilişkili bir etkinlik işleyicide işaretlersiniz:

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

Ardından, yolculuğun sonunu işaretler ve düğme tıklandığında yolculuğu hesaplarsınız:

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;

Geliştirici Araçları, Kullanıcı Zamanlaması ölçümlerinizi performans kayıtlarınızın Kullanıcı Zamanlaması bölümünde otomatik olarak işaretler.

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

Bu, kodda hata ayıklama veya kod optimizasyonu yaparken de faydalı olur. Ö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() yöntemini ç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ş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.

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'ndaki more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videolarındaki yenilikler veya Geliştirici Araçları İpuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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