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

Kayce Basques
Kayce Basques
X GitHub

Chrome 68'deki Geliştirici Araçları'nda yenilikler:

Aşağıdaki sürüm notlarının video versiyonunu izleyebilir veya okumaya devam edebilirsiniz.

Yardımcı Konsol

Chrome 68, otomatik tamamlama ve önizleme ile ilgili birkaç yeni Console özelliğiyle birlikte gelir.

Eager Değerlendirme

Konsola bir ifade yazdığınızda, imlecinizin altında bu ifadenin sonucunun önizlemesi gösterilir.

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

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

Eager değerlendirmeyi etkinleştirmek için:

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

İfade yan etkilere neden oluyorsa Geliştirici Araçları, ifadeyi hemen değerlendirmez.

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

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

Konsoldaki bağımsız değişken ipuçları.

Şekil 2. Konsoldaki çeşitli bağımsız değişken ipuçları örnekleri

Notlar:

  • Bir argümandan önce gelen soru işareti (ör. ?options), isteğe bağlı bir argümanı temsil eder.
  • Bir argümandan önce gelen üç nokta (ör. ...items), yaymayı temsil eder.
  • CSS.supports() gibi bazı işlevler birden fazla bağımsız değişken imzası kabul eder.

İşlev yürütmelerinden sonra otomatik tamamlama

Eager Evaluation'ı etkinleştirdikten sonra konsol, artık bir işlevi yazdığınızda hangi özelliklerin ve işlevlerin kullanılabileceğini de gösteriyor.

document.querySelector('p') komutunu çalıştırdıktan sonra Konsol artık bu öğe için kullanılabilir özellikleri ve işlevleri gösterebilir.

Şekil 3. Üstteki ekran görüntüsü eski davranışı, alttaki ekran görüntüsü ise işlev otomatik tamamlama özelliğini destekleyen yeni davranışı gösterir.

Otomatik tamamlama özelliğinde ES2017 anahtar kelimeleri

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

Konsol artık otomatik tamamlama kullanıcı arayüzünde "await"i öneriyor.

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

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

Chrome 68, Lighthouse 3.0 ile birlikte gelir. Sonraki bölümlerde, en büyük değişikliklerden bazıları özetlenmiştir. Hikayenin tamamı için Announcing Lighthouse 3.0 (Lighthouse 3.0'ın duyurulması) başlıklı makaleyi inceleyin.

Daha hızlı ve güvenilir denetimler

Lighthouse 3.0, Lantern kod adlı yeni bir dahili denetleme motoruna sahiptir. Bu motor, denetlemelerinizi daha hızlı ve çalıştırmalar arasında daha az varyansla tamamlar.

Yeni kullanıcı arayüzü

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

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

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

Yeni denetimler

Lighthouse 3.0'da 4 yeni denetim de bulunur:

  • First Contentful Paint
  • robots.txt dosyası geçerli değil
  • Animasyonlu içerik için video biçimleri kullanma
  • Herhangi bir kaynağa birden fazla ve maliyetli gidiş-dönüş yolculuğu yapmaktan kaçının.

BigInt desteği

Chrome 68, BigInt adlı yeni bir sayısal öğeyi destekler. BigInt, tam sayıları rastgele hassasiyetle temsil etmenizi sağlar. Konsolda deneyin:

Console'da BigInt örneği.

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

İzlenecek özellik yolu ekleme

Bir kesme noktasında duraklatılmış durumdayken Kapsam bölmesinde bir özelliği sağ tıklayın ve bu özelliği İzleme bölmesine eklemek için İzlenecek özellik yolu ekle'yi seçin.

İzlenecek özellik yolu ekleme örneği.

Şekil 7 İzlenecek özellik yolu ekle örneği

"Zaman damgalarını göster" ayarlar bölümüne taşındı

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

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.