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 yang mengakses panel Audit dari Menu {i>Command<i}.

Versi video catatan rilis ini

Memvisualisasikan metrik performa

Setelah merekam pemuatan halaman, DevTools kini menandai metrik performa seperti DOMContentLoaded dan Gambar Pertama yang Penuh Makna di bagian Waktu.

Gambar 1. Gambar Pertama yang Bermakna di bagian Waktu

Tandai node teks

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

Gambar 2. Menyoroti node teks

Salin jalur JS

Misalkan Anda menulis pengujian otomatisasi yang melibatkan klik node (menggunakan page.click(), mungkin) dan Anda ingin dengan cepat mendapatkan referensi ke node DOM tersebut. Tujuan biasanya adalah masuk ke panel Elements, klik kanan simpul di Pohon DOM, pilih Salinan > Salin pemilih, lalu teruskan pemilih CSS tersebut ke document.querySelector(). Namun jika node ada dalam Shadow DOM. Pendekatan ini tidak berfungsi karena pemilih menghasilkan jalur dari di dalam pohon bayangan.

Untuk mendapatkan referensi ke node DOM dengan cepat, klik kanan node DOM tersebut, lalu pilih Copy > Salin JS jalur. DevTools menyalin ekspresi document.querySelector() ke papan klip yang mengarah ke {i>node<i}. Seperti yang disebutkan di atas, ini sangat membantu ketika bekerja dengan Shadow DOM, tetapi Anda bisa menggunakan untuk simpul DOM apa pun.

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 menyertakan audit baru yang disebut Library JavaScript yang terdeteksi. Audit ini mencantumkan library JS apa yang telah terdeteksi oleh Lighthouse pada halaman. Anda dapat menemukan audit ini dalam laporan Anda di bagian Praktik Terbaik > Lulus audit.

Gambar 4. Library JavaScript yang terdeteksi

Selain itu, sekarang Anda dapat mengakses panel Audit dari Menu Perintah dengan mengetik Lighthouse atau PWA.

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.

Yang baru di DevTools

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