Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Kayce Basques

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

Tüm ağ üstbilgilerinde arama
Stiller bölmesinde CSS değişken değeri önizlemeleri
Getirme olarak kopyala
Yeni denetimler, masaüstü yapılandırma seçenekleri ve izleme izleri
Sonsuz döngüleri durdurma
Performans sekmelerinde Kullanıcı Zamanlaması
JavaScript sanal makine örnekleri, Bellek panelinde açıkça 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

Not: chrome://version adresinden hangi Chrome sürümünü kullandığınızı kontrol edin. Daha eski bir sürümü çalıştırıyorsanız bu özellikler mevcut olmayacaktır. Daha yeni bir sürümü çalıştırıyorsanız bu özellikler değişmiş olabilir. Chrome, yaklaşık 6 haftada bir yeni bir ana sürüme otomatik olarak güncellenir.

Tüm ağ başlıklarında ve yanıtlarda arama yapın

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ında ve gövdelerinde arama yapar.

Yeni Network Search bölmesinde "cache-control" metni aranıyor.

Şekil 1. Yeni Network Search bölmesinde 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 tıklayın. Sağladığınız kalıpla eşleşen sonuçları göstermek için Normal İfade Kullan simgesini tıklayın. Normal ifadenizi eğik çizgiyle sarmalamanız gerekmez.

Ağ Arama bölmesindeki bir normal ifade sorgusu.

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

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

Genel Arama bölmesinin kullanıcı arayüzü, artık yeni Ağ Arama bölmesinin kullanıcı arayüzüyle eşleşir. Ayrıca taranabilirliğe yardımcı olmak için sonuçları da güzel bir şekilde yazdırıyor.

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

3. Şekil. Soldaki eski kullanıcı arayüzü, sağdaki yeni kullanıcı arayüzü

Command+Option+F (Mac) veya Control+Üst Karakter+F (Windows, Linux, ChromeOS) tuşlarına basarak Genel Arama'yı açın. Bu ekranı Komut Menüsü'nden de açabilirsiniz.

Stiller bölmesinde CSS değişkeni 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österiyor.

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

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

Getirme olarak kopyala

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

Bir istek için fetch() eşdeğer kodunu kopyalama.

5. Şekil. Bir istek için fetch() eşdeğer kodunu 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 şunlar dahil 2 yeni denetim bulunur:

Önemli istekleri önceden yükleyin. Önceden yükleme istekleri, Kritik Oluşturma Yolunuz için önemli olan kaynakları mümkün olan en kısa sürede indirmesi için tarayıcıya ipuçları vererek sayfa yükleme süresini hızlandırabilir.
Web yazı tipleri yüklenirken görünmez metin kullanmaktan kaçının. Web yazı tipleri yüklenirken bu metnin görünür olmasını sağlamak, sayfayı kullanıcılar için daha kullanışlı bir hale getirir.

Yeni yapılandırma seçenekleri

Artık Denetimler panelini aşağıdaki işlemleri yapmak için yapılandırabilirsiniz:

Masaüstü görüntü alanı ve kullanıcı aracısı ayarlarını korur. 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.
Denetimlerde LocalStorage ve IndexedDB gibi depolama alanlarını koruyun.

Yeni denetim yapılandırması seçenekleri.

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

İzleri görüntüle

Bir sayfayı denetledikten sonra, Performans panelinde denetlemenizin temel aldığı yükleme performansı verilerini görüntülemek için İzlemeyi Görüntüle'yi tıklayın.

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

Sonsuz döngüleri durdurma

Çok sayıda for döngüleri, do...while döngüleri veya yinelemeyle çalışıyorsanız sitenizi geliştirirken büyük olasılıkla 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:

Kaynaklar panelini açın.
Duraklat'ı tıklayın. Düğme, Komut Dosyası Yürütme İşlemini Devam Ettir olarak değişir.
Komut Dosyası Yürütmeyi Devam Ettir düğmesini basılı tutun ve ardından Geçerli JavaScript Çağrısını Durdur'u seçin.

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

Performans sekmelerinde Kullanıcı Zamanlaması

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

8. Şekil. Aşağıdan Yukarıya 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çildiğini gösterir.

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

Bellek panelinde JavaScript sanal makine örneklerini seçin

Bellek paneli, önceden 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 net bir şekilde listeliyor.

Anı panelinin öncesi ve sonrası 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ında gizlenmiştir. 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, ilgili sanal makine örneği nedeniyle ayrılan tüm işletim sistemi belleğini temsil eder. Sağdaki değere soldaki değer dahildir. Chrome'un Görev Yöneticisi'nde, soldaki 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 panelindeki Ağ sekmesinin adı Sayfa sekmesi olarak değiştirildi.

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 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 geçerli yürütme renk şeması satırının ekran görüntüsü.

Şekil 11. Yeni kesme noktası simgesinin ve geçerli yürütme satırı satırının ekran görüntüsü

Güvenlik panelinde sertifika şeffaflığı

Güvenlik paneli artık sertifika şeffaflığı bilgilerini bildirmektedir.

Sertifika şeffaflığı bilgilerini görebilirsiniz.

Şekil 12. Güvenlik panelindeki sertifika şeffaflığıyla ilgili bilgiler

Performans panelinde Site İzolasyonu

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

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

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

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.