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:

Devamını okuyun veya bu sayfanın video sürümünü izleyin:

Bir DOM düğümünü vurgulamak için fareyle 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ı İfade 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 saklama

HAR içe ve dışa aktarma işlemlerinde başlatıcı ve öncelik bilgileri artık mevcut

Ağ günlüklerini iş arkadaşlarınızla birlikte teşhis etmek istiyorsanız ağ isteklerini HAR dosyasına aktarabilirsiniz.

Ağ isteklerini HAR dosyasına aktarma.

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

Dosyayı Ağ paneline geri 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 istenmesine neyin neden olduğuyla ilgili daha fazla bağlam bilgisi sağlar. Bu, İstekler tablosundaki Başlatan sütunuyla eşlenir.

Başlatıcı sütunu.

Şekil 9. 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ütununu gösterme.

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

Ana menüden Komut Menüsüne erişme

Geliştirici Araçları panellerine, sekmelerine ve özelliklerine hızlıca 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 tetiklendiğ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. Nod'a referans almak için Genel değişken olarak sakla'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. Nodu monitorEvents()'e iletme

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

    Konsolda düğümün etkinlikleri.

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

Etkinliklerin Console'a kaydedilmesini durdurmak için unmonitorEvents() işlevini ç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ü, DevTools'a mousedown ve click gibi fareyle ilgili tüm etkinlikleri 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şmenize, en yeni web platformu API'lerini test etmenize 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

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.