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

Kayce Basques

Chrome 71'de Chrome Geliştirici Araçları'na eklenen yeni özellikler ve yapılan önemli değişiklikler şunlardır:

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

DOM düğümünü vurgulamak için fareyle bir canlı ifadenin üzerine gelin

Bir canlı ifade DOM düğümü olarak değerlendirildiğinde, fareyle canlı ifade sonucunun üzerine gelerek bu düğümü görüntü alanında vurgulayabilirsiniz.

Görüntüleme alanındaki düğümü vurgulamak için fareyle bir canlı ifade sonucunun üzerine gelme.

Şekil 1. Görüntüleme alanındaki düğümü vurgulamak için fareyle bir canlı ifade sonucunun üzerine gelme

DOM düğümlerini genel değişken olarak saklama

Bir DOM düğümünü genel değişken olarak depolamak için Console'da bir düğüm olarak değerlendirilen bir ifade çalıştırın, sonucu sağ tıklayın ve Genel değişken olarak depola'yı seçin.

Konsolda genel değişken olarak saklayın.

Şekil 2. Konsolda genel değişken olarak saklama

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

DOM ağacında genel değişken olarak saklayın.

Şekil 3. 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ına aktarabilirsiniz.

Ağ isteklerini HAR dosyasına aktarma.

Şekil 8. 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 başlatıcı ve öncelik bilgilerini HAR dosyasına ekler. HAR dosyalarını DevTools'a geri aktardığınızda Başlatıcı ve Öncelik sütunları doldurulur.

_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 kullanıcıyı ve bağımlılıkları görüntüleyebilirsiniz.

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

Şekil 10. 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 tablosundaki varsayılan olarak gizli olan Öncelik sütunuyla eşlenir.

Öncelik sütunu.

Şekil 11. Öncelik sütunu

Öncelik sütununu göstermek için İstekler tablosunun başlığını sağ tıklayın ve Öncelik'i seçin.

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

Şekil 12. Öncelik sütununu gösterme

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

Şekil 13. Komut Menüsü

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

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

Şekil 14. Ana menüden Komut menüsünü açma

Pencere içinde pencere kesme noktaları

Resim İçinde Resim, bir sayfanın masaüstünde yüzen bir video penceresi oluşturmasına olanak tanıyan yeni ve deneysel bir API'dir.

Bu pencere içinde pencere etkinliklerinden biri etkinleştiğinde duraklatmak için Etkinlik İşleyici Ayrılma Noktaları bölmesinde enterpictureinpicture, leavepictureinpicture ve resize onay kutularını etkinleştirin. Geliştirici Araçları, işleyicinin ilk satırında duraklar.

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

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

(Bonus İpucu) Bir öğenin etkinliklerinin tetiklenmesini izlemek için Console'da monitorEvents() işlevini çalıştırın.

Bir düğmeye odaklanıp R, E, D tuşlarına bastıktan sonra düğmenin etrafına kırmızı bir kenar çizgisi eklemek istediğinizi ancak dinleyicileri hangi etkinliklere ekleyeceğinizi bilmediğinizi varsayalım. Nesnenin tüm etkinliklerini Console'a kaydetmek için monitorEvents() değerini kullanın.

  1. Düğümün referansını alın.

    Düğümün referansını almak için "Genel değişken olarak sakla"yı kullanma.

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

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

    Düğümü monitorEvents() işlevine iletmek.

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

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

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

    Şekil 19. Konsolda düğümün etkinlikleri

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

unmonitorEvents(temp1);

Yalnızca belirli etkinlikleri veya etkinlik türlerini izlemek istiyorsanız monitorEvents() işlevine ikinci bağımsız değişken olarak bir dizi gönderin:

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 key, touch ve control'dir.

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, Yeni geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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

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