Pencatat Konsol

Pratinjau Langsung

example.com/app

Semua Kesalahan (2) Peringatan (1) Info (1) Log (3) Bersihkan

LOG Aplikasi diinisialisasi 10:24:01
INFO Sesi pengguna dipulihkan — ID: u_8f3k2 10:24:01
LOG Mengambil /api/dashboard... 10:24:02
WARN Endpoint API usang digunakan: /api/v1/stats 10:24:02
LOG Dashboard dimuat (238ms) 10:24:02
ERR TypeError: Tidak dapat membaca properti 'map' dari undefined 10:24:03
at Dashboard.render (app.js:142:18)
at processChild (react-dom.js:1284:14)
ERR Gagal memuat sumber daya: 404 /api/avatar.png 10:24:03

Fitur Utama

Feed Konsol Langsung

Pesan konsol muncul secara real-time saat dicatat. Lihat log inisialisasi halaman, penanganan respons API, event interaksi pengguna, dan pesan error — semuanya mengalir langsung di panel mengambang.

Tipe Pesan Berkode Warna

Error berwarna merah, peringatan (warning) berwarna kuning/jingga, info berwarna biru, dan log standar berwarna putih/abu-abu. Bedakan secara instan antara error kritis dan log rutin hanya berdasarkan warnanya.

Stack Trace Error

Error JavaScript menyertakan stack trace lengkap dengan nama file, nama fungsi, dan nomor baris. Klik referensi file untuk mengidentifikasi dengan tepat dari mana error berasal tanpa membuka DevTools.

Filter Tipe

Tombol filter di bagian atas memungkinkan Anda menampilkan/menyembunyikan tipe pesan tertentu: Semua, Hanya Error, Hanya Peringatan, Hanya Info, Hanya Log. Badge jumlah pada setiap filter menunjukkan berapa banyak pesan dari tipe tersebut.

Timestamp

Setiap pesan menunjukkan waktu pencatatan (format HH:MM:SS). Lacak urutan kejadian, identifikasi masalah performa (berapa lama antara panggilan API dan respons), dan korelasikan pesan dengan tindakan pengguna.

Bersihkan & Ekspor

Bersihkan semua pesan untuk memulai dari awal, atau terus kumpulkan saat Anda berinteraksi dengan halaman. Panel menampilkan total hitungan pesan dan dapat diperkecil saat tidak diperlukan.

Kasus Penggunaan Umum

Debug Cepat Tanpa DevTools

Perlu melihat output konsol sambil tetap menampilkan halaman penuh? Pencatat Konsol memungkinkan Anda memantau log tanpa panel DevTools memakan ruang layar. Sempurna untuk layar kecil atau saat presentasi.

Memantau Hasil Panggilan API

Jika JavaScript Anda mencatat respons API, Pencatat Konsol akan menampilkannya secara real-time. Lihat data permintaan/respons tanpa harus berpindah-pindah antara halaman dan DevTools.

Menangkap Error JavaScript Tersembunyi

Beberapa error JavaScript terjadi secara diam-diam — tidak ada perubahan UI yang terlihat, tetapi ada error di konsol. Pencatat Konsol membuatnya terlihat di halaman sehingga Anda menyadarinya selama penjelajahan normal.

Debugging Sisi Klien Saat Demo

Selama demo langsung, biarkan panel Pencatat Konsol terlihat di sudut. Jika terjadi kesalahan, Anda dapat segera melihat pesan error tanpa mengganggu demo untuk membuka DevTools.

Memantau Masalah Skrip Pihak Ketiga

Skrip pihak ketiga (analitik, widget chat, jaringan iklan) sering kali memicu error atau peringatan. Pencatat Konsol menangkap hal ini sehingga Anda dapat memantau kesehatan dependensi eksternal.

Cara Menggunakan

Aktifkan Pencatat Konsol

Buka dok mengambang DevSuite Pro dan klik ikon Pencatat Konsol. Sebuah panel mengambang akan muncul dan segera mulai menangkap output konsol.

Berinteraksi dengan Halaman

Gunakan halaman secara normal — klik tombol, navigasi, kirim formulir. Pesan konsol akan muncul di panel saat dicatat oleh JavaScript halaman.

Filter berdasarkan Tipe Pesan

Gunakan tombol filter untuk menampilkan hanya error, peringatan, atau log. Badge hitungan menunjukkan berapa banyak pesan yang ada untuk setiap tipe.

Baca Stack Trace

Untuk pesan error, perluas stack trace untuk melihat file dan nomor baris tempat error terjadi. Gunakan ini untuk mengidentifikasi sumber bug.

Bersihkan Setelah Selesai

Klik "Bersihkan" (Clear) untuk mereset panel, atau nonaktifkan alat untuk menutupnya. Tidak ada jejak yang tertinggal di halaman.