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

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

Kayce Basques

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

Eager Değerlendirme. İfadeleri yazarken Konsol, sonucu önizler.
Bağımsız değişken ipuçları. Siz işlevleri yazarken Console o işlev için beklenen bağımsız değişkenleri gösterir.
İşlev otomatik tamamlama. document.querySelector('p') gibi bir işlev çağrısı yazdıktan sonra Konsol, döndürülen değerin desteklediği işlevleri ve özellikleri gösterir.
Konsol'daki ES2017 anahtar kelimeleri. await gibi anahtar kelimeler artık Console'un otomatik tamamlama kullanıcı arayüzünde kullanılabilir.
Denetimler panelindeki Lighthouse 3.0. Daha hızlı ve tutarlı denetimler, yeni kullanıcı arayüzü ve yeni denetimler.
BigInt Destek Ekibi. Konsolda JavaScript'in yeni rastgele duyarlı tam sayısını deneyin.
İzleme bölmesine mülk yolları ekleme. Özellikleri Kapsam bölmesinden İzleme bölmesine ekleyin.
"Zaman damgalarını göster", Ayarlar'a taşındı.

Not: chrome://version adresinde Chrome'un hangi sürümünü kullandığınızı kontrol edin. Önceki bir sürümü kullanıyorsanız bu özellikler mevcut olmayacaktır. Daha yeni bir sürümü kullanıyorsanız bu özellikler değişmiş olabilir. Chrome, yaklaşık 6 haftada bir yeni ana sürüme otomatik olarak güncellenir.

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 imlecinizin altında bu ifadenin sonucunun önizlemesini gösterebilir.

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ülmeden önce yazdırıyor

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

Konsolu açın.
Konsol Ayarları'nı açın.
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, Konsol artık bir işlev yazdıktan sonra hangi özellik ve işlevlerin kullanılabilir olduğunu da gösterir.

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 işlev otomatik tamamlamayı destekleyen yeni davranışı temsil eder.

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 "bekliyor" önerisinde bulunuyor.

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 denetleme motoruna sahiptir. Bu motor, denetimlerinizi daha hızlı şekilde ve çalıştırmalar arasındaki farkları azaltır.

Yeni kullanıcı arayüzü

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

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, tam sayıları rastgele hassasiyetle göstermenizi sağ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 İzlemeye özellik yolu ekle'yi seçerek bu özelliği İzleme bölmesine ekleyin.

İ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ı'ndaki Zaman damgalarını göster onay kutusu Ayarlar'a taşınmıştı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.