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

Kayce Basques
Kayce Basques
X GitHub

Chrome 72'de Chrome Geliştirici Araçları'na eklenecek yeni özellikler ve önemli değişiklikler:

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.

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

Metin düğümünü vurgulama

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

JS yolunu kopyala

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

Algılanan JavaScript kitaplıkları

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

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

Komut menüsüne "lighthouse" yazma

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

Geliştirici Araçları'ndaki yenilikler

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