Menjalankan JavaScript di Console

Kayce Basques
Kayce Basques

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

Konsol.

Gambar 1. Konsol.

Ringkasan

Console adalah REPL, yang merupakan singkatan dari Read, Evaluate, Print, dan Loop. Kode ini membaca yang Anda ketik ke dalamnya, mengevaluasi kode Anda, mencetak hasil dari expression, lalu melakukan loop kembali ke langkah pertama.

Menyiapkan DevTools

Tutorial ini dirancang agar Anda dapat membuka demo dan mencoba semua alur kerja sendiri. Kapan Anda mengikutinya 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 halaman ini.

    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 dilakukan secara berurutan untuk mengubah tampilan atau tampilan halaman.

  1. Perhatikan teks pada tombol di bawah ini.

  2. Ketik document.getElementById('hello').textContent = 'Hello, Console!' di Konsol dan kemudian tekan Enter untuk mengevaluasi ekspresi tersebut. 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: {i>read<i}, mengevaluasi, mencetak, mengulang. Setelah mengevaluasi kode Anda, REPL akan mencetak hasil ekspresi. Jadi, "Hello, Console!" harus merupakan hasil evaluasi document.getElementById('hello').textContent = 'Hello, Console!'.

Jalankan JavaScript arbitrer yang tidak terkait dengan halaman

Terkadang, Anda hanya ingin playground kode tempat Anda dapat menguji beberapa kode, atau mencoba JavaScript baru fitur yang tidak Anda kenal. 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 cara Konsol seharusnya perhatikan setelah mengevaluasi ekspresi ini.

  3. Ketik kode berikut ke Konsol. Coba ketikkan, karakter demi karakter, daripada menyalin dan menempelnya.

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

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

  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 ditetapkan secara default ke 20.

Anda tidak akan dapat menjalankan kode apa pun dalam sesi konsol ini sampai fungsi Anda ditampilkan. Jika hal itu memakan waktu terlalu lama, Anda dapat menggunakan Pengelola Tugas untuk membatalkan komputasi yang memakan waktu lama; namun, hal itu juga akan menyebabkan laman 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 membuat untuk alur kerja proses debug yang canggih. Lihat Memulai dengan Proses Debug JavaScript untuk sesi interaktif tutorial.

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 $(). Ini terinspirasi oleh jQuery, tetapi sebenarnya bukan jQuery. Itu 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.