Menjalankan JavaScript di Console

Kayce Basques
Kayce Basques
X GitHub

Tutorial interaktif ini menunjukkan cara menjalankan JavaScript di Konsol Chrome DevTools. Lihat artikel Mulai Menggunakan Pesan Logging untuk mempelajari cara mencatat pesan ke Konsol. Lihat Mulai Proses Debug JavaScript untuk mempelajari cara menjeda kode JavaScript dan menelusurinya baris demi baris.

Konsol.

Gambar 1. Konsol.

Ringkasan

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

Menyiapkan 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. Tekan Command+Option+J (Mac) atau Control+Shift+J (Windows, Linux, ChromeOS) untuk membuka Konsol, tepat di halaman ini.

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

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

Melihat dan mengubah JavaScript atau DOM halaman

Saat membuat atau men-debug halaman, sering kali berguna untuk menjalankan pernyataan di Konsol agar dapat mengubah tampilan atau cara kerja halaman.

  1. Perhatikan teks di tombol di bawah.

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

    Tampilan Konsol setelah mengevaluasi ekspresi di atas.

    Gambar 3. Tampilan Konsol setelah mengevaluasi ekspresi di atas.

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

Menjalankan JavaScript arbitrer yang tidak terkait dengan halaman

Terkadang, Anda hanya ingin lingkungan bermain kode tempat Anda dapat menguji beberapa kode, atau mencoba fitur JavaScript baru yang belum Anda pahami. Konsol adalah tempat yang tepat untuk melakukan eksperimen semacam ini.

  1. Ketik 5 + 15 di Konsol. Hasil 20 akan muncul di bawah ekspresi Anda (kecuali jika ekspresi Anda membutuhkan waktu terlalu lama untuk dievaluasi).
  2. Tekan Enter untuk mengevaluasi ekspresi. Konsol 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 Console. Coba ketikkan karakter demi karakter, bukan menyalin dan menempelkannya.

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

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

    add(25);

    Tampilan Konsol setelah mengevaluasi ekspresi di atas.

    Gambar 4. Tampilan Konsol setelah mengevaluasi ekspresi di atas.

    add(25) dievaluasi menjadi 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 proses tersebut terlalu lama, Anda dapat menggunakan Pengelola Tugas untuk membatalkan komputasi yang memakan waktu lama; namun, tindakan ini juga akan menyebabkan halaman saat ini gagal dan semua data yang telah Anda masukkan akan hilang.

Langkah berikutnya

Lihat Menjalankan JavaScript untuk mempelajari lebih lanjut fitur yang terkait dengan menjalankan JavaScript di Konsol.

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

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

Selain itu, Console juga memiliki serangkaian fungsi praktis yang mempermudah interaksi dengan halaman. Contoh:

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

Lihat Referensi API Utilitas Konsol untuk mempelajari semua fungsi praktis.