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

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

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 o düğümü de vurgulayabilirsiniz.

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

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

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

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

Alternatif olarak, DOM Ağacı'ndaki düğümü sağ tıklayın ve Genel değişken olarak depola'yı seçin.

DOM Ağacında genel değişken olarak depolayın.

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.

Ağ istekleri HAR dosyasına aktarılıyor.

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.

Başlatıcı sütunu.

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.

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

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.

Öncelik sütunu.

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

Öncelik sütunu nasıl gösterilir?

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

Komut Menüsü.

13. Şekil. Komut Menüsü

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

Ana Menüden Komut Menüsünü açma.

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.

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

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.

    "Genel değişken olarak sakla"yı kullanma kullanabilirsiniz.

    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.

    Düğümü MonitoringEvents() öğesine geçirin.

    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.

    Düğümün Console'daki etkinlikleri.

    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 fareyle 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 Daha fazla > 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.