Mencatat pesan di dalam Console

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

Pesan di Konsol.

Tutorial ini dimaksudkan untuk 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. Jika mengikutinya secara fisik, Anda akan lebih 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.

    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 akan terbuka di sebelah kanan demo.

    DevTools akan terbuka di sebelah kanan demo.

  4. Opsional: Dokatkan DevTools ke bagian bawah jendela atau lepaskan kaitannya ke jendela terpisah.

    DevTools dikaitkan ke bagian bawah demo: DevTools dikaitkan ke bagian bawah demo.

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

Melihat pesan yang dicatat ke dalam log dari JavaScript

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

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

    Konsol setelah mengklik Info Log.

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

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

    Pesan dicatat ke dalam log 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 menjadi fokus.
    • Buka Menu Perintah, mulai ketik Console, pilih perintah Show Console Panel, lalu tekan Enter.
  4. Klik tombol Log Warning dalam demo. Abandon Hope All Ye Who Enter dicatat ke Konsol.

    Konsol setelah mengklik Peringatan Log.

    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 Konsol setelah selesai. Lakukan ini setiap kali Anda ingin melihat kode yang menyebabkan pesan dicatat ke dalam log dengan cara tertentu.

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

    Stack trace.

    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 pelacakan tumpukan. Anda dapat mencatat pelacakan tumpukan kapan saja dengan memanggil console.trace().

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

    Pesan error.

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

    Tabel di 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 memerangi kejahatan dikelompokkan dalam label Adolescent Irradiated Espionage Tortoises.

    Sekelompok pesan di Konsol.

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

    Pesan dengan format kustom di Konsol.

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

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 ke dalam log oleh browser

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

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

    Error 404 di Konsol.

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

    TypeError di Konsol.

  3. Klik drop-down Log Levels dan aktifkan opsi Verbose jika dinonaktifkan. Anda akan mempelajari lebih lanjut cara memfilter di bagian berikutnya. Anda harus melakukannya untuk memastikan bahwa pesan berikutnya yang Anda catat dalam log 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.

    Mengaktifkan level log Verbose.

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

    Pelanggaran di Konsol.

Memfilter pesan

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

Memfilter menurut tingkat log

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

Untuk memfilter menurut tingkat log:

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

    Menonaktifkan pesan tingkat Error di Konsol.

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

Memfilter menurut teks

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

  1. Ketik Dave ke dalam kotak teks Filter. Semua pesan yang tidak menyertakan string Dave akan disembunyikan. Anda mungkin juga melihat label Adolescent Irradiated Espionage Tortoises. Itu adalah bug.

    Memfilter semua pesan yang tidak menyertakan `Dave`.

  2. Hapus Dave dari kotak teks 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]/ ke dalam kotak teks Filter. Ketik pola ini ke RegExr untuk mengetahui penjelasan fungsinya.

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

  2. Hapus /^[AH]/ dari kotak teks Filter. Semua pesan akan terlihat lagi.

Memfilter menurut sumber pesan

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

  1. Klik Tampilkan Sidebar Konsol Tampilkan Sidebar Konsol..

    Sidebar.

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

    Melihat sumber pesan di Sidebar.

Memfilter menurut pesan pengguna

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

    Memfilter pesan browser.

  2. Klik 12 Pesan untuk menampilkan semua pesan lagi.

Menggunakan Konsol bersama panel lainnya

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

  1. Klik tab Elemen.
  2. Tekan Escape. Tab Konsol di Panel samping akan terbuka. Aplikasi ini memiliki semua fitur Konsol yang telah Anda gunakan selama tutorial ini.

    Tab **Konsol** di Panel Samping.

Langkah berikutnya

Selamat, Anda telah menyelesaikan tutorial. Klik Berikan Trofi untuk menerima trofi Anda.