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

Kayce Basques
Kayce Basques
X GitHub

Chrome 62'de DevTools'a eklenecek yeni özellikler ve değişiklikler:

Konsolda üst düzey await operatörleri

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

Konsolda üst düzey await operatörlerini kullanma

Şekil 1. Konsol'da ü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 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ünüm alanınızın bir bölümünün ekran görüntüsünü almak için:

  1. Öğeyi inceleme moduna girmek için İncele'yi İnceleme tıklayın veya Command+Shift+C (Mac) ya da Control+Shift+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ünüm penceresi bölümü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.

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

Şekil 2. Görüntü alanının bir bölümü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 başlığın 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çeneğini belirleyin. 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 vurgulama

Bir öğeyi etkileyen CSS Izgarası'nı görüntülemek için Nesneler panelinin DOM Ağacı'nda bir öğenin üzerine gelin. Izgara öğelerinin her birinin etrafında 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 ızgarasını vurgulama

Şekil 5. CSS ızgarasını vurgulama

CSS Grid'in temellerini 2 dakikadan kısa bir sürede öğrenmek için aşağıdaki videoyu izleyin.

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

Belirtilen oluşturucuyla oluşturulan nesneler dizisini döndürmek için Console'dan queryObjects(Constructor) işlevini ç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 oluşturulan tüm nesneleri döndürür.

queryObjects() kapsamı, Konsol'da şu anda seçili olan yürütme bağlamıdır. Bkz. Yürütme bağlamını seçme.

Yeni Console filtreleri

Konsol artık negatif ve URL filtrelerini destekliyor.

Negatif filtreler

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

Filtrelenecek 3 ileti örneği

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

DevTools, <text> bulunursa mesajı filtreler:

  • İleti metninde.
  • İletinin kaynağı olan dosya 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östermek için Filtrele kutusuna url:<text> yazın.

Filtre, yaklaşık eşleşme kullanıyor. URL'nin herhangi bir yerinde <text> görünüyorsa DevTools bu mesajı gösterir.

URL filtreleme örneği

Şekil 7 Yalnızca URL'si hymn içeren komut dosyalarından gelen mesajları görüntülemek için URL filtrelemeyi kullanma. Fareyle komut dosyasının 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 bir 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ı

Tablonun altında, söz konusu kaynağın önizlemesini görmek için Önbellek Depolama tablosunda bir satırı tıklayın.

Önbelleğe alınmış bir kaynağı önizleme

Şekil 9. Önbelleğe alınmış bir kaynağı önizleme

Daha hızlı yanıt veren önbellek hata ayıklama

Chrome 61 ve önceki sürümlerde, Cache API ile oluşturulan önbelleklerde hata ayıklama işlemi 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üncelleniyor. Örnek için aşağıdaki videoyu izleyin.

Kendiniz denemek için Cache Storage Demo'ya (Önbellek Depolama Demosu) göz atın.

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şaretleniyor

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

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

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

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.