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ı ve Komut Menüsünden Denetimler paneline erişerek.

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

Performans metriklerini görselleştirin

Geliştirici Araçları, sayfa yükleme kaydettikten sonra artık DOMContentLoaded ve Zamanlamalar bölümünde First Meaningful Paint.

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

Metin düğümlerini vurgula

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

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

JS yolunu kopyala

Bir düğümün tıklanmasını (Puppeteer’ın page.click() işlevini kullanmayı düşünebilirsiniz) ve bu DOM düğümüne hızlıca bir referans almak isterseniz. İlgili içeriği oluşturmak için kullanılan Genel iş akışı, Öğeler paneline gitmek, DOM Ağacı'nda düğümü sağ tıklamak, Kopyala > Seçiciyi kopyalayın, ardından ilgili CSS seçiciyi document.querySelector() öğesine iletin. Ancak düğüm bir Gölge DOM'deyse bu yaklaşım çalışmaz, çünkü seçici karar vermektir.

Bir DOM düğümüne hızlıca referans almak için DOM düğümünü sağ tıklayın ve Kopyala'yı seçin > JS'yi kopyala yolunu izleyin. Geliştirici Araçları, panonuzadocument.querySelector() düğüm. 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.

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, yeni bir denetim içerir. Algılanan JavaScript kitaplıkları. Bu denetim, Lighthouse'un hangi JS kitaplıklarında algıladığını listeler yapalım. Bu denetimi raporunuzun En İyi Uygulamalar bölümünde bulabilirsiniz > Başarılı denetimler.

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

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

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ı sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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