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:

• Performans panelinde performans metriklerini görselleştirin.
• DOM ağacında metin düğümlerini vurgulayın.
• JS yolunu kopyalayın ve DOM ağacındaki bir DOM düğümüne yapıştırın.
• JS kitaplıklarını algılayan yeni bir denetim ve Komut Menüsü'nden Denetimler paneline erişmek için yeni anahtar kelimeler dahil olmak üzere Denetimler 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.

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

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

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

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

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

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

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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