Fitur baru dan perubahan besar yang akan hadir di Chrome DevTools pada Chrome 72 meliputi:
- Visualisasikan metrik performa di panel Performa.
- Menandai node teks di Hierarki DOM.
- Salin jalur JS ke node DOM dari Hierarki DOM.
- Pembaruan panel Audit, termasuk audit baru yang mendeteksi pustaka JS dan kata kunci baru untuk mengakses panel Audit dari Menu Perintah.
Versi video dari catatan rilis ini
Memvisualisasikan metrik performa
Setelah merekam pemuatan halaman, DevTools kini menandai metrik performa seperti DOMContentLoaded dan
First Meaningful Paint di bagian Waktu.
Gambar 1. First Meaningful Paint di bagian Timing
Menandai node teks
Saat Anda mengarahkan kursor ke node teks di Hierarki DOM, DevTools kini menandai node teks tersebut di area tampilan.
Gambar 2. Menandai node teks
Salin jalur JS
Misalkan Anda sedang menulis tes otomatisasi yang melibatkan mengklik node (menggunakan fungsi
page.click() Puppeteer, mungkin) dan Anda ingin mendapatkan referensi ke node DOM tersebut dengan cepat. Alur kerja
biasanya adalah membuka panel Elements, mengklik kanan node di DOM Tree, memilih
Copy > Copy selector, lalu meneruskan pemilih CSS tersebut ke document.querySelector(). Namun, jika
node berada di Shadow DOM, pendekatan ini tidak 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 bekerja dengan Shadow DOM, tetapi Anda dapat menggunakannya untuk node DOM apa pun.
Gambar 3. Salin jalur JS
DevTools menyalin ekspresi seperti di bawah ini ke papan klip Anda:
document.querySelector(