Yang Baru di DevTools (Chrome 62)

Kayce Basques

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

Operator await level teratas di Konsol

Konsol kini mendukung operator await tingkat teratas.

Menggunakan operator await tingkat atas di Konsol

Gambar 1. Menggunakan operator await tingkat teratas di Konsol

Alur kerja screenshot baru

Anda kini dapat mengambil screenshot bagian area pandang, atau node HTML tertentu.

Screenshot bagian area pandang

Untuk mengambil screenshot sebagian area pandang:

  1. Klik Periksa Periksa atau tekan Command+Shift+C (Mac) atau Control+Shift+C (Windows, Linux) untuk memasuki Mode Periksa Elemen.
  2. Tahan Command (Mac) atau Control (Windows, Linux) dan pilih bagian tampilan yang ingin Anda ambil screenshot-nya.
  3. Lepaskan mouse. DevTools akan mendownload screenshot bagian yang Anda pilih.

Mengambil screenshot sebagian area pandang

Gambar 2. Mengambil screenshot sebagian area pandang

Screenshot node HTML tertentu

Untuk mengambil screenshot node HTML tertentu:

  1. Pilih elemen di panel Elemen.

    Contoh node

    Gambar 3. Dalam contoh ini, sasarannya adalah mengambil screenshot header biru yang berisi teks Tools. Perhatikan bahwa node ini sudah dipilih di DOM Tree di 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

Sorotan Petak CSS

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

Menandai Petak CSS

Gambar 5. Menandai Petak CSS

Tonton video di bawah ini untuk mempelajari dasar-dasar CSS Grid 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 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>.

Contoh 3 pesan yang akan difilter

Gambar 6. Pernyataan pertama mencatat one, two, three, dan four ke Konsol. 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 pelacakan tumpukan.

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 Jaringan untuk mengimpornya.

Mengimpor file HAR

Gambar 8. Mengimpor file HAR

Resource cache yang dapat dipratinjau di panel Aplikasi

Klik baris dalam tabel Penyimpanan Cache 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, proses debug cache yang dibuat dengan Cache API agak sulit. Misalnya, saat halaman membuat cache baru, Anda harus memuat ulang halaman atau DevTools secara manual 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 melihat 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 sebagai digunakan, selama fungsi dipanggil.

Contoh tab Cakupan di Chrome 61

Gambar 10. Contoh tab Cakupan 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 Cakupan di Chrome 62. Baris 4 ditandai tidak digunakan

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

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