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

Kayce Basques

Chrome 67 sürümünde Geliştirici Araçları'nda sunulacak yeni özellikler ve ö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 Ctrl+F (Windows, Linux, ChromeOS) tuşlarına basın. Geliştirici Araçları, sağladığınız sorgu için tüm ağ isteklerinin üst bilgi ve gövdelerinde arama yapar.

Yeni Ağ Arama bölmesinde "önbellek-kontrol" metni aranıyor.

Şekil 1. Yeni Ağ Arama bölmesiyle 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 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 bir normal ifade sorgusu.

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

Genel Arama bölmesinin kullanıcı arayüzü, artık yeni Ağ Arama bölmesinin kullanıcı arayüzüyle eşleşmektedir. Artık taranabilirliğe yardımcı olmak için sonuçları güzelce yazdırıyor.

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

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

Genel 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ü 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şkeni renk değerleri örneği.

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

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 getirme() eşdeğeri kodunu kopyalama.

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

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 panelinin bir mobil cihazı simüle etmesini engelleyebilirsiniz.
  • Ağ ve CPU kısıtlamayı devre dışı bırakın.
  • Denetimler sırasında LocalStorage ve IndexedDB gibi depolama alanlarını 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, Performans panelinde denetiminizin temel aldığı yük performansı verilerini görüntülemek için İzlemeyi Görüntüle'yi tıklayın.

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

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

Sonsuz döngüleri durdurma

for döngüleri, do...while döngüleri veya özyinelemeyle çok fazla çalışıyorsanız sitenizi geliştirirken muhtemelen yanlışlıkla sonsuz bir döngü çalıştırmışsınızdır. 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ı Yürütme'yi Devam Ettir Devam ettir olarak değişir.
  3. Komut Dosyası Yürütmeyi Devam Ettir'i Devam ettir basılı tutun ve ardından Mevcut JavaScript Çağrısını Durdur'u Durdur seçin.

Yukarıdaki videoda saat, setInterval() zamanlayıcı kullanılarak 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 aralık çalışmadığı için aralık devam ettirilir.

Performans sekmelerindeki Kullanıcı Zamanlaması

Bir Performans kaydını görüntülerken, Özet, Aşağıdan Yukarı, Arama 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.

Alttan Yukarı sekmesinde Kullanıcı Zamanlaması ölçümlerini görüntüleme.

8. Şekil. 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, seçilen zamanı belirtir.

Genel olarak, artık bölümlerden herhangi birini (Ana İleti Dizisi, 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çin

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

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.

10. Şekil. Soldaki eski kullanıcı arayüzünde sayfanın kaynaklarını gösteren sekme Ağ, sağdaki yeni kullanıcı arayüzünde ise 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ı artık yeşildir.

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

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

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

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

Performans panelinde Site İzolasyonu

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

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

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ı'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını 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.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü