Pelajari cara: membuka DevTools Console, menumpuk pesan berlebihan atau menampilkannya di baris masing-masing, menghapus atau mempertahankan keluaran atau menyimpannya ke file, memfilter keluaran, dan mengakses setelan Console tambahan.
TL;DR
- Buka Console sebagai panel tersendiri atau sebagai panel samping di sebelah panel lain.
- Tumpuk pesan yang berlebihan, atau tampilkan di barisnya masing-masing.
- Hapus atau pertahankan output antarhalaman, atau simpan ke file.
- Filter output menurut tingkat keseriusannya, dengan menyembunyikan pesan jaringan, atau dengan pola ekspresi reguler.
Membuka Console
Akses Console sebagai panel layar-penuh tersendiri:
Atau berupa panel samping yang dibuka di sebelah panel lain:
Buka sebagai panel
Untuk membuka panel Console:
- Tekan Ctrl+Shift+J (Windows / Linux) atau Cmd+Opt+J (Mac).
- Jika DevTools terbuka, tekan tombol Console.
Bila Anda membuka panel Console, panel samping Console akan diciutkan secara otomatis.
Buka sebagai panel samping
Untuk membuka Console sebagai panel samping di sebelah panel lain, lakukan salah satu hal berikut:
- Tekan Esc saat DevTools terfokus.
- Tekan tombol Customize and control DevTools dan tekan tombol Show console.
Penumpukan pesan
Jika pesan diulang secara berturutan, Console tidak akan mencetak setiap contoh pesan pada baris baru, tetapi "menumpuk" pesan tersebut dan menampilkan angka di margin kiri. Angka itu menunjukkan berapa kali pesan diulangi.
Jika Anda lebih menyukai entri baris sendiri-sendiri untuk setiap log, aktifkan Show timestamps dari pengaturan DevTools.
Karena stempel waktu setiap pesan berbeda, setiap pesan akan ditampilkan pada barisnya sendiri.
Menggunakan histori Console
Mengosongkan histori
Anda bisa mengosongkan histori konsol dengan melakukan salah satu hal berikut:
- Klik kanan Console dan tekan Clear console.
- Ketikkan
clear()di Console. - Panggil
console.clear()dari dalam kode JavaScript. - Tekan Ctrl+L (Mac, Windows, Linux).
Mempertahankan histori
Aktifkan kotak centang Preserve log di bagian atas konsol untuk mempertahankan histori konsol di sela penyegaran atau perubahan laman. Pesan akan disimpan hingga Anda mengosongkan Console atau menutup tab.
Menyimpan histori
Klik kanan di Console dan pilih Save as untuk menyimpan keluaran konsol ke file log.
Memilih konteks eksekusi
Menu tarik-turun yang disorot biru di tangkapan layar berikut disebut Pemilih Konteks Eksekusi.
Biasanya konteks disetel ke top (bingkai atas laman).
Bingkai dan ekstensi lain beroperasi di konteksnya masing-masing. Untuk menggarap konteks
lain ini, Anda perlu memilihnya dari menu tarik-turun. Misalnya,
jika ingin melihat keluaran log elemen <iframe> dan mengubah
variabel yang berada di konteks itu, Anda perlu memilihnya dari
menu tarik-turun Pemilih Konteks Eksekusi.
Secara default Console berada dalam konteks top, kecuali jika Anda mengakses DevTools dengan
memeriksa elemen di dalam konteks lain. Misalnya, jika Anda memeriksa
elemen <p> di dalam konteks <iframe>, DevTools menyetel Pemilih
Konteks Eksekusi ke konteks <iframe> tersebut.
Saat Anda sedang menggarap konteks selain top, DevTools menyoroti
Pemilih Konteks Eksekusi dengan warna merah, seperti dalam screenshot berikut. Ini karena
developer jarang perlu menggarap konteks selain top. Tentu
membingungkan kalau kita mengetikkan suatu variabel, mengharapkan suatu nilai, tetapi malah melihat bahwa
variabel itu undefined (karena definisinya berada di konteks lain).
Memfilter keluaran Console
Klik tombol Filter
(
)
untuk memfilter keluaran console. Anda bisa memfilter menurut tingkat keseriusan, menurut ekspresi
reguler, atau dengan menyembunyikan pesan jaringan.
Memfilter menurut tingkat keparahan setara dengan yang berikut ini:
| Opsi & Tampilan | |
|---|---|
| Semua | Menampilkan semua keluaran konsol |
| Errors | Hanya menampilkan keluaran dari console.error(). |
| Warnings | Hanya menampilkan keluaran dari console.warn(). |
| Info | Hanya menampilkan keluaran dari console.info(). |
| Logs | Hanya menampilkan keluaran dari console.log(). |
| Debug | Hanya menampilkan keluaran dari console.timeEnd() dan console.debug(). |
Setelan tambahan
Buka setelan DevTools, masuk ke tab General, dan scroll ke bawah hingga bagian Console untuk melihat setelan Console lebih lanjut.
| Setelan & Keterangan | |
|---|---|
| Hide network messages | Secara default, konsol melaporkan masalah jaringan. Mengaktifkannya akan menginstruksikan konsol agar tidak menampilkan log error ini. Misalnya, error seri 404 dan 500 tidak akan dimasukkan ke log. |
| Log XMLHttpRequests | Menentukan apakah konsol merekam log setiap XMLHttpRequest. |
| Preserve log upon navigation | Mempertahankan histori konsol selama penyegaran laman atau navigasi. |
| Show timestamps | Menyertakan stempel waktu ke setiap pesan konsol, menunjukkan kapan panggilan itu dibuat. Berguna untuk men-debug saat terjadi kejadian tertentu. Ini akan menonaktifkan penumpukan pesan. |
| Enable custom formatters | Mengontrol format objek JavaScript. |