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 panelinde performans metriklerini görselleştirin.
• DOM ağacındaki metin düğümlerini vurgular.
• DOM ağacından bir DOM düğümünün JS yolunu kopyalayın.
• Denetimler paneli güncellemeleri: JS kitaplıklarını algılayan yeni bir denetim ve Komut Menüsü'nden Denetimler paneline erişmek için yeni anahtar kelimeler eklendi.

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

Performans metriklerini görselleştirme

DevTools, sayfa yükleme işlemi kaydedildikten sonra DOMContentLoaded ve İlk Anlamlı Boyama gibi performans metriklerini Zamanlamalar bölümünde işaretliyor.

Ş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ünüm alanında vurguluyor.

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

JS yolunu kopyala

Bir düğmeyi tıklamayı içeren bir otomasyon testi yazdığınızı (belki Puppeteer'ın page.click() işlevini kullanarak) ve bu DOM düğmesine hızlıca bir referans almak istediğinizi varsayalım. Normal 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 Shadow DOM'daysa bu yaklaşım işe yaramaz. Çünkü seçici, gölge ağacının içinden bir yol oluşturur.

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, panonuza düğümü işaret eden bir document.querySelector() ifadesini kopyalar. Yukarıda belirtildiği gibi bu özellik, özellikle Shadow DOM ile çalışırken faydalıdır ancak herhangi bir DOM düğümü için de kullanılabilir.

Şekil 3. 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ırıyor. 3.2 sürümünde JavaScript kitaplıkları algılandı adlı yeni bir denetleme yer alıyor. Bu denetim, Lighthouse'un sayfada algıladığı JS kitaplıklarını listeler. Bu denetimi, raporunuzdaki En İyi Uygulamalar > Geçilen denetimler bölümünde bulabilirsiniz.

Şekil 4. Algılanan JavaScript kitaplıkları

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

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

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videoları veya Geliştirici Araçları İpuçları YouTube videoları'na yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

DevTools'taki Yenilikler serisinde ele alınan her şeyin listesi.