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.
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.
Gambar 2. Panel Konsol di samping halaman beranda DevTools.
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.