Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 72)

Kayce Basques

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

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

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.

Gambar Pertama yang Bermakna di bagian Waktu

Gambar 1. Gambar Pertama yang Bermakna di bagian Waktu

Tandai 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 biasanya adalah membuka panel Elemen, klik kanan node di Hierarki DOM, pilih Salin > Salin pemilih, lalu teruskan 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 tersebut, lalu pilih Copy > Copy JS path. DevTools menyalin ekspresi document.querySelector() ke papan klip yang mengarah ke node. Seperti yang disebutkan di atas, hal ini sangat membantu saat menangani Shadow DOM, tetapi Anda dapat menggunakannya untuk semua node DOM.

Salin jalur JS

Gambar 3. Salin jalur JS

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

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

Pembaruan panel audit

Panel Audit sekarang menjalankan Lighthouse 3.2. Versi 3.2 mencakup 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 Anda 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.

Mengetik 'mercusuar' ke dalam 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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait 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.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.