Yang Baru di DevTools (Chrome 72)

Kayce Basques

Fitur baru dan perubahan besar yang akan hadir di Chrome DevTools di Chrome 72 mencakup:

Versi video catatan rilis ini

Memvisualisasikan metrik performa

Setelah merekam pemuatan halaman, DevTools kini menandai metrik performa seperti DOMContentLoaded dan First Meaningful Paint di bagian Timings.

First Meaningful Paint di bagian Timing

Gambar 1. First Meaningful Paint di bagian Timing

Menandai node teks

Saat Anda mengarahkan kursor ke node teks di Hierarki DOM, DevTools kini akan menandai node teks tersebut di tampilan yang terlihat.

Menandai node teks

Gambar 2. Menandai node teks

Salin jalur JS

Misalnya, Anda menulis pengujian otomatisasi yang melibatkan mengklik node (mungkin menggunakan fungsi page.click() Puppeteer) dan Anda ingin mendapatkan referensi ke node DOM tersebut dengan cepat. Alur kerja biasanya adalah membuka panel Elements, mengklik kanan node di Hierarki DOM, memilih Copy > Copy selector, lalu meneruskan pemilih CSS tersebut ke document.querySelector(). Namun, jika node berada dalam Shadow DOM, pendekatan ini tidak akan berfungsi karena pemilih menghasilkan jalur dari dalam hierarki bayangan.

Untuk mendapatkan referensi ke node DOM dengan cepat, klik kanan node DOM, lalu pilih Salin > Salin jalur JS. DevTools menyalin ekspresi document.querySelector() yang mengarah ke node ke papan klip Anda. Seperti yang disebutkan di atas, hal ini sangat membantu saat menggunakan Shadow DOM, tetapi Anda dapat menggunakannya untuk node DOM apa pun.

Salin jalur JS

Gambar 3. Salin jalur JS

DevTools menyalin ekspresi seperti di bawah ke papan klip Anda:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

Pembaruan panel Audit

Panel Audit kini menjalankan Lighthouse 3.2. Versi 3.2 menyertakan audit baru yang disebut Library JavaScript yang terdeteksi. Audit ini mencantumkan library JS yang telah terdeteksi Lighthouse di halaman. Anda dapat menemukan audit ini dalam laporan di bagian Praktik Terbaik > Audit yang lulus.

Library JavaScript yang terdeteksi

Gambar 4. Library JavaScript yang terdeteksi

Selain itu, Anda kini dapat mengakses panel Audit dari Menu Perintah dengan mengetik Lighthouse atau PWA.

Mengetikkan 'lighthouse' ke dalam Menu Perintah

Gambar 5. Mengetik lighthouse ke dalam Menu Perintah

Mendownload saluran pratinjau

Sebaiknya gunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

Daftar semua yang telah dibahas dalam seri Yang baru di DevTools.