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ı'nda yapılacak yeni özellikler ve önemli değişiklikler şunlardır:

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

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

Performans metriklerini görselleştirin

Geliştirici Araçları, bir sayfa yüklemesini kaydettikten sonra artık Zamanlamalar bölümünde DOMContentLoaded ve First Meaningful Paint 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

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

Metin düğümünü vurgulama

2. Şekil. Metin düğümünü vurgulama

JS yolunu kopyala

Bir düğümü tıklamayı (ör. Puppeteer'ın page.click() işlevini kullanarak) içeren bir otomasyon testi yazdığınızı ve bu DOM düğümüne hızlıca referans almak istediğinizi varsayalım. Normal iş akışı Öğeler paneline gitmek, DOM Ağacı'ndaki düğümü sağ tıklayıp Kopyala > Seçiciyi kopyala'yı seçmek ve ardından bu CSS seçiciyi document.querySelector() uygulamasına aktarmaktır. Ancak düğüm bir Gölge DOM'deyse seçici gölge ağacının içinden bir yol oluşturduğu için bu yaklaşım işe yaramaz.

Hızlı bir şekilde bir DOM düğümüne referans almak için DOM düğümünü sağ tıklayın ve Kopyala > JS yolunu kopyala'yı seçin. Geliştirici Araçları, panonuza düğüme işaret eden bir document.querySelector() ifadesini kopyalar. Yukarıda belirtildiği gibi, bu özellikle Gölge DOM ile çalışırken faydalı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 şu anda Lighthouse 3.2'yi çalıştırıyor. 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 raporunuzun En İyi Uygulamalar > Başarılı denetimler bölümünde bulabilirsiniz.

JavaScript kitaplıkları algılandı

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

Ayrıca, artık Komut Menüsü'nden Lighthouse veya PWA yazarak Denetimler paneline erişebilirsiniz.

Komut menüsüne "fener" yazın

5. Şekil. Komut menüsüne lighthouse yazılıyor

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