Setiap browser modern memiliki `Developer Tools` atau alat pengembang. Ini adalah perangkat lunak berisi yang dirancang khusus untuk membantu para pengembang dalam membuat, menguji, dan memelihara aplikasi atau situs web.
Dev tools menyediakan berbagai fitur dan fungsionalitas yang membantu pengembang dalam berbagai tahap pengembangan aplikasi atau situs web.
Sebagai awalan, kita akan belajar menggunakan salah satu fitur di Developer Tool yaitu `Console`. Console membantu pengembang dalam memeriksa dan menguji kode JavaScript serta menampilkan pesan kesalahan dan informasi lainnya.
Membuka Developer Tool Console
Untuk membukanya, klik kanan dan pilih `Inspect`, lalu pilih tab `console`.
Langkah praktisnya, Gunakan pintasan: (Ini akan secara langsung membuka tab console)
- Ctrl + Shift + J untuk browser Chrome, Firefox, Edge dan Opera.
- Cmd + Opt + C untuk Safari di macOS.
Untuk Safari, kita harus mengaktifkan Developer Menu terlebih dahulu.
`Safari`> `Preferences` > `Advanced`, centang pada `Show Develop menu in menu bar.`
Browser lain mungkin menggunakan pintasan yang berbeda, kamu bisa cari sendiri cara membuka console dev tools untuk browser yang kamu pakai. Tapi saya yakin, kamu sekarang menggunakan salah satu yang disebut di atas.
Bekerja Dengan Console
Console adalah lingkungan REPL (Read-Evaluate-Print-Loop). Dalam REPL, pengguna diminta untuk memasukkan atau menginputkan kode ke konsol. Kemudian, mesin JavaScript akan membaca (read) dan mengeksekusi atau mengevaluasi (evaluate) kode tersebut. Setelah itu, hasil eksekusi kode akan ditampilkan (print) di konsol.
Proses ini berlangsung terus menerus atau berulang (loop), yang berarti setelah hasil ditampilkan, pengguna dapat menginputkan kode baru untuk dievaluasi secara berulang.
Dengan demikian, konsol memungkinkan pengguna untuk secara interaktif menjalankan dan menguji kode JavaScript, serta melihat hasilnya dengan cepat
Mari kita mulai pelajari cara menggunakan console.
- Buka konsol untuk halaman ini.
- Lihat pesan konsol yang ditampilkan.
Konsol menampilkan banyak pesan, meliputi pesan `log` - putih, `error` - merah, `warning` - kuning.
Kita bisa melihat kode mana yang menampilkan pesan-pesan tersebut dengan klik link yang ada di setiap pesan. Contoh: `menggunakan-browser-console.html:1683`.
Coba klik salah satu link dan perhatikan kemana kamu diarahkan.
Kamu akan diarahkan ke panel `Sources` dan ditunjukkan pada baris mana pesan konsol berasal.
Disitu cursor berada di baris 1683. Menunjukkan bahwa pesan konsol berasal dari baris 1683. Jika pesan konsol berupa error, kamu akan ditunjukan letak error-nya.
Sekarang kita coba menjalankan Kode JavaScript di Console.
-
Pertama, bersihkan dulu semua pesan konsol, jika sudah tidak
diperlukan.
Klik tombol `⊘` untuk membersihkan konsol. -
Ketik kode JavaScript di kolom input sebelah simbol
`
>`.
Kita coba dengan kode sederhana, melakukan perhitungan matematika (+, -, *, /, dsb). - Tekan `Enter` untuk mengeksekusi.
Setelah kamu menekan `Enter`, kode akan dieksekusi dan hasil akan ditampilkan.
Untuk menginput kode lebih dari satu baris (multi-line input), tekan `Shift + Enter`.
Untuk mengakses riwayat input, gunakan panah atas dan bawah.
Menampilkan Pesan di Console
Di bagian sebelumnya, kita menggunakan konsol secara langsung untuk menjalankan kode JavaScript. Sekarang kita belajar menampilkan pesan di konsol melalui JavaScript.
Dengan JavaScript, kita dapat menggunakan `objek console` yang disediakan oleh browser untuk berinteraksi dengan konsol pengembang. Objek console memiliki berbagai metode yang dapat kita gunakan untuk menampilkan pesan.
Berikut adalah beberapa metode umum yang sering digunakan:
1. `console.log()`
Metode paling umum untuk menampilkan pesan logging. Tidak hanya teks, ini juga bisa menampilkan data array dan object.
Contoh penggunaan:
2. `console.error()`
Metode `console.error()` digunakan untuk menampilkan pesan error yang biasanya berasal dari blok `try...catch`. Blok `try` akan menguji kode di dalamnya, dan jika terjadi error, blok `catch` akan menangkap error tersebut beserta pesan errornya. Metode ini kemudian digunakan untuk menampilkan pesan error tersebut di konsol.
Contoh penggunaan:
Contoh di atas akan menghasilkan error `TypeError: Assignment to constant variable.` karena variabel yang dideklarasikan menggunakan `const` tidak dapat diubah (reassign) setelah nilainya ditetapkan.
Error tersebut dapat ditangkap oleh blok `catch`, dan pesan error akan ditampilkan di konsol menggunakan `console.error()`.
Sebetulnya, browser akan otomatis menampilkan pesan error jika terjadi error seperti ini. Namun apabila terdapat error di suatu baris, maka baris berikutnya tidak akan dieksekusi.
Untuk itu jika ada kemungkinan kode menghasilkan error, maka bisa dengan metode `try...catch` sehingga tidak menghentikan eksekusi kode di baris selanjutnya.
Kita akan pelajari lebih dalam tentang blok `try...catch` di artikel selanjutnya.
3. `console.warn()`
Metode ini menampilkan pesan peringatan yang umumnya berwarna kuning di konsol. Kamu bisa mencoba `console.warn()` di konsol dan lihat hasilnya.
Contoh penggunaan:
Selain metode yang telah disebutkan di atas, objek console juga menyediakan metode lain seperti `console.info()`, `console.table()`, `console.group()`, dan banyak lagi.
Menyusun Pesan Konsol dengan String Template
Selain mencetak pesan statis, objek console juga dapat mencetak pesan dinamis. JavaScript memiliki fitur `string template` atau `template literal` untuk menyusun pesan konsol yang dinamis.
Dengan template literal kita bisa menggabungkan teks string dengan variabel atau ekspresi lain. Ini akan membuat pesan konsol yang ditampilkan berubah-ubah tergantung situasi.
Contoh pesan konsol dengan string template:
Dalam contoh di atas, kita menggunakan tanda backtick ( ` ) untuk membungkus pesan dan menggunakan `${}` untuk menempatkan variabel atau ekspresi di dalamnya.
Kita akan membahas `string template` atau `template literal` lebih di artikel terpisah.
