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

Kayce Basques

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

Console'daki üst düzey operatörler

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

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

Ş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 İnceleme simgesini tıklayın veya Command+Üst Karakter+C (Mac) ya da Control+Üst Karakter+C (Windows, Linux) tuşlarına basarak Öğe Modunu İnceleyin.
  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. 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:

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

    Düğüm örneği

    3. Şekil. Bu örnekte hedef, 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

  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çilen düğümün ekran görüntüsünü indirir.

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

    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 panelindeki DOM Ağacı'ndaki bir öğenin üzerine gelin. Izgara öğelerinin her birinin etrafında kesik çizgili 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

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

Belirtilen oluşturucuyla oluşturulan bir nesne dizisini döndürmek için Konsol'dan queryObjects(Constructor) çağrısı yapın. Ö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. new foo() aracılığıyla örneklenen tüm nesneleri döndürür.

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

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.

Filtrelenecek 3 ileti örneği

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

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

Yalnızca URL'sinde <text> bulunan bir komut dosyasından gelen iletileri göstermek 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'si hymn öğesini içeren komut dosyalarından gelen mesajları görüntülemek için URL filtrelemeyi kullanma. 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.

HAR dosyasını içe aktarma

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.

Önbellek kaynağını önizleme

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, 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üncellenir. Ö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 çağrıldığı sürece işlev içindeki tüm kodları kullanıldığı gibi işaretler.

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

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

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

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, 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ı'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını 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.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü