Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 72)

Kayce Basques

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

Visualisasikan metrik performa di panel Performa.
Tandai node teks di Hierarki DOM.
Salin jalur JS ke node DOM dari Hierarki DOM.
Update panel Audit, termasuk audit baru yang mendeteksi library JS dan kata kunci baru untuk mengakses panel Audit dari Menu Command.

Versi video catatan rilis ini

Memvisualisasikan metrik performa

Setelah merekam pemuatan halaman, sekarang DevTools menandai metrik performa seperti DOMContentLoaded dan First Artiful Paint di bagian Waktu.

Gambar Pertama yang Bermakna di bagian Waktu

Gambar 1. Gambar Pertama yang Bermakna di bagian Waktu

Menandai node teks

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

Menyoroti node teks

Gambar 2. Menyoroti 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 biasa adalah membuka panel Elemen, 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 shadow tree.

Untuk mendapatkan referensi ke node DOM dengan cepat, klik kanan node DOM, lalu pilih Copy > Copy JS path. DevTools akan menyalin ekspresi document.querySelector() yang mengarah ke node ke papan klip. Seperti disebutkan di atas, ini sangat berguna 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 yang ada di bawah ke papan klip:

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

Pembaruan panel audit

Panel Audits sekarang menjalankan Lighthouse 3.2. Versi 3.2 menyertakan audit baru yang disebut Library JavaScript yang terdeteksi. Audit ini mencantumkan apa saja yang terdeteksi oleh library JS Lighthouse di halaman. Anda dapat menemukan audit ini dalam laporan Anda 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 Command dengan mengetik Lighthouse atau PWA.

Mengetik 'mercusuar' di Menu Perintah

Gambar 5. Mengetik lighthouse ke 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, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

Kirim saran atau masukan kepada kami melalui crbug.com.
Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.