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 bir bölümüyle karşınızdayız. 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ı. Yeni Kapsam sekmesiyle, kullanılmayan CSS ve JS'leri bulabilirsiniz.
Tam sayfa ekran görüntüleri. Görüntü alanının üst kısmından alt kısmına kadar sayfanın tamamının ekran görüntüsünü alın.
İstekleri engelle. Ağ panelinde istekleri tek tek devre dışı bırakın.
Eş zamansız geçişin üzerinden geçin. Eş zamansız işlevlerde tahmin edilebilir şekilde ilerleyin.
Birleştirilmiş Komut Menüsü. Yeni birleştirilmiş Komut Menüsünden komutları yürütün ve dosyaları açın.

Yeni özellikler

CSS ve JS kod kapsamı

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

Kapsam sekmesi

URL'yi tıkladığınızda ilgili dosya, hangi kod satırlarının yürütüldüğüne ilişkin bir dökümle birlikte Kaynaklar panelinde gösterilir.

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

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

Sabit yeşil, kod satırının yürütüldüğü anlamına gelir.
Sabit kırmızı renkte yanıp sönmesi, işlemin yürütülmediğini gösterir.
Yukarıdaki ekran görüntüsündeki 3. satır gibi hem kırmızı hem de yeşil olan bir kod satırı, bu satırda 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 renklendirilir.

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 alta kadar ekran görüntüsünü nasıl alacağınızı öğrenmek için aşağıdaki videoyu izleyin.

İstekleri engelle

Belirli bir komut dosyası, stil sayfası veya başka bir kaynak kullanılamıyorsa sayfanızın nasıl davrandığını mı görmek istiyorsunuz? Ağ panelinde isteği sağ tıklayın ve İstek URL'sini Engelle'yi seçin. Çekmecede, engellenen istekleri yönetmenize olanak tanıyan yeni bir İstek engelleme sekmesi açılır.

İstek URL'sini Engelle

Eşzamansız adımı aşılayın

Şu ana kadar, kodu aşağıdaki snippet gibi adım adım uygulamaya çalışmak baş ağrısıydı. test() ortasındayken bir hattın üstünden geçerseniz setInterval() kodu kesintiye uğrar. Şimdi, test() gibi eşzamansız kodlarda ilerlerken Geliştirici Araçları ilk satırdan son satıra kadar 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 üst düzeye çıkarmak mı istiyorsunuz? Şu yeni dokümanlara göz atın:

Değişiklikler

Komut Menüsü'nü açtığınızda, komutunuzun başına büyüktür (>) karakteri (>) eklendiğini görürsünüz. Bunun nedeni, Komut Menüsünün Dosya Aç menüsüyle birleştirilmiş olmasıdır. Bu menü Command+O (Mac) veya Control+O (Windows, Linux) şeklindedir.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.