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. Videoyu izleyin aşağıya göz atın veya Chrome 59'daki Chrome Geliştirici Araçları'ndaki yenilikleri görmek için okumaya devam edin!

Öne çıkanlar

Yeni özellikler

CSS ve JS kod kapsamı

Kullanılmayan CSS ve JS kodlarını yeni Kapsam sekmesiyle bulabilirsiniz. Bu işlemi gerçekleştirdiğinizde veya bir sayfa açtığınızda, bu sekmede ne kadar kodun kullanıldığını ve ne kadar yüklendi. Yalnızca kodu göndererek sayfalarınızın boyutunu küçültebilirsiniz ihtiyacınız olacak.

Kapsam sekmesi

Bir URL tıklandığında bu dosyanın Kaynaklar panelinde dökümü ile birlikte gösterilir 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.
  • Sabit kırmızı ışık 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, üçlü var b = (a > 0) ? a : 0 gibi 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 reklam öğesi algılandığında sayfanızın başka kaynak yok mu? Ağ'da isteği sağ tıklayın. panelini açın ve İstek URL'sini engelle'yi seçin. Yeni Engelleme isteğinde bulun sekmesi çekmecesinde açılır. Bu sayfa, engellenen istekleri yönetmenize olanak tanı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. Bir sonraki videoda test() gibi eş zamansız kod, Geliştirici Araçları adımlarından ilk satırdan son satıra kadar sağlayabilir.

  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ü

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ı 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 Daha fazla > 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.