Yang Baru di DevTools (Chrome 64)

Kayce Basques

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

• Pemantau Performa. Melihat performa halaman secara real time.
• Sidebar Konsol. Kurangi gangguan Konsol dan fokus pada pesan yang penting bagi Anda.
• Kelompokkan pesan Konsol yang serupa. Konsol kini mengelompokkan pesan serupa secara default.

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

Pemantauan Performa

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

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

Jika pengguna melaporkan bahwa aplikasi Anda terasa lambat atau tidak lancar, periksa Pemantau Performa untuk menemukan petunjuk.

Alasan performa pemuatan penting: BookMyShow mencapai peningkatan konversi sebesar 80% saat mereka membuat Aplikasi Web Progresif yang berfokus pada kecepatan. Pelajari lebih lanjut.

Untuk menggunakan Pemantau Performa:

1. Buka Menu Perintah.

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

   Gambar 1. Pemantau Performa

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

Fitur terkait:

• Panel Performa. Jelajahi perjalanan pengguna yang penting dan rekam semua yang terjadi di halaman, termasuk aktivitas JavaScript, permintaan jaringan, penggunaan CPU, dan banyak lagi. Juga dapat digunakan untuk menganalisis performa beban. 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 gangguan dan berfokus pada pesan yang penting bagi Anda.

Gambar 2. Menggunakan Sidebar Konsol untuk menampilkan pesan error saja

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

Fitur terkait:

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

Mengelompokkan pesan Konsol yang serupa

Konsol kini mengelompokkan pesan serupa secara default. Misalnya, pada Gambar 3, ada 27 kemunculan pesan [Violation] Avoid using document.write().

Gambar 3. Contoh Konsol yang mengelompokkan pesan serupa

Klik grup untuk meluaskannya dan melihat setiap instance pesan.

Gambar 4. Contoh grup pesan Konsol yang diluaskan

Hapus centang pada kotak Kelompokkan Serupa untuk menonaktifkan fitur ini.

Fitur terkait:

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

Penggantian Lokal

Ups! Awalnya kami menjadwalkan peluncuran fitur ini di Chrome 64, tetapi membatalkannya menjelang batas waktu untuk memperlancar beberapa kekurangan. Ternyata, UI Yang Baru tidak diupdate tepat waktu. Maaf.

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

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.