Referensi fitur konsol

Halaman ini adalah referensi fitur yang terkait dengan Konsol Chrome DevTools. Panduan ini mengasumsikan bahwa Anda sudah terbiasa menggunakan Konsol untuk melihat pesan yang dicatat dan menjalankan JavaScript. Jika tidak, lihat Mulai.

Jika Anda mencari referensi API tentang fungsi seperti console.log(), lihat Referensi Console API. Untuk mengetahui referensi tentang fungsi seperti monitorEvents(), lihat Referensi Console Utilities API.

Buka Konsol

Anda dapat membuka Konsol sebagai panel atau sebagai tab di Drawer.

Membuka panel Konsol

Tekan Control+Shift+J atau Command+Option+J (Mac).

Untuk membuka Konsol dari Command Menu, mulai ketik Console, lalu jalankan perintah Show Console yang memiliki badge Panel di sampingnya.

Membuka Konsol di Panel Geser

Tekan Escape atau klik Sesuaikan dan Kontrol DevTools , lalu pilih Tampilkan Panel Konsol.

Panel samping akan muncul di bagian bawah jendela DevTools, dengan tab Console terbuka.

Untuk membuka tab Konsol dari Command Menu, mulai ketik Console, lalu jalankan perintah Show Console yang memiliki badge Drawer di sampingnya.

Membuka Setelan Konsol

Klik Setelan Konsol di pojok kanan atas Konsol.

Link di bawah ini menjelaskan setiap setelan:

• Menyembunyikan jaringan
• Pertahankan log
• Hanya konteks yang dipilih
• Mengelompokkan pesan serupa di konsol
• Tampilkan error CORS di konsol
• Mencatat XMLHttpRequests
• Evaluasi segera
• Pelengkapan otomatis dari histori

Membuka Sidebar Konsol

Klik Tampilkan Sidebar Konsol untuk menampilkan Sidebar, yang berguna untuk memfilter.

Melihat pesan

Bagian ini berisi fitur yang mengubah cara pesan ditampilkan di Konsol. Lihat Melihat pesan untuk mendapatkan panduan langsung.

Menonaktifkan pengelompokan pesan

Buka Setelan Konsol dan nonaktifkan Kelompokkan yang serupa untuk menonaktifkan perilaku pengelompokan pesan default Konsol. Lihat Mencatat permintaan XHR dan Fetch untuk mengetahui contohnya.

Melihat pesan dari titik henti sementara

Konsol menandai pesan yang dipicu oleh titik henti sementara dengan cara berikut:

• Panggilan console.* di titik henti sementara bersyarat dengan tanda tanya berwarna oranye ?
• Pesan Logpoint dengan dua titik berwarna merah muda ..

Untuk membuka editor titik henti sementara inline di panel Sources, klik link anchor di samping pesan titik henti sementara.

Melihat stack trace

Konsol secara otomatis merekam rekaman aktivitas stack untuk 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 stack trace, klik ikon luaskan di samping error atau peringatan.

Melihat penyebab error dalam stack trace

Konsol dapat menampilkan rangkaian penyebab error dalam stack trace, jika ada.

Untuk mempermudah proses debug, Anda dapat menentukan penyebab error saat menangkap dan melempar ulang error. Saat Console menelusuri rantai penyebab, Console akan mencetak setiap stack error dengan awalan Caused by:, sehingga Anda dapat menemukan error asli.

Melihat pelacakan tumpukan asinkron

Jika didukung oleh framework yang Anda gunakan atau saat menggunakan primitif penjadwalan browser secara langsung, seperti setTimeout, DevTools dapat melacak operasi asinkron dengan menautkan kedua bagian kode asinkron.

Dalam hal ini, stack trace menunjukkan "kisah lengkap" operasi asinkron.

Menampilkan frame pihak ketiga yang diketahui dalam rekaman aktivitas stack

