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

Kayce Basques

Geliştirici Araçları sürüm notlarının başka bir bölümüne hoş geldiniz. Chrome 59'daki Chrome Geliştirme Araçları'ndaki yenilikleri görmek için aşağıdaki videoyu izleyin veya okumaya devam edin.

Öne çıkanlar

Yeni özellikler

CSS ve JS kod kapsamı

Yeni Kapsam sekmesiyle kullanılmayan CSS ve JS kodunu bulun. Bir sayfayı yüklediğinizde veya çalıştırdığınızda sekme, ne kadar kodun yüklendiğini ve ne kadarının kullanıldığını gösterir. Yalnızca ihtiyacınız olan kodu göndererek sayfalarınızın boyutunu küçültebilirsiniz.

Kapsam sekmesi

Bir URL'yi tıkladığınızda, Kaynaklar panelinde ilgili dosya gösterilir ve hangi kod satırlarının yürütüldüğünün dökümü sunulur.

Kaynaklar panelinde kod kapsamının dökümü

Her kod satırı renklerle kodlanmıştır:

  • Yeşil renk, kod satırının yürütüldüğünü gösterir.
  • Katı kırmızı, komutun yürütülmediği anlamına gelir.
  • Yukarıdaki ekran görüntüsünde 3. satır gibi hem kırmızı hem de yeşil olan bir kod satırı, söz konusu satırdaki kodun yalnızca bir kısmının yürütüldüğünü gösterir. Örneğin, var b = (a > 0) ? a : 0 gibi üçlü bir ifade hem kırmızı hem de yeşil renktedir.

Kapsam sekmesini açmak için:

  1. Komut menüsünü açın.
  2. Coverage yazmaya başlayın ve Kapsamı Göster'i seçin.

Tam sayfa ekran görüntüleri

Sayfanın en üstünden en altına kadar ekran görüntüsü nasıl alınacağını öğrenmek için aşağıdaki videoya göz atın.

İstekleri engelleme

Belirli bir komut dosyası, stil sayfası veya başka bir kaynak kullanılabilir olmadığında sayfanızın nasıl davrandığını görmek ister misiniz? Ağ panelinde isteği sağ tıklayıp İstek URL'sini engelle'yi seçin. Çekmecede, engellenen istekleri yönetmenizi sağlayan yeni bir İstek engelleme sekmesi açılır.

İstek URL'sini engelle

Eş zamansız senkronizasyon tamamlanmayı bekliyor

Şu ana kadar, aşağıdaki snippet gibi kodda ilerlemek zahmetli bir işti. test()'ün ortasındayken bir satır atlarsınız ve setInterval() koduyla karşılaşırsınız. Artık test() gibi asynkron kodlarda adım adım ilerlerken DevTools, ilk satırdan son satıra tutarlı bir şekilde ilerler.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

Not: Hata ayıklama becerilerinizi geliştirmek ister misiniz? Şu yeni dokümanlara göz atın:

Değişiklikler

Birleştirilmiş Komut Menüsü

Artık Komut Menüsü'nü açtığınızda komutunuzun başına büyüktür karakteri (>) eklendiğini fark edeceksiniz. Bunun nedeni, Komut Menüsü'nün Komut+O (Mac) veya Ctrl+O (Windows, Linux) tuşlarına basarak açılan Dosya Aç menüsüyle birleştirilmesidir.

Önizleme kanallarını indirme

Chrome Canary, Yeni geliştirilenler veya Beta'yı varsayılan geliştirme tarayıcınız olarak kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji web platformu API'lerini test etmenizi ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanızı sağlar.

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.

Geliştirici Araçları'ndaki yenilikler

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