Yang Baru di DevTools (Chrome 64)

Kayce Basques

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

Lanjutkan membaca, 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 oleh semua pengguna.
  • Ukuran heap JavaScript.
  • Jumlah total simpul DOM, pemroses peristiwa JavaScript, dokumen, dan bingkai pada laman.
  • Tata letak dan penghitungan ulang gaya per detik.

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

Alasan pentingnya performa pemuatan: BookMyShow mencapai peningkatan konversi sebesar 80% saat 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.

    Performance Monitor Gambar 1. Tujuan Pemantauan Performa

  3. Klik metrik untuk menampilkan atau menyembunyikannya. Pada Gambar 1 CPU Usage, JS heap size, dan JS pemroses peristiwa akan ditampilkan.

Fitur terkait:

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

Jika Anda baru mulai menganalisis performa, jalur yang direkomendasikan adalah menggunakan Panel Audit, lalu selidiki lebih lanjut menggunakan panel Performa atau Performa memantau.

Sidebar Konsol

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

Menggunakan Sidebar Konsol untuk menampilkan pesan error saja

Gambar 2. Menggunakan Sidebar Konsol untuk menampilkan pesan error saja

Sidebar Konsol disembunyikan secara default. Klik Show Console Sidebar Tampilkan Sidebar Konsol untuk menunjukkannya.

Fitur terkait:

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

Mengelompokkan pesan Konsol serupa

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

Contoh Konsol yang mengelompokkan pesan-pesan serupa

Gambar 3. Contoh Konsol yang mengelompokkan pesan-pesan serupa

Klik pada grup untuk meluaskannya dan melihat setiap pesan.

Contoh grup pesan Konsol yang diperluas

Gambar 4. Contoh grup pesan Konsol yang diperluas

Hapus centang pada kotak Group Similar 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 pada Chrome 64, tetapi menariknya mendekati tenggat waktu untuk menghaluskan beberapa masalah. Tampaknya, UI {i>What’s New<i} tidak diperbarui di baik. Maaf.

Fitur ini diluncurkan di Chrome 65, yang akan tersedia sekitar 6 minggu setelah Chrome 64. Periksa Local Overrides 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, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools.

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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