Mencatat pesan di dalam Console

Kayce Basques

Tutorial interaktif ini menunjukkan cara mencatat dan memfilter pesan di Konsol Chrome DevTools.

Tutorial ini harus diselesaikan secara berurutan. Panduan ini mengasumsikan bahwa Anda memahami dasar-dasar pengembangan web, seperti cara menggunakan JavaScript untuk menambahkan interaktivitas ke halaman.

Menyiapkan demo dan DevTools

Tutorial ini dirancang agar Anda dapat membuka demo dan mencoba semua alur kerja sendiri. Saat Anda mengikuti secara fisik, Anda cenderung mengingat alur kerja nanti.

1. Buka demo.

2. Opsional: Pindahkan demo ke jendela terpisah. Dalam contoh ini, tutorial berada di sebelah kiri, dan demo berada di sebelah kanan.

   

3. Fokuskan demo, lalu tekan Control+Shift+J atau Command+Option+J (Mac) untuk membuka DevTools. Secara default, DevTools akan terbuka di sebelah kanan demo.

   

4. Opsional: Sematkan DevTools ke bagian bawah jendela atau lepaskan sematannya ke jendela terpisah.

   DevTools dikaitkan ke bagian bawah demo:

   DevTools dilepas kaitannya di jendela terpisah:

Melihat pesan yang dicatat dari JavaScript

Sebagian besar pesan yang Anda lihat di Konsol berasal dari developer web yang menulis JavaScript halaman. Tujuan bagian ini adalah memperkenalkan berbagai jenis pesan yang kemungkinan akan Anda lihat di Konsol, dan menjelaskan cara mencatat setiap jenis pesan sendiri dari JavaScript Anda.

1. Klik tombol Log Info di demo. Hello, Console! dicatat ke Konsol.

   

2. Di samping pesan Hello, Console! di Console, klik log.js:2. Panel Sumber akan terbuka dan menandai baris kode yang menyebabkan pesan dicatat ke Konsol.

   

   Pesan dicatat saat JavaScript halaman memanggil console.log('Hello, Console!').

