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 Gambaran Pertama yang Berarti di bagian Waktu.

First Meaningful Paint di bagian Timing

Gambar 1. First Meaningful Paint di bagian Timing

Tandai node teks

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

Menyoroti node teks

Gambar 2. Menandai node teks

Salin jalur JS

Misalkan Anda menulis pengujian otomatisasi yang melibatkan klik 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 akan menghasilkan jalur dari dalam shadow tree.

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 menangani 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 apa yang telah dideteksi 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, sekarang Anda dapat mengakses panel Audit dari Menu Perintah dengan mengetik Lighthouse atau PWA.

Mengetikkan 'lighthouse' ke Menu Perintah

Gambar 5. Mengetik lighthouse ke 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.