Yang Baru di DevTools (Chrome 62)

Kayce Basques
Kayce Basques
X GitHub

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

Operator await level teratas di Konsol

Console kini mendukung operator await tingkat teratas.

Menggunakan operator await tingkat teratas di Konsol

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

Mengambil screenshot sebagian area tampilan

Gambar 2. Mengambil screenshot sebagian area tampilan

Screenshot node HTML tertentu

Untuk mengambil screenshot node HTML tertentu:

  1. Pilih elemen di panel Elemen.

    Contoh node

    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.

    Hasil perintah 'Ambil screenshot node'

    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 akan muncul di sekitar setiap item petak. Tindakan ini hanya berfungsi jika item yang dipilih, atau induk item yang dipilih, menerapkan display:grid.

Menyoroti Petak CSS

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

Contoh 3 pesan yang akan difilter

Gambar 6. Pernyataan pertama mencatat one, two, three, dan four ke Console. two disembunyikan karena -two dimasukkan di 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.

Contoh pemfilteran URL

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.

Mengimpor file HAR

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.

Melihat pratinjau resource cache

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 contoh.

Lihat Demo Cache Storage untuk mencobanya sendiri.

Cakupan kode tingkat blok

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

Contoh tab Cakupan di Chrome 61

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.

Contoh tab Cakupan di Chrome 62

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

Download 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.

Yang baru di DevTools

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