Mencatat pesan di dalam Console

Kayce Basques

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

Pesan di Konsol.

Tutorial ini dimaksudkan untuk diselesaikan secara berurutan. Tutorial 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. Ketika mengikuti alur kerja secara fisik, Anda akan lebih mudah mengingat alur kerjanya nantinya.

  1. Buka demo.

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

    Tutorial ini di sebelah kiri, dan demo di sebelah kanan.

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

    DevTools akan terbuka di sebelah kanan demo.

  4. Opsional: Pasang DevTools ke bagian bawah jendela atau lepaskan dari dok ke jendela terpisah.

    DevTools dipasang ke bagian bawah demo: DevTools dipasang ke bagian bawah demo.

    DevTools dilepas dari dok di jendela terpisah: DevTools dilepas dari dok di jendela terpisah.

Lihat pesan yang dicatat dari JavaScript

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

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

    Console setelah mengklik Log Info.

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

    DevTools membuka panel Sumber setelah Anda mengklik log.js:2.

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

  3. Buka kembali Konsol menggunakan salah satu alur kerja berikut:

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

  4. Klik tombol Peringatan Log dalam demo. Abandon Hope All Ye Who Enter dicatat ke Konsol.

    Console setelah mengklik Log Warning.

    Pesan yang diformat seperti ini adalah peringatan.

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

  6. Klik ikon Luaskan Luaskan. di depan Abandon Hope All Ye Who Enter. DevTools menampilkan pelacakan tumpukan menjelang panggilan.

    Pelacakan tumpukan.

    Stack trace memberi tahu Anda bahwa fungsi bernama logWarning dipanggil, yang kemudian disebut fungsi bernama quoteDante. Dengan kata lain, panggilan yang terjadi pertama kali berada di bagian bawah stack trace. Anda dapat mencatat pelacakan tumpukan 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.

    Pesan error.

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

    Tabel di Konsol.

    Perhatikan bahwa kolom birthday hanya diisi untuk satu baris. Periksa kode untuk mencari tahu penyebabnya.

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

    Grup pesan di Konsol.

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

    Pesan dengan format kustom di Konsol.

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

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

Melihat pesan yang dicatat oleh browser

Browser juga mencatat pesan ke Konsol. Ini biasanya terjadi saat ada masalah dengan halaman.

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

    Error 404 di Konsol.

  2. Klik Penyebab Error. Browser mencatat TypeError yang tidak tertangkap ke dalam log karena JavaScript mencoba memperbarui node DOM yang tidak ada.

    Sebuah TypeError di Konsol.

  3. Klik drop-down Log Levels dan aktifkan opsi Verbose jika dinonaktifkan. Anda akan mempelajari lebih lanjut tentang pemfilteran di bagian berikutnya. Anda harus melakukan hal ini untuk memastikan bahwa pesan berikutnya yang dicatat ke dalam log dapat dilihat. Catatan: Jika drop-down Level Default dinonaktifkan, Anda mungkin perlu menutup Sidebar Konsol. Filter berdasarkan Sumber Pesan di bawah untuk mengetahui informasi selengkapnya tentang Sidebar Konsol.

    Mengaktifkan level log Verbose.

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

    Pelanggaran di Konsol.

Memfilter pesan

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

Filter menurut level 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.

Untuk memfilter menurut level log:

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

    Menonaktifkan pesan tingkat Error di Konsol.

  2. Klik drop-down Log Levels lagi dan aktifkan kembali Errors. Pesan tingkat Error akan muncul kembali.

Filter menurut teks

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

  1. Ketikkan Dave di kotak teks Filter. Semua pesan yang tidak menyertakan string Dave akan disembunyikan. Anda mungkin juga melihat label Adolescent Irradiated Espionage Tortoises. Itu serangga kecil.

    Memfilter pesan apa pun yang tidak menyertakan `Dave`.

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

Filter menurut ekspresi reguler

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

  1. Ketikkan /^[AH]/ di kotak teks Filter. Ketik pola ini ke dalam RegExr untuk mendapatkan penjelasan mengenai tindakannya.

    Memfilter pesan apa pun yang tidak cocok dengan pola `/^[AH]/`.

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

Memfilter menurut sumber pesan

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

  1. Klik Show Console Sidebar Tampilkan Sidebar Konsol..

    Sidebar.

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

    Melihat sumber pesan di Sidebar.

Filter menurut pesan pengguna

Sebelumnya, saat Anda mengklik Log Info, skrip yang disebut console.log('Hello, Console!') untuk mencatat pesan ke Konsol. Pesan yang dicatat dari JavaScript seperti ini disebut sebagai pesan pengguna. Sebaliknya, saat Anda mengklik Cause 404, browser akan 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 mengecualikan pesan browser dan hanya menampilkan pesan pengguna.

  1. Klik 9 Pesan Pengguna. Pesan browser akan disembunyikan.

    Memfilter pesan browser.

  2. Klik 12 Pesan untuk menampilkan kembali semua pesan.

Gunakan Konsol bersama panel lainnya

Bagaimana jika Anda mengedit gaya, tetapi Anda perlu memeriksa log Konsol dengan cepat? Gunakan Panel Samping.

  1. Klik tab Elemen.

  2. Tekan Escape. Tab Konsol di Panel Samping akan terbuka. Ini memiliki semua fitur Konsol yang telah Anda gunakan sepanjang tutorial ini.

    Tab **Konsol** di Panel Samping.

Langkah berikutnya

Selamat, Anda telah menyelesaikan tutorial ini. Klik Berikan Piala untuk menerima piala.