Referensi fitur konsol

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Halaman ini merupakan referensi fitur yang terkait dengan Konsol Chrome DevTools. Anda dianggap sudah terbiasa menggunakan Konsol 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 Konsol API. Untuk referensi tentang fungsi seperti monitorEvents(), lihat Referensi API Utilitas Konsol.

Buka Konsol

Anda dapat membuka Konsol sebagai panel atau sebagai tab di Panel Samping.

Buka panel Konsol

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

Console.

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

Perintah untuk menampilkan panel Konsol.

Membuka Konsol di Panel Samping

Tekan Escape atau klik Customize And Control DevTools Menyesuaikan dan Mengontrol DevTools., lalu pilih Show Console Drawer.

Tampilkan Panel Samping Konsol.

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

Tab Konsol di Panel Samping.

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

Perintah untuk menampilkan tab Console di Panel Samping.

Buka Setelan Konsol

Klik Setelan. Console Settings di pojok kanan atas Konsol.

Setelan Konsol.

Link di bawah menjelaskan setiap setelan:

Klik Tampilkan Sidebar Konsol Tampilkan Sidebar Konsol. untuk menampilkan Sidebar yang berguna untuk pemfilteran.

Sidebar Konsol.

Melihat pesan

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

Nonaktifkan pengelompokan pesan

Buka Setelan Konsol dan nonaktifkan Grup yang mirip untuk menonaktifkan perilaku pengelompokan pesan default Konsol. Lihat Mencatat permintaan XHR dan Mengambil ke dalam log untuk mengetahui contohnya.

Menampilkan pesan dari titik henti sementara

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

Console menandai pesan yang dibuat oleh titik henti sementara dan logpoint bersyarat.

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

Melihat pelacakan tumpukan

Konsol secara otomatis menangkap pelacakan tumpukan 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 pelacakan tumpukan, klik ikon luaskan Luaskan. di samping error atau peringatan.

Stack trace.

Melihat penyebab error dalam stack trace

Konsol dapat menunjukkan rantai penyebab error di stack trace, jika ada.

Untuk mempermudah proses debug, Anda dapat menentukan penyebab error saat menangkap dan menampilkan kembali error. Saat Konsol menjalankan rantai penyebab, konsol tersebut mencetak setiap stack error dengan awalan Caused by:, sehingga Anda dapat menemukan error aslinya.

Rantai error yang menyebabkan diawali dengan 'Caused by:' di pelacakan tumpukan.

Melihat pelacakan tumpukan asinkron

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

Dalam hal ini, stack trace menampilkan "cerita lengkap" dari operasi asinkron.

Pelacakan tumpukan asinkron.

Tampilkan frame pihak ketiga yang diketahui dalam stack trace

Jika peta sumber menyertakan kolom ignoreList, secara default, Konsol akan menyembunyikan frame pihak ketiga dari pelacakan tumpukan 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 stack trace.

Tampilkan N frame lagi.

Untuk selalu melihat stack trace lengkap, nonaktifkan setelan Setelan. Setelan > Daftar Abaikan > Tambahkan skrip pihak ketiga yang dikenal secara otomatis untuk mengabaikan daftar.

Otomatis tambahkan skrip pihak ketiga yang diketahui ke daftar yang diabaikan.

Catat permintaan XHR dan Fetch

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

Mencatat log permintaan XMLHttpRequest dan Fetch.

Pesan teratas dalam contoh di atas menunjukkan perilaku pengelompokan default Konsol. Contoh di bawah menunjukkan tampilan log yang sama setelah menonaktifkan pengelompokan pesan.

Tampilan permintaan XMLHttpRequest dan Fetch yang dicatat setelah pemisahan.

Mempertahankan pesan di seluruh pemuatan halaman

Secara default, Konsol akan dihapus 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.

Pesan 404 di Konsol.

Untuk menyembunyikan pesan jaringan:

  1. Buka Setelan Konsol.
  2. Aktifkan kotak centang 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:

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

Tampilkan error CORS di konsol.

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

Tombol Network and Issues.

Memfilter pesan

Ada banyak cara untuk memfilter pesan di Konsol.

Memfilter pesan browser

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

Melihat pesan pengguna.

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 Console API menjelaskan tingkat keparahan setiap metode yang berlaku.

Setiap pesan yang dicatat browser ke Konsol untuk memiliki tingkat keparahan juga. Anda dapat menyembunyikan tingkat pesan apa pun yang tidak menarik bagi Anda. 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.

Menu drop-down Log Levels.

Anda juga dapat memfilter menurut tingkat log dengan Tampilkan Sidebar Konsol. membuka Sidebar Console, lalu mengklik Errors, Warnings, Info, atau Verbose.

Menggunakan Bilah Sisi untuk melihat peringatan.

Memfilter pesan berdasarkan 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.

Filter URL.

Domain juga dapat digunakan. Misalnya, jika https://example.com/a.js dan https://example.com/b.js mencatat pesan ke dalam log, url:https://example.com akan memungkinkan Anda berfokus pada pesan dari 2 skrip ini.

