Menjalankan JavaScript di Console

Tutorial interaktif ini menunjukkan cara menjalankan JavaScript di Konsol Chrome DevTools. Lihat Memulai Pesan Logging untuk mempelajari cara mencatat pesan ke dalam log ke Konsol. Lihat Memulai Proses Debug JavaScript untuk mempelajari cara menjeda kode JavaScript dan menyusuri kode satu per satu.

Gambar 1. Konsol.

Ringkasan

Konsol adalah REPL, yang merupakan singkatan dari Read, Evaluate, Print, dan Loop. Fungsi ini membaca JavaScript yang Anda ketik, mengevaluasi kode, mencetak hasil ekspresi, lalu melakukan loop kembali ke langkah pertama.

Menyiapkan DevTools

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

1. Tekan Command+Option+J (Mac) atau Control+Shift+J (Windows, Linux, ChromeOS) untuk membuka Konsol, di halaman ini.

   

   Gambar 2. Tutorial ini di sebelah kiri, dan DevTools di sebelah kanan.

Melihat dan mengubah JavaScript atau DOM halaman

Saat mem-build atau men-debug halaman, sering kali ada baiknya menjalankan pernyataan di Konsol untuk mengubah tampilan atau cara halaman berjalan.

1. Perhatikan teks pada tombol di bawah ini.

   Halo Dunia!

2. Ketik document.getElementById('hello').textContent = 'Hello, Console!' di Konsol, lalu tekan Enter untuk mengevaluasi ekspresi. Perhatikan perubahan teks di dalam tombol.

   

   Gambar 3. Tampilan Konsol setelah mengevaluasi ekspresi di atas.

   Di bawah kode yang dievaluasi, Anda akan melihat "Hello, Console!". Ingat kembali 4 langkah REPL: baca, evaluasi, cetak, ulangi. Setelah mengevaluasi kode, REPL akan mencetak hasil ekspresi. Jadi, "Hello, Console!" harus menjadi hasil evaluasi document.getElementById('hello').textContent = 'Hello, Console!'.

Menjalankan JavaScript arbitrer yang tidak terkait dengan halaman

Terkadang, Anda hanya menginginkan playground kode tempat Anda dapat menguji beberapa kode, atau mencoba fitur JavaScript baru yang tidak Anda kenal. Konsol adalah tempat yang tepat untuk eksperimen semacam ini.

1. Ketikkan 5 + 15 di Console. Hasil 20 akan muncul di bawah ekspresi Anda (kecuali jika ekspresi Anda membutuhkan waktu terlalu banyak untuk dievaluasi).
2. Tekan Enter untuk mengevaluasi ekspresi. Console akan mencetak hasil ekspresi di bawah kode Anda. Gambar 4 di bawah menunjukkan tampilan Konsol Anda setelah mengevaluasi ekspresi ini.

3. Ketik kode berikut ke dalam Konsol. Cobalah untuk mengetiknya, karakter demi karakter, bukan menyalin dan menempelnya.

   function add(a, b=20) {
     return a + b;
   }
   

   Lihat menentukan nilai default untuk argumen fungsi jika Anda belum memahami sintaksis b=20.

4. Sekarang, panggil fungsi yang baru saja Anda tentukan.

   add(25);
   

   

   Gambar 4. Tampilan Konsol setelah mengevaluasi ekspresi di atas.

   add(25) bernilai 45 karena saat fungsi add dipanggil tanpa argumen kedua, b akan ditetapkan secara default ke 20.

Anda tidak akan dapat menjalankan kode apa pun di sesi konsol ini hingga fungsi Anda ditampilkan. Jika terlalu lama, Anda dapat menggunakan Pengelola Tugas untuk membatalkan komputasi yang memakan waktu lama; tetapi, hal ini juga akan menyebabkan halaman saat ini gagal dan semua data yang telah Anda masukkan akan hilang.

Langkah berikutnya

Lihat Menjalankan JavaScript untuk mempelajari fitur lainnya terkait menjalankan JavaScript di Konsol.

DevTools memungkinkan Anda menjeda skrip di tengah eksekusi. Saat dijeda, Anda dapat menggunakan Konsol untuk melihat dan mengubah window atau DOM halaman pada saat tertentu. Hal ini menghasilkan alur kerja proses debug yang andal. Lihat Memulai Proses Debug JavaScript untuk tutorial interaktif.

Konsol juga mendukung serangkaian penentu format. Lihat Memformat dan menata gaya pesan di Console untuk mempelajari semua metode untuk memformat dan menata gaya pesan konsol.

Selain itu, Konsol juga memiliki serangkaian fungsi praktis yang memudahkan interaksi dengan halaman. Contoh:

• Daripada mengetik document.querySelector() untuk memilih elemen, Anda dapat mengetik $(). Sintaksis ini terinspirasi oleh jQuery, tetapi sebenarnya bukan jQuery. Itu hanyalah alias untuk document.querySelector().
• debug(function) secara efektif menetapkan titik henti sementara pada baris pertama fungsi tersebut.
• keys(object) menampilkan array yang berisi kunci dari objek yang ditentukan.

Lihat Referensi API Utilitas Konsol untuk mempelajari semua fungsi praktis.