Menjalankan JavaScript di Console

Kayce Basques

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

Konsol.

Gambar 1. Konsol.

Ringkasan

Console 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 semua alur kerja sendiri. Ketika mengikuti alur kerja secara fisik, Anda akan lebih mudah mengingat alur kerjanya nantinya.

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

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

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

Melihat dan mengubah JavaScript atau DOM halaman

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

  1. Perhatikan teks pada tombol di bawah ini.

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

    Tampilan Konsol setelah mengevaluasi ekspresi di atas.

    Gambar 3. Tampilan Konsol setelah mengevaluasi ekspresi di atas.

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

Jalankan JavaScript arbitrer yang tidak terkait dengan halaman

Terkadang, Anda hanya ingin playground kode tempat menguji beberapa kode, atau mencoba fitur JavaScript baru yang tidak Anda pahami. Konsol merupakan tempat yang tepat untuk melakukan jenis eksperimen seperti ini.

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

  3. Ketik kode berikut ke Konsol. Cobalah untuk mengetikkannya, karakter demi karakter, daripada menyalin dan menempelnya.

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

    Baca bagian menentukan nilai default untuk argumen fungsi jika Anda belum terbiasa dengan sintaksis b=20.

  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) 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 dalam sesi konsol ini sampai fungsi Anda ditampilkan. Jika 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 fitur lainnya terkait dengan 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 itu. Hal ini memungkinkan alur kerja proses debug yang canggih. Lihat Memulai dengan Proses Debug JavaScript untuk tutorial interaktif.

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

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

  • Daripada mengetik document.querySelector() untuk memilih elemen, Anda dapat mengetik $(). Sintaksis ini diinspirasi 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 dari objek yang ditentukan.

Lihat Referensi Console Utilitas API untuk mempelajari semua fungsi praktis.