Ringkasan konsol

Halaman ini menjelaskan bagaimana Chrome DevTools Console mempermudah pengembangan halaman web. Console memiliki 2 kegunaan utama: melihat pesan yang dicatat dan menjalankan JavaScript.

Melihat pesan yang dicatat

Pengembang web sering mencatat pesan ke Konsol untuk memastikan bahwa JavaScript mereka berfungsi sebagai yang diharapkan. Untuk mencatat pesan, masukkan ekspresi seperti console.log('Hello, Console!') ke pada JavaScript. Saat browser mengeksekusi JavaScript Anda dan melihat ekspresi seperti itu, ia tahu fungsi ini seharusnya untuk mencatat pesan ke Konsol. Misalnya, anggaplah Anda sedang dalam proses penulisan HTML dan JavaScript untuk sebuah halaman:

<!doctype html>
<html>
  <head>
    <title>Console Demo</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      console.log('Loading!');
      const h1 = document.querySelector('h1');
      console.log(h1.textContent);
      console.assert(document.querySelector('h2'), 'h2 not found!');
      const artists = [
        {
          first: 'René',
          last: 'Magritte'
        },
        {
          first: 'Chaim',
          last: 'Soutine'
        },
        {
          first: 'Henri',
          last: 'Matisse'
        }
      ];
      console.table(artists);
      setTimeout(() => {
        h1.textContent = 'Hello, Console!';
        console.log(h1.textContent);
      }, 3000);
    </script>
  </body>
</html>

Gambar 1 menunjukkan tampilan Konsol setelah memuat halaman dan menunggu 3 detik. Coba mencari tahu baris kode mana yang menyebabkan browser mencatat pesan-pesan tersebut.

Panel Konsol.

Gambar 1. Panel Konsol.

Pesan log developer web karena 2 alasan umum:

  • Memastikan kode dieksekusi dalam urutan yang tepat.
  • Memeriksa nilai-nilai variabel pada saat tertentu dalam waktu tertentu.

Lihat Memulai Pesan Logging untuk mendapatkan pengalaman langsung terkait logging. Lihat Konsol Referensi API untuk menjelajahi daftar lengkap metode console. Perbedaan utama antara adalah bagaimana mereka menampilkan data yang Anda catat.

Menjalankan JavaScript

Konsol juga merupakan REPL. Anda dapat menjalankan JavaScript di Konsol untuk berinteraksi dengan halaman yang Anda periksa. Misalnya, Gambar 2 menunjukkan Konsol di samping halaman beranda DevTools, dan Gambar 3 menunjukkan halaman yang sama setelah menggunakan Konsol untuk mengubah judul halaman.

Panel Konsol di samping halaman beranda DevTools.

Gambar 2. Panel Konsol di samping halaman beranda DevTools.

Menggunakan Konsol untuk mengubah judul halaman.

Gambar 3. Menggunakan Konsol untuk mengubah judul halaman.

Halaman dari Konsol dapat diubah karena Konsol memiliki akses penuh ke window DevTools memiliki beberapa fungsi praktis yang mempermudah pemeriksaan halaman. Sebagai misalnya, anggaplah JavaScript Anda berisi fungsi yang disebut hideModal. Menjalankan debug(hideModal) menjeda kode Anda di baris pertama hideModal saat berikutnya dipanggil. Lihat Referensi Console Utilitas API untuk melihat daftar lengkap fungsi utilitas.

Saat Anda menjalankan JavaScript, Anda tidak harus berinteraksi dengan halaman. Anda dapat menggunakan Konsol untuk mencoba kode baru yang tidak terkait dengan halaman. Misalnya, Anda baru saja belajar tentang Metode Array JavaScript map(), dan Anda ingin bereksperimen dengannya. Konsol adalah perangkat lunak tempat untuk mencoba fungsi tersebut.

Lihat Mulai Menjalankan JavaScript untuk mendapatkan pengalaman langsung dalam menjalankan JavaScript di Konsol.