Jika peta sumber menyertakan kolom ignoreList, secara default, Konsol menyembunyikan frame pihak ketiga dari stack trace dari sumber yang dihasilkan oleh bundler (misalnya, webpack) atau framework (misalnya, Angular).

Untuk melihat rekaman aktivitas lengkap termasuk frame pihak ketiga, klik Tampilkan N frame lainnya di bagian bawah rekaman aktivitas.

Untuk selalu melihat stack trace lengkap, nonaktifkan setelan Setelan > Daftar yang Diabaikan > Otomatis tambahkan skrip pihak ketiga yang diketahui ke daftar yang diabaikan.

Mencatat permintaan XHR dan Fetch

Buka Setelan Konsol dan aktifkan Log XMLHttpRequests untuk mencatat semua permintaan XMLHttpRequest dan Fetch ke Konsol saat terjadi.

Pesan teratas dalam 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 dibersihkan setiap kali Anda memuat halaman baru. Untuk mempertahankan pesan di seluruh pemuatan halaman, Buka Setelan Konsol, lalu centang kotak Pertahankan Log.

Menyembunyikan pesan jaringan

Secara default, browser mencatat pesan jaringan ke Console. Misalnya, pesan teratas dalam contoh berikut merepresentasikan 404.

Untuk menyembunyikan pesan jaringan:

1. Buka Setelan Konsol.
2. Aktifkan kotak centang Sembunyikan Jaringan.

Menampilkan atau menyembunyikan error CORS

Konsol dapat menampilkan error CORS jika permintaan jaringan gagal karena Cross-Origin Resource Sharing (CORS).

Untuk menampilkan atau menyembunyikan error CORS:

1. Buka Setelan Konsol.
2. Centang atau hapus centang kotak Tampilkan error CORS di konsol.

Jika konsol disetel untuk menampilkan error CORS dan Anda menjumpainya, Anda dapat mengklik tombol berikut di samping error:

• untuk membuka permintaan dengan TypeError terkait CORS di panel Network.
• untuk mendapatkan solusi potensial di tab Masalah.

Memfilter pesan

Ada banyak cara untuk memfilter pesan di Konsol.

Mengecualikan pesan browser

Buka Sidebar Konsol dan klik Pesan Pengguna untuk hanya menampilkan pesan yang berasal dari JavaScript halaman.

Memfilter menurut tingkat log

DevTools menetapkan tingkat keparahan untuk sebagian besar 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 browser ke Konsol juga memiliki tingkat keparahan. Anda dapat menyembunyikan tingkat pesan apa pun yang tidak Anda minati. Misalnya, jika Anda hanya tertarik dengan pesan Error, Anda dapat menyembunyikan 3 grup lainnya.

Klik drop-down Tingkat Log untuk mengaktifkan atau menonaktifkan pesan Verbose, Info, Warning, atau Error.

Anda juga dapat memfilter menurut tingkat log dengan membuka Sidebar Konsol, lalu mengklik Error, Peringatan, 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 berfungsi. Misalnya, jika https://example.com/a.js dan https://example.com/b.js mencatat pesan, 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 konteks yang berbeda

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 mencentang kotak Selected Context Only.

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. DevTools memeriksa apakah pola ditemukan dalam teks pesan atau skrip yang menyebabkan pesan dicatat.

Misalnya, berikut akan memfilter semua pesan yang tidak cocok dengan /[gm][ta][mi]/.

Menelusuri teks dalam log

Untuk menelusuri teks dalam pesan log:

1. Untuk membuka kotak penelusuran bawaan, tekan Command+F (Mac) atau Ctrl+F (Windows, Linux).
2. Di kolom, ketik kueri Anda. Dalam contoh ini, kuerinya adalah legacy. Secara opsional, Anda dapat:
   • Klik Cocokkan Huruf untuk membuat kueri Anda peka huruf besar/kecil.
   • Klik Gunakan Ekspresi Reguler untuk menelusuri menggunakan ekspresi RegEx.
