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:

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

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

Canlı İfade bir DOM düğümü olarak değerlendirildiğinde, görüntü alanında ilgili düğümü vurgulamak için fareyle Canlı İfade sonucunun üzerine gelin.

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 bir düğüme dönüşen 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ıp Genel değişken olarak sakla'yı da seçebilirsiniz.

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

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 Dev Tools artık HAR dosyasında başlatıcı ve öncelik bilgilerini içerir. HAR dosyalarını Geliştirici Araçları'na geri aktardığınızda artık Başlatan 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

Bir isteğin başlatıcısını ve bağımlılıklarını görüntülemek için Üst Karakter tuşunu basılı tutarken fareyle isteğin üzerine gelebilirsiniz.

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 tablosundaki varsayılan olarak gizli olan Öncelik sütunuyla 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ü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ü main 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 masaüstü üzerinde kayan video penceresi oluşturmasına olanak tanıyan yeni, 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 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 ancak hangi etkinliklere işleyici ekleyeceğinizi bilmediğinizi varsayalım. Öğenin tüm etkinliklerini Console'a kaydetmek için monitorEvents() işlevini kullanın.

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

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

    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

Etkinliklerin Console'a günlük kaydını durdurmak için unmonitorEvents() numaralı telefonu çağırın.

unmonitorEvents(temp1);

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

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ı'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını 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.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü