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

Kayce Basques

Chrome 72'de Chrome Geliştirici Araçları'na eklenen yeni özellikler ve yapılan önemli değişiklikler şunlardır:

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

Performans metriklerini görselleştirme

Sayfa yüklemesini kaydettikten sonra DevTools artık DOMContentLoaded ve İlk Anlamlı Boyama gibi performans metriklerini Zamanlamalar bölümünde işaretliyor.

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

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

Metin düğümlerini vurgulama

DOM ağacında bir metin düğümünün üzerine geldiğinizde DevTools artık bu metin düğümünü görüntü alanında vurgular.

Metin düğümünü vurgulama

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

JS yolunu kopyala

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

Bir DOM düğümüne hızlıca referans almak için DOM düğümünü sağ tıklayın ve Kopyala > JS yolunu kopyala'yı seçin. DevTools, düğümü işaret eden bir document.querySelector() ifadesini panonuza kopyalar. Yukarıda belirtildiği gibi bu yöntem özellikle Shadow DOM ile çalışırken faydalıdır ancak herhangi bir DOM düğümü için de kullanılabilir.

JS yolunu kopyala

Şekil 3. JS yolunu kopyala

Geliştirici Araçları, aşağıdakine benzer bir ifadeyi panonuza kopyalar:

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

Denetimler paneli güncellemeleri

Denetim panelinde artık Lighthouse 3.2 kullanılıyor. 3.2 sürümü, JavaScript kitaplıkları algılandı adlı yeni bir denetleme içerir. Bu denetimde, Lighthouse'ın sayfada algıladığı JS kitaplıkları listelenir. Bu denetimi, raporunuzda En İyi Uygulamalar > Geçen denetimler bölümünde bulabilirsiniz.

JavaScript kitaplıkları algılandı

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

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

Komut menüsüne "lighthouse" yazarak

Şekil 5. 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 sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.