3. 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 mengetahui langkah-langkah praktisnya.

Opsi salin string

Konsol menampilkan string sebagai literal JavaScript yang valid secara default. Klik kanan output dan pilih di antara tiga opsi salin:

• Salin sebagai literal JavaScript. Melakukan escape pada karakter khusus yang sesuai dan membungkus string dalam tanda petik tunggal, tanda petik ganda, atau tanda petik terbalik, bergantung pada kontennya.
• Salin konten string. Menyalin string mentah persis ke papan klip, termasuk baris baru dan karakter khusus lainnya.
• Salin sebagai literal JSON. Memformat string ke JSON yang valid.

Menjalankan kembali ekspresi sebelumnya dan menghapus histori

Tekan tombol Panah Atas untuk melihat histori ekspresi JavaScript yang Anda jalankan sebelumnya di Konsol. Tekan Enter untuk menjalankan kembali ekspresi tersebut.

Untuk menghapus histori konsol, klik kanan ruang kosong di Konsol, lalu pilih Hapus histori konsol dari menu konteks.

Menghapus, menyalin, meluaskan, menciutkan, dan menyimpan pesan

Untuk menghapus jendela Console, lakukan salah satu hal berikut:

• Klik block Clear console di panel tindakan di bagian atas.
• Tekan Ctrl+L atau Cmd+K.
• Klik kanan ruang kosong di Konsol, lalu pilih Hapus konsol dari menu konteks.

Untuk meluaskan atau menciutkan semua pesan, klik luaskan Luaskan semua atau ciutkan Ciutkan semua di panel tindakan di bagian atas.

Dari menu konteks, Anda juga dapat:

• Salin konsol: Menyalin semua pesan saat ini ke papan klip, tetapi bukan histori perintah sebelumnya.
• Simpan sebagai...: Menyimpan semua pesan saat ini ke file .log teks biasa.

Memantau nilai ekspresi secara real-time dengan Ekspresi Langsung

Jika Anda sering mengetik ekspresi JavaScript yang sama di Konsol, Anda mungkin merasa lebih mudah membuat Ekspresi Langsung. Dengan Ekspresi Live, Anda mengetik ekspresi sekali dan lalu menyematkannya ke bagian atas Konsol. Nilai ekspresi diperbarui hampir secara real-time. Lihat Memantau Nilai Ekspresi JavaScript Secara Real-Time dengan Ekspresi Langsung.

Menonaktifkan Evaluasi Segera

Saat Anda mengetik ekspresi JavaScript di Konsol, Evaluasi Langsung akan menampilkan pratinjau nilai yang ditampilkan ekspresi tersebut. Buka Setelan Konsol dan hapus centang pada kotak Evaluasi Langsung untuk menonaktifkan pratinjau nilai yang ditampilkan.

Memicu aktivasi pengguna dengan evaluasi

Pengaktifan pengguna adalah status sesi penjelajahan yang bergantung pada tindakan pengguna. Status "aktif" berarti pengguna saat ini berinteraksi dengan halaman atau telah berinteraksi sejak pemuatan halaman.

Untuk memicu aktivasi pengguna dengan evaluasi apa pun, buka Setelan Konsol dan centang Perlakukan evaluasi kode sebagai tindakan pengguna.

Menonaktifkan pelengkapan otomatis dari histori

Saat Anda mengetik ekspresi, pop-up pelengkapan otomatis Konsol akan menampilkan ekspresi yang Anda jalankan sebelumnya. Ekspresi ini diawali dengan karakter >. Dalam contoh berikut, DevTools sebelumnya mengevaluasi document.querySelector('a') dan document.querySelector('img').

Buka Setelan Konsol dan hapus centang kotak Lengkapi Otomatis dari Histori untuk berhenti menampilkan ekspresi dari histori Anda.

Pilih konteks JavaScript

