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

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. Yayınlamayı garanti edecek kadar yeni özelliğimiz veya kullanıcı arayüzümüzde değişiklik 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:

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

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ü
İzlemek istediğiniz ifadeyi yazın.

2. Şekil. Canlı İfade kullanıcı arayüzüne Date.now() giriliyor
İ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

Console'da bir DOM düğümünü değerlendiren bir ifade yazın. Eager Değerlendirme, artık görüntü alanındaki bu düğümü vurgular.

Not: Vurgulanan düğüm yalnızca siz yazarken güncellenir. Belirli aralıklarla güncellenmez. Örneğin, odaklanılan öğeyi izleyen document.activeElement yazar ve ardından sayfada sekme tuşuyla geçiş yaparsanız Geliştirici Araçları, ifadeyi ilk yazdığınızda etkin olan düğümü vurgulamaya devam eder.

Console'da document.activeElement yazıldıktan sonra görüntü alanında bir düğüm vurgulanıyor.

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:

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 verileri, büyük bir sayfanın profilini çıkarırken işlemesi ve görselleştirmesi daha önce on saniye sürüyordu. Özet sekmesinde bir etkinlikle ilgili daha fazla bilgi edinmek için etkinliği tıkladığınızda, yükleme işlemi birkaç saniye sürüyordu. 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ı, DevTools'a kodda gezinirken belirli bir TypeScript dosyasını yoksayma talimatı verir. Bunun yerine Geliştirici Araçları, gruplanmış JavaScript dosyasının tamamını yoksayar. Bu düzeltmeler, Kaynaklar panelinin genellikle yavaş çalışmasına neden olan bir sorunu da ele alır.

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.

Komut Menüsü'ndeki ağ kısıtlama komutları.

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.

Otomatik tamamlama kullanıcı arayüzü

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

Biliyor muydunuz? Console'u da destekleyen CodeMirror sayesinde Otomatik Tamamlama kullanıcı arayüzünü kullanabilirsiniz.

AudioContext etkinliklerinde ara

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

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

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. ndb, Geliştirici Araçları aracılığıyla sunulan her zamanki hata ayıklama özelliklerinin yanı sıra şu olanakları 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.

.ndb kullanıcı arayüzü.

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? Kodunuza User Timing API'yi eklemeyi düşünün.

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

Ayrıca ölçümlerinizi ayıklayarak anonim ve birleştirilmiş verileri toplamak üzere analiz hizmetinize göndermeyi de kolaylaştırabilirsiniz:

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.

Kullanıcı Zamanlaması bölümü.

10. Şekil. 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 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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.