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:

• Tüm ağ üstbilgilerinde arama
• Stiller bölmesinde CSS değişken değeri önizlemeleri
• Fetch olarak kopyala
• Yeni denetimler, masaüstü yapılandırma seçenekleri ve izlemeleri görüntüleme
• Sonsuz döngüleri durdurma
• Performans sekmelerindeki kullanıcı zamanlaması
• JavaScript sanal makine örnekleri Bellek panelinde net bir şekilde listelenir.
• Kaynaklar panelindeki Ağ sekmesi Sayfa sekmesi olarak yeniden adlandırıldı
• 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ğ başlıklarında ve yanıtlarında arama yapma

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.

Ş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 tıklayın. Sağladığınız kalıpla eşleşen tüm sonuçları göstermek için Normal İfade Kullan 'ı tıklayın. Normal İfadenizi düz eğik çizgi içine almanız gerekmez.

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

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

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.

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

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

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

• Önemli istekleri önceden yükleyin. Önceden yükleme istekleri, tarayıcıya kritik oluşturma yolunuz için önemli olan kaynakları bir an önce indirmesi yönünde ipuçları vererek sayfa yükleme süresini kısaltabilir.
• Web yazı tipleri yüklenirken görünmez metin kullanmaktan kaçının. Web yazı tipleri yüklenirken metnin görünür olmasını sağlamak, sayfanın kullanıcılar için daha hızlı bir şekilde daha yararlı olmasını sağlar.

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.

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.

Ş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'ı tıklayın. Düğme Komut Dosyası Çalıştırmayı Devam ettir olarak değişir.
3. Komut Dosyası Yürütmeyi Devam ettir'i basılı tutarak Mevcut JavaScript Çağrısını Durdur'u 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 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.

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

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.

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

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

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

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

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'ndaki more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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