Secara default, drop-down Konteks JavaScript disetel ke top, yang merepresentasikan konteks penjelajahan dokumen utama.

Misalnya, Anda memiliki iklan di halaman yang disematkan dalam <iframe>. Anda ingin menjalankan JavaScript untuk mengubah DOM iklan. Untuk melakukannya, Anda harus memilih konteks penjelajahan iklan terlebih dahulu dari drop-down Konteks JavaScript.

Memeriksa properti objek

Console dapat menampilkan daftar properti interaktif dari objek JavaScript yang Anda tentukan.

Untuk menjelajahi daftar, ketik nama objek ke dalam Console, lalu tekan Enter.

Untuk memeriksa properti objek DOM, ikuti langkah-langkah dalam Melihat properti objek DOM.

Menemukan properti sendiri dan properti yang diwariskan

Konsol mengurutkan properti objek sendiri terlebih dahulu dan menandainya dalam font tebal.

Properti yang diwarisi dari rantai prototipe menggunakan font reguler. Console menampilkannya pada objek itu sendiri dengan mengevaluasi aksesor native yang sesuai dari objek bawaan.

Mengevaluasi pengakses kustom

Secara default, DevTools tidak mengevaluasi pengakses yang Anda buat. Untuk mengevaluasi pengakses kustom pada objek, klik (...).

Mendeteksi properti yang dapat di-enumerasi dan tidak dapat di-enumerasi

Properti yang dapat di-enumerate berwarna cerah. Properti yang tidak dapat di-enum akan diredam. Properti yang dapat di-enumerasi dapat diiterasi dengan loop for … in atau metode Object.keys().

Mendeteksi properti pribadi instance class

Konsol menetapkan properti pribadi dari instance class dengan awalan #.

Konsol juga dapat melengkapi otomatis properti pribadi meskipun Anda mengevaluasinya di luar cakupan class.

Memeriksa properti JavaScript internal

Dengan meminjam notasi ECMAScript, Console menyertakan beberapa properti internal JavaScript dalam tanda kurung ganda. Anda tidak dapat berinteraksi dengan properti tersebut dalam kode. Namun, mungkin berguna untuk memeriksanya.

Anda mungkin melihat properti internal berikut pada objek yang berbeda:

• Setiap objek memiliki [[Prototype]].
• Wrapper primitif memiliki properti [[PrimitiveValue]].
• Objek ArrayBuffer memiliki properti berikut:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• Selain properti khusus ArrayBuffer, objek WebAssembly.Memory memiliki properti [[WebAssemblyMemory]].
• Koleksi dengan kunci (peta dan set) memiliki properti [[Entries]] yang berisi entri dengan kunci.
• Objek Promise memiliki properti berikut:
  • [[PromiseState]]: tertunda, dipenuhi, 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

Di JavaScript, fungsi juga merupakan objek dengan properti. Namun, jika Anda mengetik nama fungsi ke dalam Konsol, 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 oleh fungsi. Untuk memeriksa cakupan fungsi selama proses debug, lihat Melihat dan mengedit properti lokal, penutupan, dan global.
• Fungsi terikat memiliki properti berikut:
  • [[TargetFunction]]. Target bind().
  • [[BoundThis]]. Nilai this.
  • [[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 dalam file sumber.
  • [[GeneratorState]]: suspended, closed, atau running.
  • [[GeneratorFunction]]. Generator yang menampilkan objek.
  • [[GeneratorReceiver]]. Objek yang menerima nilai.

Menghapus Konsol

Anda dapat menggunakan salah satu alur kerja berikut untuk menghapus Konsol:

• Klik Hapus Konsol .
• Klik kanan pesan, lalu pilih Clear Console.
• Ketik clear() di Konsol, lalu tekan Enter.
• Panggil console.clear() dari JavaScript halaman web Anda.
• Tekan Control+L saat Konsol menjadi fokus.