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

Kayce Basques
Kayce Basques
X GitHub

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

Okumaya devam edin veya bu sayfanın video sürümünü izleyin:

DOM düğümünü vurgulamak için bir Canlı İfade'nin üzerine gelin.

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

Görünüm alanındaki düğümü vurgulamak için bir Live Expression sonucunun üzerine gelme.

Şekil 1. Görünüm alanındaki düğümü vurgulamak için bir Live Expression 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 Konsol'da bir düğüme 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 sakla

Alternatif olarak, DOM Ağacı'nda düğümü sağ tıklayıp Genel 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şlatan ve öncelik bilgileri artık HAR içe ve dışa aktarma işlemlerinde

Ağ günlüklerini iş arkadaşlarınızla birlikte teşhis etmek isterseniz ağ isteklerini 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, Geliştirici Araçları artık HAR dosyasına başlatıcı ve öncelik bilgilerini de ekliyor. HAR dosyalarını tekrar Geliştirici Araçları'na aktardığınızda Başlatan ve Öncelik sütunları artık doldurulur.

_initiator alanı, kaynağın istenmesine neyin neden olduğu hakkında daha fazla bağlam bilgisi sağlar. Bu, İstekler tablosundaki Başlatan sütununa eşlenir.

Başlatan sütunu.

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

Ayrıca, başlatanı ve bağımlılıklarını görüntülemek için Üst Karakter tuşunu basılı tutarak bir isteğin üzerine gelebilirsiniz.

Başlatanları ve bağımlıları görüntüleme

Şekil 10. Başlatanları ve bağımlıları 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ütununa eşlenir.

Öncelik sütunu.

Şekil 11. Öncelik sütunu

İstekler tablosunun başlığını sağ tıklayın ve Öncelik sütununu göstermek için Ö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ı bir şekilde erişmek için Komut Menüsü'nü kullanın.

Komut Menüsü

Şekil 13. Komut menüsü

Artık Komut Menüsü'nü Ana Menü'den 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 kayan bir video penceresi oluşturmasını sağlayan yeni bir deneysel 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 duraklatılır.

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

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

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

Odaklandıktan ve R, E, D tuşlarına basıldıktan sonra bir düğmenin etrafına kırmızı kenarlık eklemek istediğinizi ancak hangi etkinliklere dinleyici ekleyeceğinizi bilmediğinizi varsayalım. Tüm öğe etkinliklerini konsola kaydetmek için monitorEvents() değerini kullanın.

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

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

    Şekil 17. Düğümün referansını 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 iletme.

    Şekil 18. Düğümü monitorEvents() öğesine aktarma

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

    Konsoldaki düğüm etkinlikleri.

    Şekil 19. Konsoldaki düğüm 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 iletin:

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

mouse türü, Geliştirici Araçları'na 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, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartış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.