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ı

Kullanılmayan CSS ve JS kodlarını yeni Kapsam sekmesiyle bulabilirsiniz. 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 azaltabilirsiniz.

Kapsam sekmesi

Bir URL tıklandığında bu dosyanın Kaynaklar panelinde dökümü ile birlikte hangi satırların yürütüldüğünü gösterir.

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

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

  • Sabit yeşil renk, kod satırının yürütüldüğü anlamına gelir.
  • Katı kırmızı, komutun yürütülmediği anlamına gelir.
  • Yukarıdaki ekran görüntüsündeki 3. satır gibi, hem kırmızı hem de yeşil renkli bir kod satırı, bu satırdaki yalnızca bir kodun yürütüldüğü anlamına gelir. Ö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

Üst kısımdan nasıl ekran görüntüsü alacağınızı öğrenmek için aşağıdaki videoya göz atın. en alta kadar inmek gerekir.

İstekleri engelle

Belirli bir komut dosyası, stil sayfası veya başka bir kaynak kullanılamadığında sayfanızı nasıl davrandığını görmek mi istiyorsunuz? 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

Şimdiye kadar aşağıdaki snippet gibi kodda ilerlemeye çalışmak baş ağrısıdır. test() gününün ortasındayken bir çizginin üzerine basarsınız ve ardından setInterval() kodu sizi kesintiye uğratır. 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şik Komut Menüsü

Komut Menüsü'nü şimdi açtığınızda, komutunuzun başına büyüktür karakteri (>) eklenir. Bunun nedeni, Menü, Dosya Aç menüsüyle birleştirilmiştir. Command+O (Mac) veya Control+O (Windows, Linux).

Ö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ı Ekibi ile iletişime geçme

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.

Geliştirici Araçları'ndaki yenilikler

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