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

Kayce Basques

Chrome 62'de DevTools'a eklenen yeni özellikler ve yapılan değişiklikler:

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

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

Konsolda üst düzey bekleme operatörlerini kullanma

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

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

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

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

Görüntüleme alanınızın bir kısmının ekran görüntüsünü almak için:

  1. Öğeyi İncele moduna girmek için İncele'yi İnceleme tıklayın veya Command+Üst Karakter+C (Mac) ya da Ctrl+Üst Karakter+C (Windows, Linux) tuşlarına basın.
  2. Command (Mac) veya Control (Windows, Linux) tuşunu basılı tutun ve ekran görüntüsünü almak istediğiniz görüntü alanının bölümünü seçin.
  3. Farenizi bırakın. DevTools, 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

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

    Düğüm örneği

    Şekil 3. Bu örnekte amaç, Tools metnini içeren mavi üstbilginin ekran görüntüsünü almaktır. Bu düğümün, Nesneler panelinin DOM Ağacı'nda zaten seçili olduğunu unutmayın.

  2. Komut menüsünü açın.

  3. node yazmaya başlayın ve Capture node screenshot'ü seçin. Geliştirici Araçları, seçili düğümün ekran görüntüsünü indirir.

    "Düğüm ekran görüntüsü al" komutunun sonucu

    Şekil 4. Capture node screenshot komutunun sonucu

CSS Grid'de vurgulama

Bir öğeyi etkileyen CSS Grid'i görüntülemek için Nesneler panelinin DOM Ağacı'nda bir öğenin üzerine gelin. Tablo öğelerinin her birinin çevresinde kesikli bir kenarlık görünür. Bu yalnızca seçili öğeye veya seçili öğenin üst öğesine display:grid uygulandığında çalışır.

CSS ızgaralarını vurgulama

Şekil 5. CSS ızgaralarını vurgulama

CSS Grid'in temellerini 2 dakikadan kısa sürede öğrenmek için aşağıdaki videoya göz atın.

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

Belirtilen kurucu işleviyle oluşturulan bir nesne dizisi döndürmek için Konsol'dan queryObjects(Constructor) işlevini çağırın. Örneğin:

  • queryObjects(Promise). Tüm Promise'ları 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 oluşturulan tüm nesneleri döndürür.

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

Yeni Console filtreleri

Konsol artık negatif ve URL filtrelerini destekliyor.

Negatif filtreler

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

Filtrelenen 3 mesaj örneği

Şekil 6. İlk ifade, one, two, three ve four değerlerini Console'a kaydeder. -two, Filtre kutusuna girildiği için two gizlidir

DevTools, <text> bulunduğunda bir mesajı filtreler:

  • Mesaj metninde.
  • Mesajın alındığı dosya adında.
  • Yığın izleme metninde.

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

URL filtreleri

Yalnızca URL'sinde <text> bulunan bir komut dosyasından gelen mesajları göstermek için Filtrele kutusuna url:<text> yazın.

Filtre, bulanık eşleştirme kullanır. <text>, URL'nin herhangi bir yerinde görünürse DevTools bu mesajı gösterir.

URL filtreleme örneği

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

Ağ panelinde HAR içe aktarma işlemleri

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

HAR dosyasını içe aktarma

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

Uygulama panelinde önizlenebilir önbellek kaynakları

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

Önbellek kaynağını önizleme

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

Daha duyarlı önbelleğe yönelik hata ayıklama

Chrome 61 ve önceki sürümlerde, Cache API ile oluşturulan önbelleklerde hata ayıklama işlemi biraz 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 sekmesi artık bir önbellek veya kaynak oluşturduğunuzda, güncellediğinizde ya da sildiğinizde gerçek zamanlı olarak güncellenir. Örnek için aşağıdaki videoyu izleyin.

Kendinizi denemek için Önbellek Depolama Alanı Demo'sunu inceleyin.

Blok düzeyinde kod kapsamı

Chrome 61 ve önceki sürümlerde Kapsam sekmesi, işlev çağrıldığı sürece işlevdeki tüm kodu kullanılmış olarak işaretler.

Chrome 61&#39;deki Kapsam sekmesi örneği

Şekil 10. Chrome 61'deki Kapsam sekmesi örneği. 4. satır hiçbir zaman yürütülmemesine rağmen kullanılmış olarak işaretlenmiştir.

Chrome 62'den itibaren Kapsam sekmesi, bir işlevdeki hangi kodun çağrıldığını gösterir.

Chrome 62&#39;deki Kapsam sekmesi örneği

Ş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, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.