Yang Baru di DevTools (Chrome 62)

Fitur dan perubahan baru akan hadir di DevTools di Chrome 62:

• Dukungan untuk operator await tingkat teratas di Konsol.
• Screenshot sebagian area tampilan, dan screenshot node HTML tertentu.
• Sorotan Petak CSS.
• API Console baru untuk membuat kueri objek.
• Filter negatif dan Filter URL di Konsol.
• Impor HAR di panel Jaringan.
• Resource cache yang dapat dipratinjau.
• Proses debug cache yang lebih dapat diprediksi.
• Cakupan kode tingkat blok.

Operator await tingkat teratas di Konsol

Konsol kini mendukung operator await tingkat atas.

Gambar 1. Menggunakan operator await tingkat teratas di Konsol

Alur kerja screenshot baru

Kini Anda dapat mengambil screenshot sebagian area pandang, atau node HTML tertentu.

Screenshot sebagian area tampilan

Untuk mengambil screenshot sebagian area pandang:

1. Klik Inspect atau tekan Command+Shift+C (Mac) atau Control+Shift+C (Windows, Linux) untuk masuk ke Mode Inspect Element.
2. Tahan Command (Mac) atau Control (Windows, Linux) dan pilih bagian dari area pandang yang ingin Anda ambil tangkapan layarnya.
3. Lepaskan mouse. DevTools akan mendownload screenshot bagian yang Anda pilih.

Gambar 2. Mengambil screenshot sebagian area tampilan

Screenshot node HTML tertentu

Untuk mengambil screenshot node HTML tertentu:

1. Pilih elemen di panel Elemen.

   

   Gambar 3. Dalam contoh ini, tujuannya adalah untuk mengambil tangkapan layar dari {i>header<i} biru yang berisi teks Tools. Perhatikan bahwa node ini sudah dipilih dalam DOM Tree dari Panel Elemen

2. Buka Menu Perintah.

3. Mulai ketik node lalu pilih Capture node screenshot. DevTools mendownload screenshot dari node yang dipilih.

   

   Gambar 4. Hasil perintah Capture node screenshot

Penandaan Petak CSS

Untuk melihat Petak CSS yang memengaruhi elemen, arahkan kursor ke elemen dalam Pohon DOM dari elemen Elements. Batas putus-putus muncul di sekitar setiap item petak. Fungsi ini hanya berfungsi saat item yang dipilih, atau induk dari item yang dipilih, telah menerapkan display:grid ke item tersebut.

Gambar 5. Menyoroti Petak CSS

Tonton video di bawah ini untuk mempelajari dasar-dasar Petak CSS dalam waktu kurang dari 2 menit.

API baru untuk membuat kueri objek heap

Panggil queryObjects(Constructor) dari Konsol untuk menampilkan array objek yang dibuat dengan konstruktor yang ditentukan. Contoh:

• queryObjects(Promise). Menampilkan semua Promise.
• queryObjects(HTMLElement). Menampilkan semua elemen HTML.
• queryObjects(foo), dengan foo sebagai nama fungsi. Menampilkan semua objek yang dibuat instance-nya melalui new foo().

Cakupan queryObjects() adalah konteks eksekusi yang saat ini dipilih di Konsol. Lihat Memilih konteks eksekusi.

Filter Konsol baru

Konsol kini mendukung filter negatif dan URL.

Filter negatif

Ketik -<text> di kotak Filter untuk memfilter pesan Konsol yang menyertakan <text>.

Gambar 6. Pernyataan pertama mencatat one, two, three, dan four ke Konsol. two disembunyikan karena -two dimasukkan dalam kotak Filter

DevTools memfilter pesan jika <text> ditemukan:

• Di teks pesan.
• Dalam nama file tempat pesan berasal.
• Di teks stack trace.

Filter negatif juga berfungsi dengan ekspresi reguler seperti -/[4-5]*ms/.

Filter URL

Ketik url:<text> di kotak Filter untuk hanya menampilkan pesan yang berasal dari skrip yang URL mencakup <text>.

Filter menggunakan pencocokan fuzzy. Jika <text> muncul di mana saja dalam URL, DevTools akan menampilkan untuk membuat pesan email baru.

Gambar 7. Menggunakan pemfilteran URL untuk hanya menampilkan pesan yang berasal dari skrip yang URL-nya mencakup hymn. Dengan mengarahkan kursor ke nama skrip, Anda dapat melihat bahwa nama {i>host<i} menyertakan teks ini

Impor HAR di panel Jaringan

Tarik lalu lepas file HAR ke panel Jaringan untuk mengimpornya.

Gambar 8. Mengimpor file HAR

Resource cache yang dapat dipratinjau di panel Application

Klik baris dalam tabel Cache Storage untuk melihat pratinjau resource tersebut di bawah tabel.

Gambar 9. Melihat pratinjau resource cache

Proses debug cache yang lebih responsif

Di Chrome 61 dan yang lebih lama, proses debug cache yang dibuat dengan Cache API sangatlah sulit. Sebagai misalnya, saat halaman membuat cache baru, Anda harus memuat ulang halaman atau DevTools secara manual untuk untuk melihat cache baru.

Di Chrome 62, tab Penyimpanan Cache kini diperbarui secara real time setiap kali Anda membuat, memperbarui, atau menghapus cache atau resource. Tonton video di bawah untuk contohnya.

Lihat Demo Penyimpanan Cache untuk mencobanya sendiri.

Cakupan kode tingkat blok

Di Chrome 61 dan yang lebih lama, tab Cakupan menandai semua kode dalam fungsi seperti yang digunakan, jadi selama fungsi dipanggil.

Gambar 10. Contoh tab Cakupan di Chrome 61. Baris 4 ditandai sebagai digunakan, meskipun tidak pernah dijalankan

Mulai Chrome 62, tab Cakupan kini memberi tahu Anda kode dalam fungsi yang dipanggil.

Gambar 11. Contoh tab Cakupan di Chrome 62. Baris 4 ditandai sebagai tidak digunakan

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.
• Beri 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.