Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Menggunakan Console

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

  • Membuka Console sebagai panel tersendiri atau sebagai panel samping di sebelah panel lain.
  • Menumpuk pesan yang berlebihan, atau menampilkannya di barisnya masing-masing.
  • Menghapus atau mempertahankan keluaran antar laman, atau menyimpannya ke file.
  • Memfilter keluaran menurut tingkat keseriusannya, dengan menyembunyikan pesan jaringan, atau dengan pola ekspresi reguler.

Membuka Console

Akses Console sebagai panel layar-penuh tersendiri:

Panel Console

Atau berupa panel samping yang dibuka di sebelah panel lain:

Panel samping Console

Membuka sebagai panel

Untuk membuka panel Console tersendiri, lakukan salah satu hal berikut:

  • Tekan Ctrl+Shift+J (Windows / Linux) atau Cmd+Opt+J (Mac).
  • Jika DevTools sudah dibuka, tekan tombol Console.

Bila Anda membuka panel Console, panel samping Console akan diciutkan secara otomatis.

Membuka 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 kemudian tekan Show console.

Show console

Penumpukan pesan

Jika pesan diulang secara berturutan, Console tidak akan mencetak setiap instance pesan pada baris baru, tetapi "menumpuk" pesan tersebut dan menampilkan angka di margin kiri. Angka itu menunjukkan berapa kali pesan diulangi.

Penumpukan pesan

Jika Anda lebih menyukai entri baris sendiri-sendiri untuk setiap log, aktifkan Show timestamps dari setelan DevTools.

Show timestamps

Karena stempel waktu setiap pesan berbeda, setiap pesan akan ditampilkan pada barisnya sendiri.

Konsol stempel waktu

Menggunakan riwayat Console

Mengosongkan riwayat

Anda bisa mengosongkan riwayat konsol dengan melakukan salah satu hal berikut:

  • Klik kanan di Console dan tekan Clear console.
  • Ketikkan clear() di Console.
  • Panggil console.clear() dari dalam kode JavaScript Anda.
  • Tekan Ctrl+L (Mac, Windows, Linux).

Mempertahankan riwayat

Aktifkan kotak centang Preserve log di bagian atas konsol untuk mempertahankan riwayat konsol di sela penyegaran atau perubahan laman. Pesan akan disimpan hingga Anda mengosongkan Console atau menutup tab.

Menyimpan riwayat

Klik kanan di Console dan pilih Save as untuk menyimpan keluaran konsol ke file log.

Simpan Konsol ke file log

Memilih konteks eksekusi

Menu tarik-turun yang disorot biru di tangkapan layar berikut disebut Pemilih Konteks Eksekusi.

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 tangkapan layar 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).

Pemilih Konteks Eksekusi disorot merah

Memfilter keluaran Console

Klik tombol Filter (tombol filters) untuk memfilter keluaran konsol. Anda bisa memfilter menurut tingkat keseriusan, menurut ekspresi reguler, atau dengan menyembunyikan pesan jaringan.

Keluaran Konsol Difilter

Memfilter menurut tingkat keparahan setara dengan yang berikut ini:

Opsi & Tampilan
All 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 gulir ke bawah hingga bagian Console untuk melihat setelan Console lebih lanjut.

Setelan konsol

Setelan & Keterangan
Hide network messages Secara default, konsol melaporkan masalah jaringan. Mengaktifkannya akan menginstruksikan konsol agar tidak menampilkan log kesalahan ini. Misalnya, kesalahan seri 404 dan 500 tidak akan dimasukkan ke log.
Log XMLHttpRequests Menentukan apakah konsol merekam log setiap XMLHttpRequest.
Preserve log upon navigation Mempertahankan riwayat 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.