Untuk menyembunyikan semua pesan dari URL yang ditentukan, ketik -url: diikuti dengan URL, misalnya, https://b.wal.co. Ini adalah filter URL negatif.

Filter URL negatif. DevTools menyembunyikan semua pesan yang cocok dengan URL yang ditentukan.

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.

Melihat pesan dari skrip tertentu.

Memfilter pesan dari konteks yang berbeda

Misalkan Anda memiliki iklan di halaman Anda. Iklan disematkan di <iframe> dan menghasilkan banyak pesan di Konsol. 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 memeriksa apakah pola ditemukan dalam teks pesan atau skrip yang menyebabkan pesan dicatat ke dalam log.

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

Memfilter pesan yang tidak cocok dengan /[gm][ta][mi]/.

Untuk menelusuri teks dalam pesan log:

  1. Untuk membuka kotak penelusuran bawaan, tekan Command+F (Mac) atau Ctrl+F (Windows, Linux).
  2. Pada bilah, ketik kueri Anda. Dalam contoh ini, kuerinya adalah legacy. Mengetik kueri. Anda juga dapat:
    • Klik Cocokkan huruf besar/kecil. Match Case untuk membuat kueri peka huruf besar/kecil.
    • Klik Tombol RegEx. Use Regular Expression 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 panduan praktik.

Opsi penyalinan string

Secara default, konsol menghasilkan string sebagai literal JavaScript yang valid. 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 terbalik, bergantung pada kontennya.
  • Salin 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.

Opsi salin.

Menjalankan kembali ekspresi dari histori

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

Menonton nilai ekspresi secara real-time dengan Ekspresi Langsung

Jika Anda sering mengetik ekspresi JavaScript yang sama di Konsol berulang kali, akan lebih mudah untuk membuat Ekspresi Langsung. Dengan Ekspresi Langsung, Anda mengetik ekspresi satu kali, lalu menyematkannya ke bagian atas Konsol. Nilai ekspresi diperbarui hampir secara real-time. Lihat Menonton Nilai Ekspresi JavaScript secara Real-Time dengan Ekspresi Live.

Nonaktifkan Evaluasi Bersemangat

Saat Anda mengetik ekspresi JavaScript di Konsol, Eager Evaluation 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 halaman dimuat.

Untuk memicu aktivasi pengguna dengan evaluasi apa pun, buka Setelan Konsol, lalu centang Kotak centang. Evaluasi pemicu aktivasi pengguna.

Nonaktifkan 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 >. Pada contoh berikut, DevTools sebelumnya mengevaluasi document.querySelector('a') dan document.querySelector('img').

Pop-up pelengkapan otomatis yang menampilkan ekspresi dari histori.

Buka Setelan Konsol dan nonaktifkan kotak centang Pelengkapan Otomatis Dari Histori untuk berhenti menampilkan ekspresi dari histori Anda.

Pilih konteks JavaScript

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

Menu drop-down Konteks JavaScript.

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

Memilih konteks JavaScript yang berbeda.

Memeriksa properti objek

Konsol dapat menampilkan daftar properti interaktif objek JavaScript yang Anda tentukan.

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

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

Menempatkan properti sendiri dan properti yang diwariskan

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

Menampilkan properti objek.

Properti yang diwarisi dari rantai prototipe ditampilkan dalam font biasa. Konsol menampilkannya pada objek itu sendiri dengan mengevaluasi pengakses native yang sesuai dari objek bawaan.

Menampilkan properti yang diwarisi.

Mengevaluasi pengakses kustom

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

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 dan tidak dapat dihitung. Properti yang dapat dihitung dapat diiterasi dengan loop for … in atau metode Object.keys().

Menemukan properti pribadi instance class

Konsol menentukan properti pribadi dari instance class dengan awalan #.

Properti pribadi instance class.

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

Pelengkapan otomatis properti pribadi.

Memeriksa properti JavaScript internal

Dengan menggunakan notasi ECMAScript, Konsol akan menyertakan beberapa properti internal untuk JavaScript dalam tanda kurung siku ganda. Anda tidak dapat berinteraksi dengan properti tersebut dalam kode. Namun, sebaiknya periksa kembali data tersebut.

Anda mungkin melihat properti internal berikut di objek yang berbeda:

Memeriksa fungsi

Di JavaScript, fungsi juga merupakan objek dengan properti. Namun, jika Anda mengetik nama fungsi di Console, DevTools akan memanggilnya, bukan menampilkan properti.

Untuk melihat properti fungsi internal bagi JavaScript, gunakan perintah console.dir().

Memeriksa properti suatu fungsi.

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]]. Target bind().
    • [[BoundThis]]. Nilai this.
    • [[BoundArgs]]. Array argumen fungsi. Fungsi terikat.
  • Fungsi generator ditandai dengan properti [[IsGenerator]]: true. Fungsi generator.
  • 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. Iterator.

Menghapus Console

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

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