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

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'da Chrome Geliştirici Araçları'ndaki yenilikleri görmek için aşağıdaki videoyu izleyin veya okumaya devam edin!

Öne çıkanlar

CSS ve JS kod kapsamı. Kullanılmayan CSS ve JS'leri yeni Kapsam sekmesiyle bulabilirsiniz.
Tam sayfa ekran görüntüleri. Görüntü alanının üst kısmından altına kadar tüm sayfanın ekran görüntüsünü alın.
İstekleri engelle. Ağ panelinde her isteği manuel olarak devre dışı bırakın.
Eşzamansız senkronizasyona geçiş sizi bekliyor. Eş zamansız işlevlerde öngörülebilir şekilde adım atma.
Birleşik Komut Menüsü. Yeni birleştirilen Komut menüsünden komutlar yürütün ve dosyaları açın.

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, bu sekme ne kadar kodun kullanıldığını ve ne kadar yüklendiğini gösterir. Yalnızca ihtiyacınız olan kodu göndererek sayfalarınızın boyutunu küçültebilirsiniz.

Kapsam sekmesi

Bir URL tıklandığında, hangi kod satırlarının yürütüldüğünün dökümüyle birlikte Kaynaklar panelinde ilgili dosya gösterilir.

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ı, o satırdaki yalnızca bir kodun yürütüldüğü anlamına gelir. Örneğin, var b = (a > 0) ? a : 0 gibi bir üçlü ifade hem kırmızı hem de yeşil renktedir.

Kapsam sekmesini açmak için:

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

Tam sayfa ekran görüntüleri

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

İstekleri engelle

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. Çekmece'de, engellenen istekleri yönetmenize olanak tanıyan yeni bir Engelleme isteğinde bulun 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() ortasındayken bir satırın üzerine basarsınız ve ardından setInterval() kodu kesintiye uğrar. Artık test() gibi eş zamansız bir kodda ilerlediğinizde Geliştirici Araçları, ilk satırdan son satıra tutarlılıkla doğru ilerliyor.

  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 üst düzeye çıkarmak mı istiyorsunuz? Şu yeni dokümanlara göz atın:

Değişiklikler

Komut Menüsü'nü şimdi açtığınızda, komutunuzun başına büyüktür karakteri (>) eklendiğine dikkat edin. Bunun nedeni, Komut Menüsü'nün Command+O (Mac) veya Control+O (Windows, Linux) olan Dosya Aç menüsü ile birleştirilmiş olmasıdı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.