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

Kayce Basques

Chrome 71'de Chrome Geliştirici Araçları'nda sunulacak yeni özellikler ve önemli değişiklikler şunlardır:

• Bir DOM düğümünü vurgulamak için fareyle Canlı İfade'nin üzerine gelin
• DOM düğümlerini global değişken olarak depolama
• HAR içe aktarma ve dışa aktarma işlemlerinde başlatıcı ve öncelik bilgileri
• Ana Menüden Komut Menüsüne erişme
• Pencere içinde pencere ayrılma noktaları
• (Bonus İpucu) Bir öğenin etkinliklerinin tetiklenmesini izlemek için Console'da watchEvents() komutunu çalıştırın

Bu sayfanın video sürümünü izleyin veya izleyin:

Bir DOM düğümünü vurgulamak için Canlı İfadenin üzerine gelin

Bir Canlı İfade, bir DOM düğümü olarak değerlendirildiğinde, imleci Canlı İfade sonucunun üzerine getirerek görüntü alanında o düğümü vurgulayın.

Şekil 1. Görüntü alanındaki düğümü vurgulamak için Canlı İfade sonucunun üzerine gelin

DOM düğümlerini genel değişkenler olarak depolayın

Bir DOM düğümünü genel değişken olarak depolamak için Console'da düğüme dönüşen bir ifade çalıştırın. Sonucu sağ tıklayın ve ardından Genel değişken olarak depola'yı seçin.

2. Şekil. Console'da genel değişken olarak sakla

Alternatif olarak, DOM Ağacı'ndaki düğümü sağ tıklayıp Genel değişken olarak sakla'yı da seçebilirsiniz.

3. Şekil. DOM Ağacında genel değişken olarak sakla

Başlatıcı ve öncelik bilgileri artık HAR içe ve dışa aktarma işlemlerinde kullanılabilir

İş arkadaşlarınızla ağ günlüklerinde teşhis işlemi gerçekleştirmek isterseniz ağ isteklerini bir HAR dosyası ekleyin.

8. Şekil. Ağ isteklerini HAR dosyasına aktarma

Dosyayı tekrar Ağ paneline aktarmak için sürükleyip bırakmanız yeterlidir.

Bir HAR dosyasını dışa aktardığınızda DevTools artık HAR'ya başlatıcı ve öncelik bilgilerini de ekler dosyası olarak kaydedebilirsiniz. HAR dosyalarını Geliştirici Araçları'na geri aktardığınızda, Başlatan ve Öncelik sütunları şimdi dolduruldu.

_initiator alanı, kaynağın neden istendiği hakkında daha fazla bağlam sağlar. Bu İstekler tablosundaki Başlatan sütunuyla eşlenir.

9. Şekil. Başlatıcı sütunu

Ayrıca, Üst Karakter tuşunu basılı tutarken fareyle bir isteğin üzerine gelerek isteği başlatan veya ve bildirmeyi konuştuk.

10. Şekil. Başlatıcıları ve bağımlılıkları görüntüleme

_priority alanı, tarayıcının kaynağa atadığı öncelik düzeyini belirtir. Bu, İstekler tablosunda varsayılan olarak gizli olan Öncelik sütunu bulunur.

Şekil 11. Öncelik sütunu

İstekler tablosunun başlığını sağ tıklayın ve Öncelik değerini görmek için Öncelik'i seçin sütununa girin.

Şekil 12. Öncelik sütunu nasıl gösterilir?

Ana Menüden Komut Menüsüne erişin

Geliştirici Araçları panellerine, sekmelerine ve özelliklerine hızlı bir şekilde erişmek için Komut menüsünü kullanın.

13. Şekil. Komut Menüsü

Artık Komut Menüsünü ana menüden açabilirsiniz. Ana Menü'yü tıklayın düğmesini tıklayın ve Komutu çalıştır'ı seçin.

14. Şekil. Ana Menüden Komut Menüsünü Açma

Pencere İçinde Pencere ayrılma noktaları

Pencere İçinde Pencere, bir sayfanın kayan video oluşturmasını sağlayan yeni deneysel bir API'dir bir pencerenin üzerindedir.

Etkinlikteki enterpictureinpicture, leavepictureinpicture ve resize onay kutularını etkinleştirin Bu pencere içinde pencere etkinliklerinden biri tetiklendiğinde duraklatılan dinleyici Ayrılma noktaları bölmesi. Geliştirici Araçları, işleyicinin ilk satırında duraklıyor.

16. Şekil. Etkinlik İşleyici Ayrılma Noktaları bölmesindeki Pencere İçinde Pencere etkinlikleri

(Bonus İpucu) Bir öğenin etkinliklerinin etkinleşmesini izlemek için Konsol'da watchEvents() komutunu çalıştırın

Bir düğmeye odaklandıktan ve R, E, D tuşlarına bastıktan sonra etrafına kırmızı bir kenarlık eklemek istediğinizi varsayalım ancak hangi etkinliklere dinleyici ekleyeceğinizi bilmiyorsunuz. Aşağıdakileri içeren tüm etkinlikleri günlüğe kaydetmek için monitorEvents() öğesinin etkinliklerini Play Console'a ekleyebilirsiniz.

1. Düğüme bir referans alın.

   

   17. Şekil. Düğüme referans almak için Genel değişken olarak depola'yı kullanma

2. Düğümü, monitorEvents() öğesine ilk bağımsız değişken olarak iletin.

   

   18. Şekil. Düğüm monitorEvents() adlı kullanıcıya geçiriliyor

3. Düğümle etkileşimde bulunun. Geliştirici Araçları, düğümün tüm etkinliklerini Konsola kaydeder.

   

   19. Şekil. Düğümün Console'daki etkinlikleri

Etkinlikleri Play Console'a günlüğe kaydetmeyi durdurmak için unmonitorEvents() numaralı telefonu çağırın.

unmonitorEvents(temp1);

Yalnızca belirli etkinlikleri izlemek istiyorsanız monitorEvents() öğesine ikinci bağımsız değişken olarak bir dizi iletin ya da etkinlik türleri:

monitorEvents(temp1, ['mouse', 'focus']);

mouse türü, Geliştirici Araçları'na fare ile ilgili tüm etkinlikleri (ör. mousedown ve click) günlüğe kaydetmesini söyler. Desteklenen diğer türler şunlardır: key, touch ve control.

Konsoldan çağırabileceğiniz diğer kullanışlı işlevler için Komut Satırı Referansı'na göz atın.

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