Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Kayce Basques

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

DOM düğümünü vurgulamak için fareyle bir Canlı İfadenin üzerine gelin
DOM düğümlerini genel değişkenler olarak depolama
Başlatan ve öncelik bilgileri artık HAR içe ve dışa aktarımlarında
Ana Menüden Komut Menüsüne erişme
Pencere içinde pencere ayrılma noktaları
(Bonus İpucu) Bir öğenin nasıl etkinleştiğini izlemek için Console'da MonitoringEvents() komutunu çalıştırın

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

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

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

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

Şekil 1. Görüntü alanında 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, Konsol'da düğümü değerlendiren bir ifade çalıştırın, sonucu sağ tıklayın ve Genel değişken olarak depola'yı seçin.

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

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

Alternatif olarak, DOM Ağacı'nda 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 depola

Başlatıcı ve öncelik bilgileri artık HAR içe ve dışa aktarımlarında

İş arkadaşlarınızın ağ günlüklerine teşhis eklemek isterseniz ağ isteklerini bir HAR dosyasına aktarabilirsiniz.

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

8. Şekil. Ağ istekleri HAR dosyasına aktarılıyor

Dosyayı tekrar Ağ paneline aktarmak için sürükleyip bırakmanız yeterlidir.

Geliştirici Araçları artık bir HAR dosyasını dışa aktardığınızda HAR dosyasında başlatıcıyı ve öncelik bilgilerini içeriyor. 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ğuyla ilgili daha fazla bilgi 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ı tutup isteğin üzerine gelerek isteğin başlatıcısını ve bağımlılarını 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 gizlenen Ö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örmek için Öncelik'i seçin.

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

Şekil 12. Öncelik sütunu nasıl gösterilir?

Not: HAR spesifikasyonu, özel alanların alt çizgiyle başlaması gerektiğini belirttiğinden _initiator ve _priority alanları alt çizgiyle başlar.

Geliştirici Araçları panellerine, sekmelerine ve özelliklerine hızlı bir şekilde erişmek için Komut Menüsü'nü kullanın.

Şekil 13. Komut Menüsü

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

Şekil 14. Ana Menüden Komut Menüsünü Açma

Pencere içinde pencere ayrılma noktaları

Pencere İçinde Pencere, bir sayfanın masaüstü üzerinde kayan video penceresi oluşturmasını sağlayan yeni bir deneysel API'dir.

Bu pencere içinde pencere etkinliklerinden biri etkinleştiğinde duraklamak 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ölmesindeki Pencere İçinde Pencere etkinlikleri

(Ek İpucu) Bir öğenin etkinleşmesini izlemek için Console'da MonitoringEvents() komutunu çalıştırın

Bir düğmeye odaklandıktan ve R, E, D tuşlarına bastıktan sonra düğmenin 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 günlüğe kaydetmek için monitorEvents() aracını kullanın.

Düğüme bir referans alın.

Şekil 17. Düğüme bir referans almak için Genel değişken olarak depola'yı kullanma
Düğümü monitorEvents() öğesine ilk bağımsız değişken olarak iletin.

Şekil 18. Düğüm, monitorEvents() adlı iş ortağına iletiliyor
Düğümle etkileşimde bulunun. DevTools, düğümün tüm etkinliklerini Konsol'a kaydeder.

Şekil 19. Düğümün Console'daki etkinlikleri

Etkinlikleri konsola kaydetmeyi durdurmak için unmonitorEvents() numaralı telefonu arayı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) kaydetmesini bildirir. Desteklenen diğer türler şunlardır: key, touch ve control.

Console'dan ç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'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.