3. Kembali ke Konsol menggunakan salah satu alur kerja berikut:

   • Klik tab Konsol.
   • Tekan Control+[ atau Command+[ (Mac) hingga Console dalam fokus.
   • Buka Menu Perintah, mulai ketik Console, pilih perintah Show Console Panel, lalu tekan Enter.

4. Klik tombol Log Warning di demo. Abandon Hope All Ye Who Enter dicatat ke Konsol.

   

   Pesan yang diformat seperti ini adalah peringatan.

5. Opsional: Klik log.js:12 untuk melihat kode yang menyebabkan pesan diformat seperti ini, lalu kembali ke Console setelah selesai. Lakukan ini setiap kali Anda ingin melihat kode yang menyebabkan pesan dicatat dengan cara tertentu.

6. Klik ikon Luaskan di depan Abandon Hope All Ye Who Enter. DevTools menampilkan stack trace yang mengarah ke panggilan.

   

   Stack trace memberi tahu Anda bahwa fungsi bernama logWarning dipanggil, yang pada gilirannya memanggil fungsi bernama quoteDante. Dengan kata lain, panggilan yang terjadi pertama kali berada di bagian bawah rekaman aktivitas. Anda dapat mencatat rekaman aktivitas stack kapan saja dengan memanggil console.trace().

7. Klik Log Error. Pesan error berikut dicatat: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Klik Log Table. Tabel tentang artis terkenal dicatat ke Konsol.

   

   Perhatikan bagaimana kolom birthday hanya diisi untuk satu baris. Periksa kode untuk mengetahui alasannya.

9. Klik Log Group. Nama 4 kura-kura terkenal yang memberantas kejahatan dikelompokkan dalam label Adolescent Irradiated Espionage Tortoises.

   

10. Klik Log Kustom. Pesan dengan batas merah dan latar belakang biru dicatat ke Konsol.

    

Ide utamanya di sini adalah bahwa saat Anda ingin mencatat pesan ke Konsol dari JavaScript, Anda menggunakan salah satu metode console. Setiap metode memformat pesan secara berbeda.

Bahkan ada lebih banyak metode daripada yang telah ditunjukkan di bagian ini. Di akhir tutorial, Anda akan mempelajari cara menjelajahi metode lainnya.

Melihat pesan yang dicatat oleh browser

Browser juga mencatat pesan ke Konsol. Hal ini biasanya terjadi jika ada masalah pada halaman.

1. Klik Cause 404. Browser mencatat error jaringan 404 karena JavaScript halaman mencoba mengambil file yang tidak ada.

   

2. Klik Cause Error. Browser mencatat TypeError yang tidak tertangkap karena JavaScript mencoba memperbarui node DOM yang tidak ada.

   

3. Klik drop-down Tingkat Log, lalu aktifkan opsi Panjang jika dinonaktifkan. Anda akan mempelajari lebih lanjut pemfilteran di bagian berikutnya. Anda harus melakukannya untuk memastikan bahwa pesan berikutnya yang Anda catat terlihat. Catatan: Jika drop-down Tingkat Default dinonaktifkan, Anda mungkin perlu menutup Sidebar Konsol. Filter menurut Sumber Pesan di bawah untuk mengetahui informasi selengkapnya tentang Sidebar Konsol.

   

4. Klik Penyebab Pelanggaran. Halaman menjadi tidak responsif selama beberapa detik, lalu browser mencatat pesan [Violation] 'click' handler took 3000ms ke Konsol. Durasi persisnya dapat bervariasi.

   

Memfilter pesan

Di beberapa halaman, Anda akan melihat Konsol dibanjiri pesan. DevTools menyediakan berbagai cara untuk memfilter pesan yang tidak relevan dengan tugas yang sedang dikerjakan.

Poin penting: Konsol hanya memfilter pesan output, semua input yang Anda ketik ke dalam Konsol akan tetap ada di sana.

Memfilter menurut tingkat log

Setiap metode console.* diberi tingkat keparahan: Verbose, Info, Warning, atau Error. Misalnya, console.log() adalah pesan tingkat Info, sedangkan console.error() adalah pesan tingkat Error.

Catatan: Untuk mengetahui daftar lengkap metode console.* dan tingkat keparahannya, lihat referensi Console API.

Untuk memfilter menurut tingkat log:

1. Klik drop-down Tingkat Log dan nonaktifkan Error. Level dinonaktifkan jika tidak ada lagi tanda centang di sampingnya. Pesan tingkat Error akan hilang.

   

2. Klik kembali drop-down Tingkat Log dan aktifkan kembali Error. Pesan tingkat Error muncul kembali.

Poin penting: Konsol selalu mengingat filter drop-down yang Anda terapkan. Data ini tetap ada di semua halaman serta saat halaman, DevTools, dan Chrome dimuat ulang. Untuk menerapkan filter sementara dengan cepat, gunakan Sidebar.

Memfilter menurut teks

Jika Anda hanya ingin melihat pesan yang menyertakan string yang sama persis, ketik string tersebut ke dalam kotak Filter.

1. Ketik Dave di kotak Filter. Semua pesan yang tidak menyertakan string Dave akan disembunyikan.

   

2. Hapus Dave dari kotak Filter. Semua pesan akan muncul kembali.

Memfilter menurut ekspresi reguler

Jika Anda ingin menampilkan semua pesan yang menyertakan pola teks, bukan string tertentu, gunakan ekspresi reguler.

1. Ketik /^[AH]/ di kotak Filter. Ketik pola ini ke RegExr untuk mendapatkan penjelasan tentang fungsinya.

   

2. Hapus /^[AH]/ dari kotak Filter. Semua pesan dapat dilihat kembali.

Memfilter menurut sumber pesan

Jika Anda hanya ingin melihat pesan yang berasal dari URL tertentu, gunakan Sidebar.

Poin penting: Filter sidebar bersifat sementara. Konsol tidak mempertahankan filter tersebut di semua halaman serta pemuatan ulang halaman, DevTools, dan Chrome.

1. Klik Tampilkan Sidebar Konsol .

   

2. Klik ikon Luaskan di samping 12 Pesan. Sidebar menampilkan daftar URL yang menyebabkan pesan dicatat. Misalnya, log.js menyebabkan 11 pesan.

   

Memfilter menurut pesan pengguna

Sebelumnya, saat Anda mengklik Log Info, skrip bernama console.log('Hello, Console!') akan dipanggil untuk mencatat pesan ke Konsol. Pesan yang dicatat dari JavaScript seperti ini disebut pesan pengguna. Sebaliknya, saat Anda mengklik Cause 404, browser mencatat pesan tingkat Error yang menyatakan bahwa resource yang diminta tidak dapat ditemukan. Pesan seperti itu dianggap sebagai pesan browser. Anda dapat menggunakan Sidebar untuk memfilter pesan browser dan hanya menampilkan pesan pengguna.

1. Klik 9 Pesan Pengguna. Pesan browser disembunyikan.

   

2. Klik 12 Pesan untuk menampilkan semua pesan lagi.

Menggunakan Konsol bersama dengan panel lainnya

Bagaimana jika Anda sedang mengedit gaya, tetapi Anda perlu memeriksa log Konsol dengan cepat untuk mencari sesuatu? Gunakan Drawer.

1. Klik tab Elemen.

2. Tekan Escape. Tab Console di Drawer akan terbuka. Alat ini memiliki semua fitur Konsol yang telah Anda gunakan di sepanjang tutorial ini.

   

Langkah berikutnya

Selamat, Anda telah menyelesaikan tutorial ini. Klik Dispense Trophy untuk menerima trofi Anda.

• Lihat Referensi Konsol untuk mempelajari lebih lanjut fitur dan alur kerja yang terkait dengan UI Konsol.
• Lihat Referensi API Konsol untuk mempelajari lebih lanjut semua metode console yang didemonstrasikan dalam Melihat pesan yang dicatat dari JavaScript dan jelajahi metode console lainnya yang tidak dibahas dalam tutorial ini.
• Lihat Mulai untuk mempelajari hal-hal lain yang dapat Anda lakukan dengan DevTools.
• Lihat Memformat dan menata gaya pesan di Konsol untuk mempelajari lebih lanjut semua metode pemformatan dan penataan gaya console.