Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

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

  • 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:

Panel Console

Atau berupa panel samping yang dibuka di sebelah panel lain:

Panel samping Console

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.

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.

Penumpukan pesan

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

Show timestamps

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

Konsol stempel waktu

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.

Simpan Console 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 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).

Pemilih Konteks Eksekusi disorot merah

Memfilter keluaran Console

Klik tombol Filter (tombol filter) untuk memfilter keluaran console. 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
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 konsol

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.

Masukan

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.