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ş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 vurgulama

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

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

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. DevTools, düğümü işaret eden bir document.querySelector() ifadesini panonuza 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

Ş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, artık Komut Menüsü'nden Lighthouse veya PWA yazarak Denetim paneline erişebilirsiniz.

Komut menüsüne "lighthouse" yazarak

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

Önizleme kanallarını indirme

Chrome Canary, Yeni geliştirilenler veya Beta'yı varsayılan geliştirme tarayıcınız olarak kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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 özellikleri, güncellemeleri veya Geliştirici Araçları ile ilgili diğer konuları görüşmek için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.