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

Kayce Basques

Tekrar hoş geldiniz! Chrome 68 için yaptığımız son güncellemenin üzerinden yaklaşık 12 hafta geçti. Şu kısmı atladık: Chrome 69, çünkü yayını garanti edecek kadar yeni özellik veya kullanıcı arayüzü değişikliği yoktu.

Chrome 70 sürümünde Geliştirici Araçları'nda sunulacak yeni özellikler ve önemli değişiklikler şunlardır:

• 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ğ sınırlamayı etkinleştirin.
• Koşullu Ayrılma Noktalarını Otomatik Tamamlama.
• AudioContext etkinlikteki ara..
• Node.js uygulamalarında ndb ile hata ayıklayın.
• Bonus ipucu: User Timing API ile gerçek dünyadaki kullanıcı etkileşimlerini ölçün.

Bu belgenin devamını okuyun veya video sürümünü izleyin:

Konsolda Canlı İfadeler

Değerini gerçek zamanlı olarak izlemek istediğiniz Canlı İfadeyi, Konsolunuzun üst kısmına sabitleyin.

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

   

   Şekil 1. Live Expression kullanıcı arayüzü

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

   

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

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

   

   3. Şekil. Kayıtlı bir Canlı İfade

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

Eager Değerlendirme sırasında DOM düğümlerini vurgula

Hemen Console'da bir DOM düğümüne dönüşen bir ifade ve Eager Evaluation yazın. görüntü alanında o düğümü vurgular.

4. Şekil. Geçerli ifade bir düğüm olarak değerlendirildiğinden, o düğüm görüntü alanı

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

• Odaklanılmış düğümü vurgulamak için document.activeElement.
• Rastgele bir düğümü vurgulamak için document.querySelector(s). Burada s bir CSS seçicidir. Bu DOM Ağacı'nda bir düğümün üzerine gelmekle eşdeğerdir.
• DOM Ağacında şu anda seçili olan düğümü vurgulamak için $0.
• Şu anda seçili olan düğümün üst öğesini vurgulamak için $0.parentElement tuşlarına basın.

Performans paneli optimizasyonları

Performans panelinin önceden büyük bir sayfanın profilini çıkarırken işlemesi ve işlemesi onlarca saniye sürüyordu. verilerinizi görselleştirir. Özet sekmesinde bir etkinlikle ilgili daha fazla bilgi edinmek için etkinliği tıkladığınızda da yüklenmesi birkaç saniye sürdü. Chrome 70'te işleme ve görselleştirme daha hızlıdır.

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

Daha güvenilir hata ayıklama

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

Ayrıca, kaynak eşlemeleriyle ilgili hataları da düzeltir. Bazı TypeScript kullanıcıları, Geliştirici Araçları'na bir TypeScript dosyası oluşturur ve Geliştirici Araçları bunun yerine JavaScript dosyasının tamamını içeren bir JavaScript dosyası ekleyin. Bu düzeltmeler, Kaynaklar paneline neden olan bir sorunu da ele alır yavaş çalışması gerekir.

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

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

6. Şekil. Komut Menüsünde 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.

7. Şekil. Otomatik tamamlama kullanıcı arayüzü

Biliyor muydunuz? Otomatik Tamamlama Kullanıcı Arayüzü, aynı zamandaCodeMirror Konsol.

AudioContext etkinliklerinde ara

AudioContext öğesinin ilk satırında duraklatmak için Etkinlik İşleyici Ayrılma Noktaları bölmesini kullanın yaşam döngüsü olay işleyicisi.

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

8. Şekil. Etkinlik İşleyici Ayrılma Noktaları bölmesindeki AudioContext etkinlikleri

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

ndb, Node.js uygulamaları için yeni bir hata ayıklayıcıdır. Gmail'de gördüğünüz her zamanki hata ayıklama özelliklerinin Geliştirici Araçları'ndan bir video yayınladığında ndb ayrıca şunları da sunar:

• Alt işlemleri tespit etme ve bunlara ekleme
• Modüllerden önce ayrılma noktaları yerleştirmek gerekir.
• Geliştirici Araçları kullanıcı arayüzünde dosyaları düzenleme.
• Geçerli çalışma dizininin dışındaki tüm komut dosyaları varsayılan olarak yoksayılıyor.

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

Daha fazla bilgi edinmek için ndb'nin BENİOKU sayfasını inceleyin.

Bonus ipucu: User Timing API 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? Dikkatlice User Timing API ile kodunuzun enstrümantasyonunu yapabilirsiniz.

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

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');
});

Ayrıca, ölçümlerinizi çıkararak bu verileri analiz hizmetinize göndermeyi anonimleştirilmiş, birleştirilmiş verileri toplayın:

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

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

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

Bu, kodda hata ayıklama veya kod optimizasyonu yaparken de faydalı olur. Örneğin, aşamalarını geride bırakıyorsanız işletmenizin başında ve sonunda window.performance.mark() yaşam döngüsü fonksiyonu. React işlemi, geliştirme modunda yapılır.

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

Geliştirici Araçları'ndaki yenilikler

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