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

Geliştirici Araçları sürüm notlarının bir başka 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 azaltabilirsiniz.

Kapsam sekmesi

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

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

Her kod satırı renk kodludur:

  • 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ılamadığında sayfanızı nasıl davrandığını görmek mi istiyorsunuz? 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 await'ı atlama

Aşağıdaki snippet gibi kodlarda adım adım ilerlemeye çalışmak şimdiye kadar bir baş ağrısıydı. test()'ün ortasındayken bir satır atlarsınız ve setInterval() kodu tarafından kesintiye uğrarsı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şik 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

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şmenize, en yeni web platformu API'lerini test etmenize 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.

Geliştirici Araçları'ndaki yenilikler

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