Yang Baru di DevTools (Chrome 64)

Kayce Basques

Selamat datang kembali! Fitur baru yang hadir di DevTools di Chrome 64 meliputi:

Baca terus, atau tonton versi video catatan rilis ini di bawah.

Pemantauan Performa

Gunakan Performance Monitor untuk mendapatkan tampilan real-time dari berbagai aspek pemuatan halaman atau performa runtime, termasuk:

  • Penggunaan CPU.
  • Ukuran heap JavaScript.
  • Jumlah total node DOM, pemroses peristiwa JavaScript, dokumen, dan frame di halaman.
  • Tata letak dan penghitungan ulang gaya per detik.

Jika pengguna melaporkan bahwa aplikasi Anda terasa lambat atau mengalami jank, periksa Performance Monitor untuk menemukan petunjuk.

Alasan performa pemuatan penting: BookMyShow meraih peningkatan konversi sebesar 80% saat mereka membuat Progressive Web App yang berfokus pada kecepatan. Pelajari lebih lanjut.

Untuk menggunakan Performance Monitor:

  1. Buka Menu Perintah.

  2. Mulai ketik Performance, lalu pilih Show Performance Monitor.

    Pemantau Performa Gambar 1. Pemantau Performa

  3. Klik metrik untuk menampilkan atau menyembunyikannya. Pada Gambar 1, diagram Penggunaan CPU, Ukuran heap JS, dan pemroses peristiwa JS ditampilkan.

Fitur terkait:

  • Panel Performa. Pelajari perjalanan penting pengguna dan rekam semua yang terjadi di halaman, termasuk aktivitas JavaScript, permintaan jaringan, penggunaan CPU, dan banyak lagi. Dapat juga digunakan untuk menganalisis performa pemuatan. Pelajari lebih lanjut.
  • Panel Audit. Jalankan serangkaian pengujian performa beban dan runtime otomatis terhadap URL apa pun. Pelajari lebih lanjut.

Jika Anda baru mulai menganalisis performa, sebaiknya gunakan panel Audit terlebih dahulu, lalu selidiki lebih lanjut menggunakan panel Performa atau monitor Performa.

Sidebar Konsol

Di situs besar, Konsol dapat dengan cepat dibanjiri pesan yang tidak relevan. Gunakan Sidebar Konsol baru untuk mengurangi derau dan berfokus pada pesan yang penting bagi Anda.

Menggunakan Sidebar Konsol untuk hanya menampilkan pesan error

Gambar 2. Menggunakan Sidebar Konsol untuk hanya menampilkan pesan error

Sidebar Konsol disembunyikan secara default. Klik Tampilkan Sidebar Konsol Menampilkan Sidebar Konsol untuk menampilkannya.

Fitur terkait:

  • Kotak teks Filter. Masukkan beberapa teks dan Konsol hanya akan menampilkan pesan yang menyertakan teks tersebut. Juga mendukung pola ekspresi reguler, filter negatif, dan filter URL.

Mengelompokkan pesan Konsol yang serupa

Konsol kini mengelompokkan pesan serupa secara default. Misalnya, dalam Gambar 3 terdapat 27 instance pesan [Violation] Avoid using document.write().

Contoh Konsol mengelompokkan pesan serupa

Gambar 3. Contoh Konsol mengelompokkan pesan serupa

Klik grup untuk meluaskannya dan melihat setiap instance pesan.

Contoh grup pesan Konsol yang diluaskan

Gambar 4. Contoh grup pesan Konsol yang diluaskan

Hapus centang pada kotak Kelompokkan Mirip untuk menonaktifkan fitur ini.

Fitur terkait:

  • Anda dapat mengelompokkan pesan Konsol Anda sendiri dengan console.group().

Penggantian Lokal

Ups! Awalnya kami menjadwalkan fitur ini untuk diluncurkan di Chrome 64, tetapi kami menundanya mendekati batas waktu untuk menyelesaikan beberapa kekurangan. Tampaknya, UI Yang Baru tidak diperbarui tepat waktu. Maaf.

Fitur ini dikirimkan di Chrome 65, yang akan dirilis sekitar 6 minggu setelah Chrome 64. Lihat Penggantian Lokal untuk mempelajari lebih lanjut. Jika menggunakan Windows atau Mac, Anda dapat mencoba Chrome 65 sekarang dengan mendownload Chrome Canary.

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.