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

Kayce Basques

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

Aşağıdaki sürüm notlarını okuyun veya video sürümünü izleyin.

Yardımcı Konsol

Chrome 68, otomatik tamamlama ve önizleme ile ilgili birkaç yeni Console özelliği içerir.

Eager Değerlendirme

Console'a bir ifade yazdığınızda, Console artık o ifadenin sonucunun bir önizlemesini gösterebilir ifadesini tıklayın.

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

Şekil 1. Konsol, sort() işleminin sonucunu açıkça yürütüldü

Eager Değerlendirme'yi etkinleştirmek için:

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

Geliştirici Araçları, ifadenin yan etkilere neden olup olmadığını değerlendirmek için istekli değildir.

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

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

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

2. Şekil. Console'daki bağımsız değişken ipuçları için çeşitli örnekler

Notlar:

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

İşlev yürütme işleminden sonra otomatik tamamlama

.

Eager Değerlendirme etkinleştirildikten sonra Console artık size hangi özellik ve işlevlerin kullanılabilir hale gelir.

document.querySelector('p') öğesini çalıştırdıktan sonra, Console artık söz konusu öğe için kullanılabilir özellikleri ve işlevleri gösterebilir.

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

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 "bekliyor" önerisinde bulunuyor otomatik tamamlama kullanıcı arayüzünde görebilirsiniz.

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

Daha hızlı ve güvenilir denetimler, yeni 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ının özeti yer almaktadır. Yazının tamamı için Announcing Lighthouse 3.0 (Lighthouse 3.0 Duyurusu) bölümüne göz atın.

Daha hızlı ve güvenilir denetimler

Lighthouse 3.0, Lantern kodlu yeni bir dahili denetim motoruna sahiptir ve denetimlerinizi tamamlar. ve çalıştırmalar arasında daha az değişiklik yaşanır.

Yeni kullanıcı arayüzü

Lighthouse 3.0, Lighthouse ile Chrome kullanıcı deneyimi arasındaki ortak çalışma sayesinde yeni bir kullanıcı arayüzü de getiriyor (Araştırma ve Tasarım) ekiplerinden biriyim.

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

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

Yeni denetimler

Lighthouse 3.0 ayrıca 4 yeni denetim içerir:

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

BigInt desteği

Chrome 68, BigInt adlı yeni bir sayısal temeli destekler. BigInt temsil etmenizi sağlar rastgele kesinliğe sahip tam sayılar. Console'da deneyin:

Console'daki BigInt örneği.

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

İzlenecek özellik yolu ekleyin

Bir ayrılma noktasında duraklatılmış durumdayken Kapsam bölmesinde bir özelliği sağ tıklayın ve Özellik ekle yolu izlemelisiniz.

İzlenecek mülk yolu ekleyin örneği.

7. Şekil. İzlenecek mülk yolunu ekleyin örneği

"Zaman damgalarını göster" ayarlara taşındı

Daha önce Konsol Ayarları'nda bulunan Zaman damgaları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, 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.