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 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 mengetahui 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. {i>Performance Monitor<i}

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

Fitur terkait:

  • Performance. Telusuri perjalanan penting pengguna dan catat semua yang terjadi di halaman, termasuk aktivitas JavaScript, permintaan jaringan, penggunaan CPU, dan banyak lagi. Juga dapat 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 Audits terlebih dahulu, lalu menyelidiki lebih lanjut menggunakan panel Performa atau pemantauan Performa.

Sidebar Konsol

Pada situs besar, Konsol dapat dengan cepat dipenuhi dengan pesan yang tidak relevan. Gunakan Sidebar Konsol baru untuk mengurangi derau dan fokus 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 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 serupa

Konsol sekarang mengelompokkan pesan serupa secara default. Misalnya, dalam Gambar 3, ada 27 instance 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! Kami awalnya menjadwalkan fitur ini untuk diluncurkan pada Chrome 64, tetapi menariknya mendekati batas waktu untuk memperhalus beberapa batasan. Tampaknya, UI Yang Baru tidak diupdate tepat waktu. Maaf.

Fitur ini diluncurkan di Chrome 65, yang akan tersedia 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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

109 Chrome

Chrome 108

Chrome 107

106 Chrome

105 Chrome

104 Chrome

103 Chrome

102 Chrome

101 Chrome

100 Chrome

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59