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

Kayce Basques

Chrome 67'de DevTools'a eklenen yeni özellikler ve yapılan önemli değişiklikler şunlardır:

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

Ağ panelini açıp yeni Ağ Arama bölmesini açmak için Command+F (Mac) veya Control+F (Windows, Linux, ChromeOS) tuşlarına basın. Geliştirici Araçları, sağladığınız sorgu için tüm ağ isteklerinin üstbilgilerini ve gövdelerini arar.

Yeni Ağ Arama bölmesiyle "cache-control" metnini arama.

Şekil 1. Yeni Ağ Arama bölmesiyle cache-control metnini arama

Sorgunuzu büyük/küçük harfe duyarlı hale getirmek için Büyük/küçük harfe duyarlı eşle'yi Büyük/küçük harf eşleştir tıklayın. Sağladığınız kalıpla eşleşen tüm sonuçları göstermek için Normal İfade Kullan Normal İfade kullan'ı tıklayın. Normal İfadenizi düz eğik çizgi içine almanız gerekmez.

Ağ Arama bölmesinde normal ifade sorgusu.

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

Küresel Arama bölmesinin kullanıcı arayüzü artık yeni Ağ Arama bölmesinin kullanıcı arayüzüyle eşleşiyor. Artık taranabilirliği artırmak için sonuçları güzel bir şekilde yazdırıyor.

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

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

Küresel Arama'yı açmak için Command+Option+F (Mac) veya Control+Shift+F (Windows, Linux, ChromeOS) tuşlarına basın. 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 değişkenine ayarlandığında, Geliştirici Araçları artık bu rengin önizlemesini gösteriyor.

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

Şekil 4. Soldaki eski kullanıcı arayüzünde color: var(--main-color) seçeneğinin yanında renk önizlemesi yoktur. Sağdaki yeni kullanıcı arayüzünde ise

Fetch olarak kopyala

Bir ağ isteğini sağ tıklayın ve Kopyala > Getir Olarak Kopyala'yı seçerek ilgili istek için fetch() eşdeğer kodu panonuza kopyalayın.

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

Şekil 5. Bir istek için fetch() eşdeğer 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 Denetim panelini şu şekilde yapılandırabilirsiniz:

  • Masaüstü görüntü alanı ve kullanıcı aracısı ayarlarını koruyun. Diğer bir deyişle, Denetim panelinin mobil cihaz simülasyonu yapmasını engelleyebilirsiniz.
  • Ağ ve CPU kısıtlamasını devre dışı bırakın.
  • LocalStorage ve IndexedDB gibi depolama alanlarını denetimler arasında koruyun.

Yeni denetim yapılandırma seçenekleri.

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

İzleri görüntüle

Bir sayfayı denetledikten sonra, denetlemenizde temel alınan yükleme performansı verilerini Performans panelinde görüntülemek için İzleme'yi Görüntüle'yi tıklayın.

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

Şekil 7. İzi Göster düğmesi

Sonsuz döngüleri durdurma

for döngüleri, do...while döngüleri veya yinelemeyle çok çalışıyorsanız sitenizi geliştirirken yanlışlıkla sonsuz döngü çalıştırmış olabilirsiniz. Sonsuz döngüyü durdurmak için artık şunları yapabilirsiniz:

  1. Kaynaklar panelini açın.
  2. Duraklat'ı Duraklat tıklayın. Düğme Komut Dosyası Çalıştırmayı Devam ettir Devam ettir olarak değişir.
  3. Komut Dosyası Yürütmeyi Devam ettir'i basılı tutarakDevam ettir Mevcut JavaScript Çağrısını Durdur'u Durdur seçin.

Yukarıdaki videoda, saat bir setInterval() zamanlayıcı aracılığıyla güncelleniyor. Sonsuz Döngüyü Başlat'ı tıkladığınızda, hiç durmayan bir do...while döngüsü çalıştırılır. Mevcut JavaScript Çağrısını Durdur Durdur seçildiğinde çalışmadığı için aralık devam eder.

Performans sekmelerindeki kullanıcı zamanlaması

Performans kaydını görüntülerken Özet, Aşağıdan Yukarı, Çağrı Ağacı ve Etkinlik Günlüğü sekmelerinde Kullanıcı Zamanlaması ölçümlerini görüntülemek için Kullanıcı Zamanlaması bölümünü tıklayın.

Kullanıcı Zamanlaması ölçümlerini Aşağıdan Yukarıya sekmesinde görüntüleme.

Şekil 8. Aşağıdan Yukarı sekmesinde kullanıcı zamanlaması ölçümlerini görüntüleme. Kullanıcı Zamanlaması bölümünün solundaki mavi çubuk, bu bölümün seçili olduğunu gösterir.

Genel olarak, artık bölümlerden herhangi birini (Ana Konu, Kullanıcı Zamanlaması, GPU, ScriptStreamer vb.) seçebilir ve sekmelerde ilgili bölümün etkinliğini görüntüleyebilirsiniz.

Bellek panelinde JavaScript sanal makine örneklerini seçme

Bellek panelinde artık bir sayfayla ilişkili tüm JavaScript sanal makine örnekleri, önceki gibi Hedef açılır menüsünün arkasına gizlenmek yerine açıkça listelenir.

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ünün arkasına gizlenmiş, sağdaki yeni kullanıcı arayüzünde ise JavaScript Sanal Makine Örneği Seçin tablosunda gösterilmektedir

developers.google.com örneğinin yanında 2 değer vardır: 8.7 MB ve 13.3 MB. Soldaki değer, JavaScript nedeniyle ayrılan belleği temsil eder. Doğru değer, söz konusu sanal makine örneği nedeniyle ayrılan tüm işletim sistemi belleğini temsil eder. Sağdaki değer, soldaki değer de dahil. Chrome'un Görev Yöneticisi'nde soldaki değer JavaScript Memory, sağdaki değer ise 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.

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

Şekil 10. Soldaki eski kullanıcı arayüzünde, sayfanın kaynaklarını gösteren sekmenin adı Ağ iken sağdaki yeni kullanıcı arayüzünde Sayfa olarak adlandırılı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, kesme noktası simgeleri ve mevcut yürütme satırı artık yeşil renktedir.

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

Şekil 11. Yeni kesme noktası simgesinin ve geçerli yürütme satırı 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 panelinde artık her işlem için bir alev grafiği gösterilir. Böylece her işlemin neden olduğu toplam çalışmayı görebilirsiniz.

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

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

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji web platformu API'lerini test etmenizi ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanızı sağlar.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.