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

Chrome 67 sürümünde Geliştirici Araçları'nda sunulacak yeni özellikler ve önemli değişiklikler şunlardır:

Sürüm notlarının video sürümü:

panelini açıp Command+F (Mac) veya Control+F tuşlarına basın (Windows, Linux, ChromeOS) yeni Ağ Arama bölmesini açın. Geliştirici Araçları başlıklarda arama yapar .

'cache-control' metni arama yeni Ağ Arama bölmesini açın.

Şekil 1. Yeni Ağ Arama bölmesiyle cache-control metni aranıyor

Sorgunuzu yapmak için Büyük/Küçük Harf Eşleştir'i Büyük/Küçük Harf Eşleştir tıklayın. büyük/küçük harfe duyarlıdır. Normal İfade Kullan'ı tıklayın. Eşleşen tüm sonuçları göstermek için Normal İfade kullan geri dönelim. Normal İfadenizi düz eğik çizgi içine almanız gerekmez.

Ağ Arama bölmesinde bir normal ifade sorgusu.

2. Şekil. Ağ Arama bölmesinde bir normal ifade sorgusu.

Genel Arama bölmesinin kullanıcı arayüzü, artık yeni Ağ Arama bölmesinin kullanıcı arayüzüyle eşleşmektedir. Şimdi taramaya yardımcı olmak için sonuçları güzel yazdırır.

Eski ve yeni kullanıcı arayüzü.

3. Şekil. Solda eski kullanıcı arayüzü, sağ tarafta yeni kullanıcı arayüzü

Command+Option+F (Mac) veya Global'ı açmak için Ctrl+Üst Karakter+F (Windows, Linux, ChromeOS) Arama. Komut menüsü aracılığıyla da açabilirsiniz.

Stiller bölmesinde CSS değişken değeri önizlemeleri

background-color veya color gibi bir CSS renk özelliğinin değeri CSS olarak ayarlandığında değişkeni görürseniz Geliştirici Araçları artık bu rengin bir önizlemesini gösteriyor.

CSS değişkeni renk değerleri örneği.

4. Şekil. Soldaki eski kullanıcı arayüzünde, sol taraftaki color: var(--main-color), sağdaki yeni kullanıcı arayüzünde ise

Getirme olarak kopyala

Bir ağ isteğini sağ tıklayıp Kopyala'yı seçin > Kopyalamak için Getir Olarak Kopyala fetch() eşdeğeri kodu panonuza yapıştırın.

Bir isteğin getirme() eşdeğeri kodunu kopyalama.

5. Şekil. Bir istek için fetch() eşdeğeri kodunu kopyalama

Geliştirici Araçları, aşağıdaki gibi kodlar üretir:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Denetimler paneli güncellemeleri

Yeni denetimler

Denetimler panelinde aşağıdakiler dahil 2 yeni denetim yapıldı:

Yeni yapılandırma seçenekleri

Artık Denetimler panelini aşağıdaki işlemler için yapılandırabilirsiniz:

  • Masaüstü görüntü alanını ve kullanıcı aracısı ayarlarını koru. Başka bir deyişle, Denetimler bir mobil cihaz simülasyonundan yararlanamaz.
  • Ağ ve CPU kısıtlamayı devre dışı bırakın.
  • Denetimler sırasında LocalStorage ve IndexedDB gibi depolama alanlarını koruyun.

Yeni denetim yapılandırma seçenekleri.

6. Şekil. Yeni denetim yapılandırması seçenekleri

İzleri görüntüle

Bir sayfayı denetledikten sonra, denetlemenizin kapsamındaki yük performansı verilerini görüntülemek için View Trace'i (İzlemeyi Görüntüle) tıklayın. (Performans paneline göre)

İzlemeyi Görüntüle düğmesi.

7. Şekil. İzlemeyi Görüntüle düğmesi

Sonsuz döngüleri durdurma

for döngüler, do...while döngüler veya çok sayıda yineleme ile çalışıyorsanız muhtemelen sonsuz döngü oluşturabilirsiniz. Sonsuz döngüyü durdurmak için artık şunları yapabilirsiniz:

  1. Kaynaklar panelini açın.
  2. DuraklatDuraklat tıklayın. Düğme, Devam ettir Komut Dosyası Yürütme Devam ettir.
  3. Komut Dosyası Yürütmeyi Devam Ettir'i basılı tutun Devam ettir, ardından Durdur'u seçin Mevcut JavaScript Çağrısı Durdur.

