Yang Baru di DevTools (Chrome 62)

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

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

Operator await level teratas di Konsol

Console kini mendukung operator await tingkat teratas.

Gambar 1. Menggunakan operator await tingkat teratas di Console

Alur kerja screenshot baru

Anda kini dapat mengambil screenshot sebagian area tampilan, atau node HTML tertentu.

Screenshot sebagian area tampilan

Untuk mengambil screenshot sebagian area tampilan:

1. Klik Periksa atau tekan Command+Shift+C (Mac) atau Control+Shift+C (Windows, Linux) untuk masuk ke Mode Periksa Elemen.
2. Tahan Command (Mac) atau Control (Windows, Linux) dan pilih bagian area tampilan yang ingin Anda screenshot.
3. Lepaskan mouse Anda. 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 mengambil screenshot header biru yang berisi teks Tools. Perhatikan bahwa node ini sudah dipilih di DOM Tree pada panel Elements

2. Buka Menu Perintah.

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

   

   Gambar 4. Hasil perintah Capture node screenshot

Penyorotan Petak CSS

Untuk melihat Petak CSS yang memengaruhi elemen, arahkan kursor ke elemen di Hierarki DOM pada panel Elemen. Batas putus-putus muncul di sekitar setiap item petak. Tindakan ini hanya berfungsi jika item yang dipilih, atau induk item yang dipilih, menerapkan display:grid.

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 adalah nama fungsi. Menampilkan semua objek yang di-instance melalui new foo().

Cakupan queryObjects() adalah konteks eksekusi yang saat ini dipilih di Console. 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 Console. two disembunyikan karena -two dimasukkan dalam kotak Filter

DevTools memfilter pesan jika <text> ditemukan:

• Dalam teks pesan.
• Dalam nama file tempat pesan berasal.
• Dalam 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-nya menyertakan <text>.

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

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

Impor HAR di panel Jaringan

Tarik lalu lepas file HAR ke panel Network untuk mengimpornya.

Gambar 8. Mengimpor file HAR

Aset cache yang dapat dilihat pratinjaunya di panel Aplikasi

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, men-debug cache yang dibuat dengan Cache API... sulit. Misalnya, saat halaman membuat cache baru, Anda harus memuat ulang halaman atau DevTools secara manual untuk melihat cache baru.

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

Lihat Demo Cache Storage untuk mencobanya sendiri.

Cakupan kode tingkat blok

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

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

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

Gambar 11. Contoh tab Coverage di Chrome 62. Baris 4 ditandai 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, 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.

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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