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:

• Tüm ağ üstbilgilerinde arama
• Stiller bölmesinde CSS değişken değeri önizlemeleri
• Getirme olarak kopyala
• Yeni denetimler, masaüstü yapılandırma seçenekleri ve görüntüleme izleri
• Sonsuz döngüleri durdurma
• Performans sekmelerindeki Kullanıcı Zamanlaması
• JavaScript sanal makine örnekleri, Bellek panelinde açıkça listelenmiş
• Kaynaklar panelindeki Ağ sekmesinin adı Sayfa sekmesi olarak değiştirildi
• Koyu tema güncellemeleri
• Güvenlik panelindeki sertifika şeffaflığı bilgileri
• Performans panelindeki site izolasyonu özellikleri

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

Tüm ağ üstbilgilerinde ve yanıtlarda ara

Ağ 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 .

Ş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 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 geri dönelim. Normal İfadenizi düz eğik çizgi içine almanız gerekmez.

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

Arama bölmesi kullanıcı arayüzü güncellemeleri

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.

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.

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.

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ı:

• Önemli istekleri önceden yükleyin. Önceden yükleme istekleri, tarayıcı kullanarak Kritik Oluşturma Yolunuz için önemli olan kaynakları, bu işlemler sırasında yapmasını sağlar.
• Web yazı tipleri yüklenirken görünmez metin kullanmaktan kaçının. Arama yaparken metnin görünür olduğundan emin olmak web yazı tiplerinin yüklenmesi, sayfayı kullanıcılar için daha hızlı hale getirir.

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.

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)

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. Duraklat'ı tıklayın. Düğme, Devam ettir Komut Dosyası Yürütme .
3. Komut Dosyası Yürütmeyi Devam Ettir'i basılı tutun , ardından Durdur'u seçin Mevcut JavaScript Çağrısı .

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

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 ayarın seçili olduğu 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.

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, Ağ sekmesi artık Sayfa sekmesi olarak adlandırılıyor.

10. Şekil. Soldaki eski kullanıcı arayüzünde, sayfanın kaynaklarını gösteren sekmeye Ağ, 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.

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

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

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