Yang Baru di DevTools (Chrome 72)

Kayce Basques
Kayce Basques
X GitHub

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

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.

First Meaningful Paint di bagian Timing

Gambar 1. First Meaningful Paint di bagian Timing

Menyoroti node teks

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

Menandai node teks

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

Salin jalur JS

Gambar 3. Salin jalur JS

DevTools menyalin ekspresi seperti di bawah ini ke papan klip Anda:

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

Pembaruan panel audit

Panel Audits kini menjalankan Lighthouse 3.2. Versi 3.2 menyertakan audit baru yang disebut Library JavaScript yang terdeteksi. Audit ini mencantumkan library JS 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, Anda kini dapat mengakses panel Audit dari Menu Perintah dengan mengetik Lighthouse atau PWA.

Mengetik 'lighthouse' di Menu Perintah

Gambar 5. Mengetik lighthouse ke dalam Menu Perintah

Mendownload saluran pratinjau

Pertimbangkan untuk menggunakan 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 Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

Yang baru di DevTools

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