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

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

Kayce Basques

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

Performans panelindeki performans metriklerini görselleştirin.
DOM Ağacı'nda metin düğümlerini vurgulayın.
JS yolunu DOM Ağacı'ndan bir DOM düğümüne kopyalayın.
Denetimler paneli güncellemeleri. Bu güncellemeler arasında, JS kitaplıklarını algılayan yeni bir denetim ve Denetimler paneline Komut Menüsünden erişmek için yeni anahtar kelimeler bulunmaktadır.

Bu sürüm notlarının video sürümü

Performans metriklerini görselleştirme

Geliştirici Araçları artık bir sayfa yükleme işlemi kaydettikten sonra Zamanlamalar bölümünde DOMContentLoaded ve İlk Anlamlı Boyama gibi performans metriklerini işaretliyor.

Zamanlama bölümündeki İlk Anlamlı Boyama

Şekil 1. Zamanlama bölümündeki İlk Anlamlı Boyama

Metin düğümlerini vurgula

Fareyle DOM Ağacı'ndaki bir metin düğümünün üzerine geldiğinizde, Geliştirici Araçları artık bu metin düğümünü görüntü alanında vurgular.

Bir metin düğümünü vurgulama

2. Şekil. Bir metin düğümünü vurgulama

JS yolunu kopyala

Bir düğümü tıklama (Puppeteer'ın page.click() işlevini kullanarak) içeren bir otomasyon testi yazdığınızı ve bu DOM düğümüne hızlı bir şekilde referans almak istediğinizi varsayalım. Normal iş akışı, Öğeler paneline gitmek, DOM Ağacı'nda düğümü sağ tıklamak, Kopyala > Seçiciyi kopyala'yı seçmek ve bu CSS seçiciyi document.querySelector() öğesine iletmektir. Ancak düğüm bir Gölge DOM içindeyse seçici, gölge ağacından bir yol sağladığından bu yaklaşım işe yaramaz.

Bir DOM düğümüne hızlı bir şekilde referans almak için DOM düğümünü sağ tıklayın ve Kopyala > JS yolunu kopyala'yı seçin. DevTools panonuza, düğümü işaret eden bir document.querySelector() ifadesini kopyalar. Yukarıda belirtildiği gibi, bu işlev özellikle Gölge DOM ile çalışırken kullanışlıdır. Ancak bunu herhangi bir DOM düğümü için kullanabilirsiniz.

JS yolunu kopyala

3. Şekil. JS yolunu kopyala

Geliştirici Araçları, aşağıdaki gibi bir ifadeyi panonuza kopyalar:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

Denetimler paneli güncellemeleri

Denetimler paneli artık Lighthouse 3.2'yi çalıştırmaktadır. Sürüm 3.2'de, Algılanan JavaScript kitaplıkları adlı yeni bir denetim bulunmaktadır. Bu denetim, Lighthouse'un sayfada hangi JS kitaplıklarını algıladığını listeler. Bu denetimi raporunuzda En İyi Uygulamalar > Başarılı denetimler altında bulabilirsiniz.

JavaScript kitaplıkları algılandı

4. Şekil. JavaScript kitaplıkları algılandı

Denetimler paneline artık komut menüsünden Lighthouse veya PWA yazarak da erişebilirsiniz.

Komut Menüsüne "fener" yazmak

5. Şekil. Komut Menüsüne lighthouse yazma

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