Halaman ini merupakan referensi fitur yang terkait dengan Chrome DevTools Console. Anda dianggap sudah terbiasa menggunakan Console untuk melihat pesan yang dicatat dalam log dan menjalankan JavaScript. Jika belum, lihat Memulai.
Jika Anda mencari referensi API pada fungsi seperti console.log()
, lihat Referensi Console API. Untuk referensi tentang fungsi seperti monitorEvents()
, lihat Referensi Console Utilitas
API.
Buka Console
Anda dapat membuka Konsol sebagai panel atau tab di Panel Samping.
Membuka panel Console
Tekan Control+Shift+J atau Command+Option+J (Mac).
Untuk membuka Konsol dari Menu Command, mulai ketik Console
, lalu jalankan perintah Show
Console yang memiliki badge Panel di sampingnya.
Membuka Konsol di Panel Samping
Tekan Escape atau klik Customize And Control DevTools , lalu pilih Show Console Drawer.
Panel Samping muncul di bagian bawah jendela DevTools, dengan tab Console terbuka.
Untuk membuka tab Console dari Menu Command, mulai ketik Console
, lalu jalankan perintah Show
Console yang memiliki badge Drawer di sampingnya.
Buka Setelan Konsol
Klik Console Settings di pojok kanan atas Console.
Link di bawah menjelaskan setiap setelan:
- Sembunyikan jaringan
- Pertahankan log
- Hanya konteks yang dipilih
- Mengelompokkan pesan serupa di konsol
- Menampilkan error CORS di konsol
- Mencatat log XMLHttpRequests
- Evaluasi segera
- Pelengkapan otomatis dari histori
Buka Sidebar Konsol
Klik Tampilkan Sidebar Konsol untuk menampilkan Sidebar, yang berguna untuk pemfilteran.
Melihat pesan
Bagian ini berisi fitur yang mengubah cara pesan ditampilkan di Konsol. Lihat Melihat pesan untuk panduan langsung.
Nonaktifkan pengelompokan pesan
Buka Setelan Konsol dan nonaktifkan Grup serupa untuk menonaktifkan perilaku pengelompokan pesan default Konsol. Lihat Mencatat permintaan ke dalam log dan Mengambil untuk mengetahui contohnya.
Menampilkan pesan dari titik henti sementara
Konsol menandai pesan yang dipicu oleh titik henti sementara dengan cara berikut:
- Panggilan
console.*
dalam titik henti sementara bersyarat dengan tanda tanya oranye?
- Pesan Logpoint dengan dua titik merah muda
..
Untuk melompat ke editor titik henti sementara inline di panel Sumber, klik link anchor di samping pesan titik henti sementara.
Melihat pelacakan tumpukan
Konsol otomatis merekam pelacakan tumpukan untuk menemukan error dan peringatan. Pelacakan tumpukan adalah histori panggilan fungsi (frame) yang menyebabkan error atau peringatan. Konsol menampilkannya dalam urutan terbalik: frame terbaru berada di bagian atas.
Untuk melihat pelacakan tumpukan, klik ikon luaskan di samping error atau peringatan.
Melihat pelacakan tumpukan asinkron
Jika didukung oleh framework yang Anda gunakan atau saat langsung menggunakan dasar penjadwalan browser, seperti setTimeout
, DevTools dapat melacak operasi asinkron dengan menautkan kedua bagian kode asinkron bersama-sama.
Dalam hal ini, pelacakan tumpukan menampilkan "cerita lengkap" dari operasi asinkron.
Tampilkan frame pihak ketiga yang diketahui dalam pelacakan tumpukan
Jika peta sumber menyertakan kolom ignoreList
, secara default, Console akan disembunyikan dari stack trace frame pihak ketiga dari sumber yang dihasilkan oleh pemaket (misalnya, webpack) atau framework (misalnya, Angular).
Untuk melihat stack trace lengkap termasuk frame pihak ketiga, klik Tampilkan N frame lainnya di bagian bawah pelacakan tumpukan.
Untuk selalu melihat stack trace lengkap, nonaktifkan Setelan > Daftar Abaikan > Otomatis tambahkan skrip pihak ketiga yang dikenal ke daftar yang diabaikan.
Mencatat permintaan XHR dan Fetch ke dalam log
Buka Setelan Konsol dan aktifkan Log XMLHttpRequests untuk mencatat semua permintaan XMLHttpRequest
dan
Fetch
ke Konsol saat terjadi.
Pesan teratas pada contoh di atas menunjukkan perilaku pengelompokan default Konsol. Contoh di bawah menunjukkan tampilan log yang sama setelah menonaktifkan pengelompokan pesan.
Mempertahankan pesan di seluruh pemuatan halaman
Secara default, Konsol akan menghapus teks setiap kali Anda memuat halaman baru. Untuk mempertahankan pesan di seluruh pemuatan halaman, Buka Setelan Konsol, lalu aktifkan kotak centang Pertahankan Log.
Sembunyikan pesan jaringan
Secara default, browser mencatat pesan jaringan ke Konsol. Misalnya, pesan teratas dalam contoh berikut mewakili 404.
Untuk menyembunyikan pesan jaringan:
- Buka Setelan Konsol.
- Centang kotak Sembunyikan Jaringan.
Tampilkan atau sembunyikan error CORS
Konsol dapat menampilkan error CORS jika permintaan jaringan gagal karena Cross-Origin Resource Sharing (CORS).
Untuk menampilkan atau menyembunyikan error CORS:
- Buka Setelan Konsol.
- Centang atau hapus centang pada kotak Tampilkan error CORS di konsol.
Jika konsol disetel untuk menampilkan error CORS dan Anda menemukannya, Anda dapat mengklik tombol berikut di samping error:
- untuk membuka permintaan dengan
TypeError
terkait CORS di panel Network. - untuk mendapatkan solusi potensial pada tab Masalah.
Memfilter pesan
Ada banyak cara untuk memfilter pesan di Console.
Memfilter pesan browser
Buka Sidebar Konsol, lalu klik Pesan Pengguna untuk hanya menampilkan pesan yang berasal dari JavaScript halaman.
Filter menurut level log
DevTools menetapkan sebagian besar tingkat keparahan metode console.*
.
Ada empat tingkat:
Verbose
Info
Warning
Error
Misalnya, console.log()
berada di grup Info
, sedangkan
console.error()
berada di grup Error
. Referensi API Konsol menjelaskan tingkat keparahan
setiap metode yang berlaku.
Setiap pesan yang dicatat oleh browser ke Konsol
juga memiliki tingkat keparahan. Anda dapat menyembunyikan tingkat pesan mana pun yang tidak Anda minati. Misalnya, jika hanya tertarik dengan pesan Error
, Anda dapat menyembunyikan 3 grup lainnya.
Klik drop-down Log Levels untuk mengaktifkan atau menonaktifkan pesan Verbose
, Info
, Warning
, atau Error
.
Anda juga dapat memfilter menurut level log dengan membuka Sidebar Konsol, lalu mengklik Errors, Warnings, Info, atau Verbose.
Memfilter pesan menurut URL
Ketik url:
diikuti dengan URL untuk hanya melihat pesan yang berasal dari URL tersebut. Setelah Anda mengetik url:
,
DevTools akan menampilkan semua URL yang relevan.
Domain juga bisa digunakan. Misalnya, jika https://example.com/a.js
dan
https://example.com/b.js
mencatat pesan ke dalam log, url:https://example.com
memungkinkan Anda berfokus pada
pesan dari 2 skrip ini.
Untuk menyembunyikan semua pesan dari URL tertentu, ketik -url:
diikuti dengan URL, misalnya, https://b.wal.co
. Ini adalah filter URL negatif.
Anda juga dapat menampilkan pesan dari satu URL dengan membuka Sidebar Konsol, meluaskan bagian Pesan Pengguna, lalu mengklik URL skrip yang berisi pesan yang ingin Anda fokuskan.
Memfilter pesan dari berbagai konteks
Misalkan Anda memiliki iklan di halaman Anda. Iklan disematkan di <iframe>
dan menghasilkan
banyak pesan di Konsol Anda. Karena iklan ini berada dalam konteks JavaScript yang berbeda, salah satu cara
untuk menyembunyikan pesannya adalah dengan membuka Setelan Konsol dan mengaktifkan kotak centang
Hanya Konteks yang Dipilih.
Memfilter pesan yang tidak cocok dengan pola ekspresi reguler
Ketik ekspresi reguler seperti /[foo]\s[bar]/
di kotak teks Filter untuk memfilter pesan
yang tidak cocok dengan pola tersebut. Spasi tidak didukung, gunakan \s
sebagai gantinya. DevTools akan memeriksa apakah pola ditemukan dalam teks pesan
atau skrip yang menyebabkan pesan dicatat ke dalam log.
Misalnya, filter berikut memfilter semua pesan yang tidak cocok dengan /[gm][ta][mi]/
.
Menelusuri teks di log
Untuk menelusuri teks dalam pesan log:
- Untuk membuka kotak penelusuran bawaan, tekan Command+F (Mac) atau Ctrl+F (Windows, Linux).
- Di bilah, ketik kueri Anda. Dalam contoh ini, kuerinya adalah
legacy
. Anda juga dapat:- Klik Match Case untuk membuat kueri peka huruf besar/kecil.
- Klik Gunakan Ekspresi Reguler untuk menelusuri menggunakan ekspresi RegEx.
- Tekan Enter. Untuk melompat ke hasil penelusuran sebelumnya atau berikutnya, tekan tombol atas atau bawah.
Jalankan JavaScript
Bagian ini berisi fitur yang terkait dengan menjalankan JavaScript di Konsol. Lihat Menjalankan JavaScript untuk panduan langsung.
Opsi penyalinan string
Konsol menghasilkan string sebagai literal JavaScript yang valid secara default. Klik kanan output, lalu pilih di antara tiga opsi penyalinan:
- Salin sebagai literal JavaScript. Meng-escape karakter khusus yang sesuai dan menggabungkan string dalam tanda kutip tunggal, tanda kutip ganda, atau tanda kutip tunggal bergantung pada kontennya.
- Menyalin konten string. Menyalin string mentah yang sama persis ke papan klip, termasuk baris baru dan karakter khusus lainnya.
- Salin sebagai literal JSON. Memformat string ke JSON yang valid.
Jalankan kembali ekspresi dari histori
Tekan tombol Panah Atas untuk melihat seluruh histori ekspresi JavaScript yang Anda jalankan sebelumnya di Konsol. Tekan Enter untuk menjalankan kembali ekspresi tersebut.
Melihat nilai ekspresi secara real-time dengan Ekspresi Langsung
Jika Anda mengetik ekspresi JavaScript yang sama di Konsol berulang kali, akan lebih mudah untuk membuat Ekspresi Langsung. Dengan Ekspresi Langsung, Anda mengetik ekspresi sekali, lalu menyematkannya ke bagian atas Konsol. Nilai ekspresi diperbarui hampir secara real-time. Lihat Tonton Nilai Ekspresi JavaScript secara Real-Time dengan Ekspresi Langsung.
Nonaktifkan Evaluasi Bersemangat
Saat Anda mengetik ekspresi JavaScript di Console, Evaluasi Eager akan menampilkan pratinjau nilai yang ditampilkan ekspresi tersebut. Buka Setelan Konsol dan nonaktifkan kotak centang Eager Evaluation untuk menonaktifkan pratinjau nilai yang ditampilkan.
Memicu aktivasi pengguna dengan evaluasi
Aktivasi pengguna adalah status sesi penjelajahan yang bergantung pada tindakan pengguna. Status "aktif" berarti pengguna sedang berinteraksi dengan halaman atau telah berinteraksi sejak pemuatan halaman.
Untuk memicu aktivasi pengguna dengan evaluasi, buka Setelan Konsol, lalu centang Evaluasi pemicu aktivasi pengguna.
Nonaktifkan pelengkapan otomatis dari histori
Saat Anda mengetik ekspresi, pop-up pelengkapan otomatis Konsol menampilkan ekspresi yang Anda jalankan
sebelumnya. Ekspresi ini diawali dengan karakter >
. Pada contoh berikut, DevTools sebelumnya mengevaluasi document.querySelector('a')
dan document.querySelector('img')
.
Buka Setelan Konsol dan nonaktifkan kotak centang Pelengkapan Otomatis Histori Dari untuk berhenti menampilkan ekspresi dari histori Anda.
Pilih konteks JavaScript
Secara default, drop-down Konteks JavaScript ditetapkan ke top, yang mewakili konteks penjelajahan dokumen utama.
Misalkan Anda memiliki iklan pada halaman yang disematkan di <iframe>
. Anda ingin menjalankan JavaScript untuk
menyesuaikan DOM iklan. Untuk melakukannya, Anda harus memilih konteks penjelajahan iklan dari drop-down
Konteks JavaScript terlebih dahulu.
Memeriksa properti objek
Konsol dapat menampilkan daftar properti interaktif objek JavaScript yang Anda tentukan.
Untuk menjelajahi daftar, ketik nama objek ke dalam Konsol, lalu tekan Enter.
Untuk memeriksa properti objek DOM, ikuti langkah-langkah di Melihat properti objek DOM.
Menemukan properti sendiri dan properti yang diwarisi
Console mengurutkan properti objek sendiri terlebih dahulu dan menandainya dalam font tebal.
Properti yang diwarisi dari rantai prototipe ditampilkan dalam font reguler. Konsol menampilkannya pada objek itu sendiri dengan mengevaluasi pengakses native yang sesuai dari objek bawaan.
Mengevaluasi pengakses kustom
Secara default, DevTools tidak mengevaluasi pengakses yang Anda buat.
Untuk mengevaluasi pengakses kustom pada suatu objek, klik (...)
.
Menemukan properti yang dapat dihitung dan tidak dapat dihitung
Properti yang dapat dihitung berwarna cerah. Properti yang tidak dapat dihitung akan dibisukan.
Properti yang dapat dihitung dapat diiterasi dengan loop for … in
atau metode Object.keys()
.
Mengidentifikasi properti pribadi instance class
Konsol menetapkan properti pribadi instance class dengan awalan #
.
Konsol juga dapat melengkapi properti pribadi secara otomatis bahkan saat Anda mengevaluasinya di luar cakupan class.
Memeriksa properti JavaScript internal
Dengan menggunakan notasi ECMAScript, Konsol menyertakan beberapa properti internal ke JavaScript dalam tanda kurung siku ganda. Anda tidak dapat berinteraksi dengan properti tersebut dalam kode Anda. Namun, sebaiknya periksa data tersebut.
Anda mungkin melihat properti internal berikut pada objek yang berbeda:
- Objek apa pun memiliki
[[Prototype]]
. - Wrapper primitif memiliki properti
[[PrimitiveValue]]
. - Objek
ArrayBuffer
memiliki properti berikut: - Selain properti khusus
ArrayBuffer
, objekWebAssembly.Memory
memiliki properti[[WebAssemblyMemory]]
. - Koleksi penting (peta dan kumpulan) memiliki properti
[[Entries]]
yang berisi entri kuncinya. - Objek
Promise
memiliki properti berikut:[[PromiseState]]
: tertunda, terpenuhi, atau ditolak[[PromiseResult]]
:undefined
jika tertunda,<value>
jika terpenuhi,<reason>
jika ditolak
- Objek
Proxy
memiliki properti berikut: objek[[Handler]]
, objek[[Target]]
, dan[[isRevoked]]
(dinonaktifkan atau tidak).
Memeriksa fungsi
Dalam JavaScript, fungsi juga merupakan objek dengan properti. Namun, jika Anda mengetik nama fungsi ke dalam Console, DevTools akan memanggilnya, bukan menampilkan propertinya.
Untuk melihat properti fungsi internal ke JavaScript, gunakan perintah console.dir().
Fungsi memiliki properti berikut:
[[FunctionLocation]]
. Link ke baris dengan definisi fungsi dalam file sumber.[[Scopes]]
. Mencantumkan nilai dan ekspresi yang dapat diakses fungsi. Untuk memeriksa cakupan fungsi selama proses debug, lihat Melihat dan mengedit properti lokal, penutupan, dan global.- Fungsi terikat memiliki properti berikut:
[[TargetFunction]]
. Targetbind()
.[[BoundThis]]
. Nilaithis
.[[BoundArgs]]
. Array argumen fungsi.
- Fungsi generator ditandai dengan properti
[[IsGenerator]]: true
. - Generator menampilkan objek iterator dan memiliki properti berikut:
[[GeneratorLocation]]
. Link ke baris dengan definisi generator di file sumber.[[GeneratorState]]
:suspended
,closed
, ataurunning.
[[GeneratorFunction]]
. Generator yang menampilkan objek.[[GeneratorReceiver]]
. Objek yang menerima nilai.
Menghapus Console
Anda dapat menggunakan salah satu alur kerja berikut untuk menghapus Konsol:
- Klik Clear Console .
- Klik kanan pesan, lalu pilih Hapus Konsol.
- Ketik
clear()
di Console, lalu tekan Enter. - Panggil
console.clear()
dari JavaScript halaman web Anda. - Tekan Control+L saat Konsol sedang fokus.