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çın, ardından 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 modelle eşleşen tüm sonuçları göstermek için Normal ifade kullan'ı Normal İfade kullan tıklayın. Normal ifadenizi eğik çizgi içine almanız gerekmez.

Ağ Arama bölmesinde normal ifade sorgusu.

Şekil 2. 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. Soldaki eski kullanıcı arayüzü ve sağdaki 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. Bu menüyü Komut Menüsü'nden de açabilirsiniz.

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

background-color veya color gibi bir CSS renk özelliğinin değeri bir CSS değişkenine ayarlandığında DevTools artık bu rengin önizlemesini gösterir.

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 söz konusu istek için fetch() eşdeğer kodu panonuza kopyalayın.

Bir istek için fetch() 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 bir kod oluşturur:

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 şunlar dahil olmak üzere 2 yeni denetim vardır:

Yeni yapılandırma seçenekleri

Artık Denetim panelini aşağıdaki ş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.

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

İzi Göster 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 do...while döngüsü hiç durmadan çalışı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.

Aşağıdan Yukarıya sekmesinde kullanıcı zamanlaması ölçümlerini 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 hallerini gösteren ekran görüntüleri.

Şekil 9. Soldaki eski kullanıcı arayüzünde JavaScript sanal makine örnekleri Hedef açılır menüsünün arkasına gizlenirken sağdaki yeni kullanıcı arayüzünde JavaScript sanal makine örneğini seçin tablosunda gösterilir.

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ğ değer, sol değeri içerir. Chrome'un Görev Yöneticisi'nde sol değer JavaScript Memory, sağ 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.

Ad değişikliğini gösteren yan yana iki Geliştirici Araçları penceresi.

Ş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, koyu tema renk şemasında birkaç küçük değişiklikle birlikte kullanıma sunulmuştur. Örneğin, kesme noktası simgeleri ve mevcut yürütme satırı artık yeşil renktedir.

Yeni kesme noktası simgesinin ve mevcut yürütme satırı 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 panelinde artık sertifika şeffaflığı bilgileri raporlanmaktadır.

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

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

Performans panelinde Site İzolasyon

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 son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

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.