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

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

Kayce Basques

Chrome 62'de Geliştirici Araçları'na gelen yeni özellikler ve değişiklikler:

Console'da üst düzey await operatörleri için destek.
Görüntü alanının bir kısmının ekran görüntüleri ve belirli HTML düğümlerinin ekran görüntüleri.
CSS Izgarayı vurgulama.
Nesneleri sorgulamak için yeni bir Console API'si.
Konsoldaki negatif filtreler ve URL filtreleri.
Ağ panelinde HAR içe aktarma işlemleri
Önizlelebilir önbellek kaynakları.
Daha öngörülebilir önbellek hata ayıklaması.
Blok düzeyinde kod kapsamı.

Not: Kullandığınız Chrome sürümünü chrome://version adresinden kontrol edebilirsiniz. Chrome, yaklaşık 6 haftada bir yeni bir ana sürüme otomatik olarak güncellenir.

Console'da üst düzey bekleme operatörleri

Console artık üst düzey await operatörlerini desteklemektedir.

Console'da üst düzey bekleme operatörlerini kullanma

Şekil 1. Console'da üst düzey await operatörlerini kullanma

Yeni ekran görüntüsü iş akışları

Şimdi görüntü alanının bir bölümünün veya belirli bir HTML düğümünün ekran görüntüsünü alabilirsiniz.

Görüntü alanının bir bölümünün ekran görüntüleri

Görüntü alanınızın bir bölümünün ekran görüntüsünü almak için:

Öğe İnceleme Modu'na geçmek için İncele'yi tıklayın veya Command+Üst Karakter+C (Mac) ya da Control+Üst Karakter+C (Windows, Linux) tuşlarına basın.
Command (Mac) veya Control (Windows, Linux) tuşunu basılı tutarken görüntü alanının ekran görüntüsünü almak istediğiniz bölümünü seçin.
Farenizi bırakın. Geliştirici Araçları, seçtiğiniz bölümün ekran görüntüsünü indirir.

Görüntü alanının bir kısmının ekran görüntüsünü alma

2. Şekil. Görüntü alanının bir kısmının ekran görüntüsünü alma

Belirli HTML düğümlerinin ekran görüntüleri

Belirli bir HTML düğümünün ekran görüntüsünü almak için:

Öğeler panelinde bir öğe seçin.

3. Şekil. Bu örnekte amaç, Tools metnini içeren mavi başlığın ekran görüntüsünü almaktır. Bu düğümün Öğeler panelinin DOM Ağacı'nda zaten seçili olduğunu unutmayın.
Komut Menüsü'nü açın.
node yazmaya başlayın ve Capture node screenshot seçeneğini belirleyin. Geliştirici Araçları, seçilen düğümün ekran görüntüsünü indirir.

4. Şekil. Capture node screenshot komutunun sonucu

CSS ızgara vurgusu

Bir öğeyi etkileyen CSS Izgarasını görüntülemek için fareyle Öğeler panelinin DOM Ağacı'ndaki bir öğenin üzerine gelin. Izgara öğelerinin her birinin etrafında kesikli çizgi şeklinde bir kenarlık görünür. Bu işlem yalnızca, seçilen öğeye veya seçilen öğenin üst öğesine display:grid uygulandığında çalışır.

CSS Izgarasını Vurgulama

5. Şekil. CSS Izgarasını Vurgulama

CSS Grid ile ilgili temel bilgileri 2 dakikadan kısa bir sürede öğrenmek için aşağıdaki videoya göz atın.

Yığın nesnelerini sorgulamak için yeni bir API

Belirtilen oluşturucuyla oluşturulan bir nesne dizisini döndürmek için Konsol'dan queryObjects(Constructor) yöntemini çağırın. Örneğin:

queryObjects(Promise). Tüm Sözleri döndürür.
queryObjects(HTMLElement). Tüm HTML öğelerini döndürür.
queryObjects(foo) (burada foo bir işlev adıdır). new foo() aracılığıyla örneklenen tüm nesneleri döndürür.

queryObjects() kapsamı, Console'da seçili olan yürütme bağlamıdır. Yürütme bağlamı seçme bölümüne bakın.

Yeni Konsol filtreleri

Konsol artık negatif ve URL filtrelerini desteklemektedir.

Negatif filtreler

<text> içeren tüm Console iletilerini filtrelemek için Filtre kutusuna -<text> yazın.

Filtrelenecek 3 ileti örneği

6. Şekil. İlk ifade one, two, three ve four öğelerini Konsola kaydeder. Filtre kutusuna -two girildiğinden two gösterilmiyor

<text> bulunursa Geliştirici Araçları mesajı filtreler:

İleti metninde.
İletinin oluşturulduğu dosyanın adında.
Yığın izleme metninde.

Negatif filtre, -/[4-5]*ms/ gibi normal ifadelerle de çalışır.

URL filtreleri

Yalnızca URL'si <text> içeren bir komut dosyasından gelen mesajları görüntülemek için Filtre kutusuna url:<text> yazın.

Filtre, kısmi eşleme kullanır. URL'nin herhangi bir yerinde <text> görünüyorsa Geliştirici Araçları mesajı gösterir.

URL filtreleme örneği

7. Şekil. Yalnızca URL'sinde hymn bulunan komut dosyalarından gelen mesajları görüntülemek için URL filtrelemesini kullanma. Fareyle komut dosyası adının üzerine gelerek ana makine adının bu metni içerdiğini görebilirsiniz

Ağ panelindeki HAR içe aktarmaları

Bir HAR dosyasını içe aktarmak için Ağ paneline sürükleyip bırakın.

HAR dosyasını içe aktarma

8. Şekil. HAR dosyasını içe aktarma

Uygulama panelinde önizlenebilir önbellek kaynakları

Önbellek Depolama Alanı tablosunda bir satırı tıklayarak tablonun altında ilgili kaynağın önizlemesini görebilirsiniz.

Önbellek kaynağını önizleme

9. Şekil. Önbellek kaynağını önizleme

Daha hızlı önbellek hata ayıklaması

Chrome 61 ve önceki sürümlerde Önbellek API'si ile oluşturulan önbelleklerin hatalarını ayıklama süreci oldukça zordur. Örneğin, bir sayfa yeni bir önbellek oluşturduğunda, yeni önbelleği görmek için sayfayı veya Geliştirici Araçları'nı manuel olarak yenilemeniz gerekir.

Chrome 62'de Önbellek Depolama Alanı sekmesi artık bir önbellek veya kaynak oluşturduğunuzda, güncellediğinizde ya da sildiğinizde gerçek zamanlı olarak güncelleniyor. Örnek için aşağıdaki videoyu izleyin.

Kendiniz denemek için Önbellek Depolama Alanı Demosu'na göz atın.

Blok düzeyinde kod kapsamı

Chrome 61 ve önceki sürümlerde Kapsam sekmesi, işlevin çağrılması koşuluyla, bir işlevin içindeki tüm kodu kullanılmış olarak işaretler.

Chrome 61'deki Kapsam sekmesi örneği

Şekil 10. Chrome 61'deki Kapsam sekmesi örneği. Satır 4 hiçbir zaman yürütülmese de "kullanılmış" olarak işaretlenir

Chrome 62'den itibaren, Kapsam sekmesi artık bir işlev içindeki hangi kodun çağrıldığını size bildirmektedir.

Chrome 62'deki Kapsam sekmesi örneği

Şekil 11. Chrome 62'deki Kapsam sekmesi örneği. 4. satır kullanılmıyor olarak işaretlenmiş

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