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

Kayce Basques
Kayce Basques
X GitHub

Chrome 67'de Geliştirici Araçları'na eklenen yeni özellikler ve önemli değişiklikler şunlardır:

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

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 başlıklarını ve gövdelerini arar.

Yeni Ağ Arama paneliyle "cache-control" metni aranıyor.

Şekil 1. Yeni Ağ Arama paneliyle cache-control metni aranıyor

Sorgunuzu büyük/küçük harfe duyarlı hale getirmek için Büyük/Küçük Harf Eşleştir'i Büyük/Küçük Harf Eşleştir tıklayın. Sağladığınız kalıpla eşleşen sonuçları göstermek için Normal İfade Kullan'ı Normal İfade kullan tıklayın. Normal ifadenizi eğik çizgi içine almanıza gerek yoktur.

Ağ Arama bölmesinde bir normal ifade sorgusu.

Şekil 2. Ağ Arama panelinde bir normal ifade sorgusu.

Global Search (Genel Arama) panelinin kullanıcı arayüzü artık yeni Network Search (Ağ Araması) panelinin kullanıcı arayüzüyle eşleşiyor. Ayrıca, sonuçları daha kolay taranabilir hale getirmek için güzel bir şekilde yazdırır.

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

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

Global Arama'yı açmak için Command+Option+F (Mac) veya Control+Üst Karakter+F (Windows, Linux, ChromeOS) tuşlarına basın. Komut Menüsü'nden de açabilirsiniz.

Stiller panelinde 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 Geliştirici Araçları artık bu rengin önizlemesini gösterir.

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

4. şekil. Soldaki eski kullanıcı arayüzünde color: var(--main-color) yanında renk önizlemesi yokken sağdaki yeni kullanıcı arayüzünde var.

Getirme olarak kopyala

Bir ağ isteğini sağ tıklayıp Kopyala > Getirme Olarak Kopyala'yı seçerek bu isteğin fetch() eşdeğeri kodunu panonuza kopyalayın.

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

Şekil 5. İstek için fetch() eşdeğeri kodu kopyalama

Geliştirici Araçları aşağıdaki gibi bir kod ü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 olmak üzere 2 yeni denetim vardır:

Yeni yapılandırma seçenekleri

Artık Denetimler panelini şu amaçlarla yapılandırabilirsiniz:

  • Masaüstü görüntü alanı ve kullanıcı aracısı ayarlarını koruyun. Başka bir deyişle, Denetimler panelinin bir mobil cihazı simüle etmesini 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ırması seçenekleri

İzleri görüntüle

Bir sayfayı denetledikten sonra, denetiminizin temel aldığı yükleme performansı verilerini Performans panelinde görüntülemek için İzlemeyi 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 özyineleme ile çok çalışıyorsanız sitenizi geliştirirken yanlışlıkla sonsuz döngü yürütmüş 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ını Yürütmeye Devam Et Devam ettir olarak değişir.
  3. Komut Dosyası Yürütmeye Devam Et'i Devam ettir basılı tutun ve Mevcut JavaScript Çağrısını Durdur'u Durdur seçin.

Yukarıdaki videoda saat, 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 sekmelerinde Kullanıcı Zamanlaması

Bir performans kaydını görüntülerken Özet, Aşağıdan Yukarı, Çağrı Ağacı ve Olay 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ı 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ı Zamanlamaları 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 İş Parçacığı, Kullanıcı Zamanlaması, GPU, ScriptStreamer vb.) seçebilir ve sekmelerde bu bölümün etkinliğini görüntüleyebilirsiniz.

Bellek panelinde JavaScript sanal makine örneklerini seçme

Bellek paneli artık bir sayfayla ilişkili tüm JavaScript sanal makine örneklerini, daha önce olduğu gibi Hedef açılır menüsünün arkasına gizlemek yerine net bir şekilde listeler.

Bellek panelinin öncesi ve sonrası ekran görüntüleri.

9. Şekil. Soldaki eski kullanıcı arayüzünde JavaScript sanal makine örnekleri, Target (Hedef) açılır menüsünün altında gizlenirken sağdaki yeni kullanıcı arayüzünde Select JavaScript VM Instance (JavaScript Sanal Makine Örneği Seçin) tablosunda gösterilir.

developers.google.com örneğinin yanında iki değer var: 8.7 MB ve 13.3 MB. Soldaki değer, JavaScript nedeniyle ayrılan belleği temsil eder. Sağdaki değer, bu sanal makine örneği nedeniyle ayrılan tüm işletim sistemi belleğini temsil eder. Sağdaki değer, soldaki değeri kapsar. 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 panelindeki Ağ sekmesi artık Sayfa sekmesi olarak adlandırılıyor.

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

Ş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 bu sekmenin adı Sayfa'dır.

Koyu tema güncellemeleri

Chrome 67, koyu tema renk şemasında yapılan birkaç küçük değişiklikle birlikte sunulur. Örneğin, kesme noktası simgeleri ve geçerli yürütme satırı artık yeşil renktedir.

Yeni kesme noktası simgesinin ve geçerli 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 raporlanıyor.

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

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

Performans panelinde site izolasyonu

Site İzolasyonu'nu etkinleştirdiyseniz Performans panelinde artık her işlem için bir flame grafiği gösterilir. Böylece her işlemin neden olduğu toplam işi görebilirsiniz.

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

Şekil 13. Performans kaydında 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 sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.