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

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

• Konsolda üst düzey await operatörleri için destek.
• Görüntü alanının bir bölümünün ekran görüntüleri ve belirli HTML düğümlerinin ekran görüntüleri.
• CSS ızgarasını vurgulama.
• Nesneleri sorgulamak için kullanılan yeni bir Console API'si.
• Konsol'daki Negatif filtreler ve URL filtreleri.
• Ağ panelindeki HAR içe aktarma işlemleri.
• Önizlenebilir önbellek kaynakları.
• Daha öngörülebilir önbellek hata ayıklaması.
• Engelleme düzeyinde kod kapsamı.

Console'daki üst düzey operatörler

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

Şekil 1. Konsolda üst düzey await operatörlerini kullanma

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

Artık görüntü alanının bir kısmının veya belirli bir HTML düğümünün ekran görüntüsünü alabilirsiniz.

Görüntü alanının bir kısmı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:

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

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:

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

   

   3. Şekil. Bu örnekte hedef, alt yazı içeren mavi renkli başlığın Tools metni. Bu düğümün yapılandırmanın DOM Ağacında Öğeler paneli

2. Komut Menüsü'nü açın.

3. node yazmaya başlayın ve Capture node screenshot öğesini seçin. Geliştirici Araçları, seçili düğüm.

   

   4. Şekil. Capture node screenshot komutunun sonucu

CSS ızgarasını vurgulama

Bir öğeyi etkileyen CSS Izgarasını görüntülemek için fareyle Öğeler paneli. Izgara öğelerinin her birinin etrafında kesik çizgili bir kenarlık görünür. Bu yalnızca seçili öğe veya seçili öğenin üst öğesi, öğeye display:grid uyguladı.

5. Şekil. CSS Izgarasını Vurgulama

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

Yığın nesnelerini sorgulamaya yönelik yeni bir API

Bir dizi nesne döndürmek için Console'dan queryObjects(Constructor) komutunu çağırın belirtilen oluşturucuyla oluşturulur. Örneğin:

• queryObjects(Promise) Tüm Vaatleri döndürür.
• queryObjects(HTMLElement) Tüm HTML öğelerini döndürür.
• queryObjects(foo) burada foo bir işlev adıdır. Örneklenen tüm nesneleri döndürür new foo() üzerinden.

queryObjects() kapsamı, Konsolda seçili olan yürütme bağlamıdır. Görüntüleyin Yürütme bağlamını seçme.

Yeni Console filtreleri

Konsol artık negatif filtreleri ve URL filtrelerini desteklemektedir.

Negatif filtreler

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

6. Şekil. İlk ifade one, two, three ve four değerlerini Konsola kaydeder. two Filtre kutusuna -two girildiğinden gizlidir

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

• Mesaj metninde.
• İletinin kaynağı olan dosya adında.
• Yığın izleme metninde.

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

URL filtreleri

Filtre kutusuna url:<text> yazarak yalnızca URL şunu içeriyor: <text>.

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

7. Şekil. Yalnızca URL'si olan komut dosyalarından gelen iletileri görüntülemek için URL filtrelemeyi kullanmak hymn dahildir. Fareyle komut dosyası adının üzerine geldiğinizde, ana makine adının bu metni içerdiğini görürsünüz

Ağ panelinde HAR içe aktarmaları

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

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

Uygulama panelindeki önizlenebilir önbellek kaynakları

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

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

Daha duyarlı önbellek hata ayıklaması

Chrome 61 ve önceki sürümlerde Önbellek API'si ile oluşturulan önbelleklerde hata ayıklama işlemi kabaca bir işlemdir. Örneğin, Örneğin, bir sayfa yeni bir önbellek oluşturduğunda yeni önbelleği görebilirsiniz.

Chrome 62'de Önbellek Depolama Alanı sekmesi artık oluşturduğunuzda, oluşturduğunuzda veya önbelleği veya kaynağı silebilirsiniz. Örnek için aşağıdaki videoyu izleyin.

Kendiniz denemek için Önbellek Depolama Demosu'na bakın.

Blok düzeyinde kod kapsamı

Chrome 61 ve önceki sürümlerde Kapsam sekmesi, işlev içindeki tüm kodları kullanılmış olarak işaretler. devam eder.

10. Şekil. Chrome 61'deki Kapsam sekmesi örneği. Ancak 4. satır "kullanıldı" olarak işaretlenir hiçbir zaman yürütülmez

Chrome 62 sürümünden itibaren, Kapsam sekmesi artık bir işlev içindeki hangi kodun çağrıldığını bildirir.

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

Ö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ı sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları 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.