Yukarıdaki videoda saat, setInterval() zamanlayıcı kullanılarak güncelleniyor. Başlat Infinite Loop, hiçbir zaman durmayan bir do...while döngüsü çalıştırır. Aralık şu şekilde devam ettirilir: Geçerli JavaScript Çağrısını Durdur Durdur olduğunda çalışıyor. seçili.

Performans sekmelerindeki Kullanıcı Zamanlaması

Bir performans kaydını görüntülerken Kullanıcı Zamanlaması'nı görüntülemek için Kullanıcı Zamanlaması bölümünü tıklayın Özet, Aşağıdan Yukarı, Çağrı Ağacı ve Olay Günlüğü sekmelerindeki ölçüm sonuçlarını gösterir.

Alttan Yukarı sekmesinde Kullanıcı Zamanlaması ölçümlerini görüntüleme.

8. Şekil. Aşağıdan Yukarı sekmesinde Kullanıcı Zamanlaması ölçümlerini görüntüleme. Sütunun solundaki mavi çubuk Kullanıcı Zamanlaması bölümünde, bu özelliğin seçildiği belirtilir.

Genel olarak artık bölümlerden herhangi birini (Ana İleti Dizisi, Kullanıcı Zamanlaması, GPU, ScriptStreamer vb.) ve bu bölümün sekmelerdeki etkinliğini görüntüleyebilirsiniz.

Bellek panelinde JavaScript sanal makine örneklerini seçin

Bellek panelinde artık bir sayfayla ilişkilendirilmiş tüm JavaScript sanal makine örnekleri açıkça listeleniyor. Hedef açılır menüsünün arkasına gizlemek yerine bu seçeneği belirleyebilirsiniz.

Bellek panelinin önceki ve sonraki ekran görüntüleri.

9. Şekil. Soldaki eski kullanıcı arayüzünde, JavaScript sanal makine örnekleri Hedef açılır menüsü, sağdaki yeni kullanıcı arayüzünde Hedef JavaScript Sanal Makine Örneği tablosu

developers.google.com örneğinin yanında 2 değer vardır: 8.7 MB ve 13.3 MB. Sol değeri, JavaScript nedeniyle ayrılan belleği temsil eder. Doğru değer tüm işletim sistemi belleğini temsil eder ayrılan toplam alanı belirlemektir. Sağdaki değer, soldaki değer de dahil. Chrome'un Görev Yöneticisi'nde soldaki değer JavaScript Memory, sağdaki değere karşılık gelir Memory Footprint değerine karşılık gelir.

Ağ sekmesi, Sayfa sekmesi olarak yeniden adlandırıldı

Kaynaklar panelinde, sekmesi artık Sayfa sekmesi olarak adlandırılıyor.

Yan yana duran iki Geliştirici Araçları penceresi, ad değişikliğini gösteriyor.

10. Şekil. Soldaki eski kullanıcı arayüzünde, sayfanın kaynaklarını gösteren sekmeye , sağdaki yeni kullanıcı arayüzünde Sayfa olarak adlandırılmıştır.

Koyu tema güncellemeleri

Chrome 67'de, koyu tema renk şemasında bazı küçük değişiklikler yapılmıştır. Örneğin, ayrılma noktası simgeleri ve mevcut yürütme satırı yeşile döner.

Yeni ayrılma noktası simgesinin ve mevcut yürütme renk şemasının ekran görüntüsü.

Şekil 11. Yeni ayrılma noktası simgesinin ve mevcut yürütme renk şemasının ekran görüntüsü

Güvenlik panelinde sertifika şeffaflığı

Güvenlik paneli artık sertifika şeffaflığı bilgilerini raporluyor.

Güvenlik panelindeki sertifika şeffaflığı bilgileri.

Şekil 12. Güvenlik panelindeki sertifika şeffaflığı bilgileri

Performans panelinde Site İzolasyonu

Site İzolasyonu'nu etkinleştirdiyseniz Performans paneli artık görebilirsiniz. Böylece her bir işlemin neden olduğu toplam işi görebilirsiniz.

Performans kaydındaki işlem başına flame grafikleri.

13. Şekil. Performans kaydındaki işlem başına flame grafikleri

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