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

Kayce Basques

Chrome 68'deki DevTools'da yenilikler:

Devamını okuyun veya sürüm notlarının video sürümünü aşağıdan izleyin.

Yardımcı Konsolu

Chrome 68, otomatik tamamlama ve önizlemeyle ilgili birkaç yeni Console özelliğiyle birlikte sunulur.

Eager Evaluation

Console'a bir ifade yazdığınızda Console artık imlecinizin altında bu ifadenin sonucunun önizlemesini gösterebilir.

Console, sort() işleminin sonucunu açıkça yürütülmeden önce yazdırıyor.

Şekil 1. Console, sort() işleminin sonucunu açıkça yürütülmeden önce yazdırıyor

Eager değerlendirmeyi etkinleştirmek için:

  1. Konsolu açın.
  2. Konsol Ayarları'nı Console Ayarları düğmesi açın.
  3. Eager evaluation (İvedi değerlendirme) onay kutusunu etkinleştirin.

Geliştirici Araçları, ifadenin yan etkilere neden olup olmadığını önceden değerlendirmez.

Bağımsız değişken ipuçları

Console, artık işlevleri yazarken işlevin beklediği bağımsız değişkenleri gösterir.

Console'daki bağımsız değişken ipuçları.

Şekil 2. Konsolda bağımsız değişken ipuçlarına dair çeşitli örnekler

Notlar:

  • Bir bağımsız değişkenden önce gelen soru işareti (ör. ?options), isteğe bağlı bir bağımsız değişkeni temsil eder.
  • Bir bağımsız değişkenden önce gelen üç nokta (ör. ...items), dağılım anlamına gelir.
  • CSS.supports() gibi bazı işlevler birden fazla bağımsız değişken imzasını kabul eder.

İşlev çalıştırmalarından sonra otomatik tamamlama

İstenmeden Değerlendirme özelliğini etkinleştirdikten sonra Console, bir işlev yazdıktan sonra hangi mülklerin ve işlevlerin kullanılabileceğini de gösterir.

document.querySelector('p') çalıştırıldıktan sonra Console, ilgili öğe için kullanılabilir özellikleri ve işlevleri size gösterebilir.

Şekil 3. Üstteki ekran görüntüsü eski davranışı, alttaki ekran görüntüsü ise işlev otomatik tamamlamayı destekleyen yeni davranışı temsil etmektedir.

Otomatik tamamlamada ES2017 anahtar kelimeleri

await gibi ES2017 anahtar kelimeleri artık Console'un otomatik tamamlama kullanıcı arayüzünde kullanılabilir.

Console artık otomatik tamamlama kullanıcı arayüzünde "bekle"yi öneriyor.

Şekil 4. Konsol artık otomatik tamamlama kullanıcı arayüzünde await öneriyor

Daha hızlı ve daha güvenilir denetimler, yeni bir kullanıcı arayüzü ve yeni denetimler

Chrome 68, Lighthouse 3.0 ile birlikte sunulur. Sonraki bölümlerde, en büyük değişikliklerden bazılarına yer verilmiştir. Tüm hikaye için Lighthouse 3.0'u duyuruyoruz başlıklı makaleyi inceleyin.

Daha hızlı ve daha güvenilir denetimler

Lighthouse 3.0'ta, Lantern kod adlı yeni bir dahili denetim motoru bulunur. Bu motor, denetimlerinizi daha hızlı ve çalıştırmalar arasında daha az varyasyonla tamamlar.

Yeni kullanıcı arayüzü

Lighthouse 3.0, Lighthouse ve Chrome UX (Araştırma ve Tasarım) ekipleri arasındaki işbirliği sayesinde yeni bir kullanıcı arayüzü de sunuyor.

Lighthouse 3.0'taki yeni rapor kullanıcı arayüzü.

Şekil 5. Lighthouse 3.0'taki yeni rapor kullanıcı arayüzü

Yeni denetimler

Lighthouse 3.0'ta 4 yeni denetim de yer alır:

  • İlk Zengin İçerikli Boyama
  • robots.txt dosyası geçerli değil
  • Animasyonlu içerik için video biçimleri kullanın
  • Herhangi bir kaynak için birden fazla, maliyetli gidiş dönüşten kaçının

BigInt desteği

Chrome 68, BigInt adlı yeni bir sayısal ilkel türünü destekler. BigInt, tam sayıları rastgele hassasiyetle temsil etmenize olanak tanır. Console'da deneyebilirsiniz:

Console'da BigInt örneği.

Şekil 6. Console'daki BigInt örneği

İzlenecek özellik yolu ekle

Bir durak noktasında duraklatılmışken, Kapsam bölmesinde bir mülkü sağ tıklayın ve İzlenecek özellik yolunu ekle'yi seçerek bu mülkü İzleme bölmesine ekleyin.

İzlenecek özellik yolu ekleme örneği.

Şekil 7. İzlenecek özellik yolu ekle seçeneğiyle ilgili örnek

"Sekme işaretlerini göster" ayarlar bölümüne taşındı

Daha önce Console Ayarları bölümünde bulunan Zaman damgasını göster onay kutusu Konsol Ayarları düğmesi Ayarlar'a taşındı.

Ö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.