Halaman ini menjelaskan bagaimana Chrome DevTools Console mempermudah pengembangan halaman web. Konsol memiliki 2 kegunaan utama: melihat pesan yang dicatat dalam log dan menjalankan JavaScript.
Melihat pesan yang dicatat
Developer web sering kali mencatat pesan ke Konsol untuk memastikan JavaScript mereka berfungsi seperti yang diharapkan. Untuk mencatat pesan, masukkan ekspresi seperti console.log('Hello, Console!') ke dalam
JavaScript Anda. Saat browser menjalankan JavaScript Anda dan melihat ekspresi seperti itu, browser akan mengetahui
bahwa harus 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. Cobalah untuk mencari tahu baris kode mana yang menyebabkan browser mencatat pesan ke dalam log.
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 Referensi
Console API untuk menjelajahi daftar lengkap metode console. Perbedaan utama antara kedua
metode adalah caranya menampilkan data yang sedang 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.
Anda dapat mengubah halaman dari Konsol karena Konsol memiliki akses penuh ke
window halaman. DevTools memiliki beberapa fungsi praktis yang mempermudah pemeriksaan halaman. Misalnya, JavaScript Anda berisi fungsi yang disebut hideModal. Menjalankan
debug(hideModal) akan 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 mempelajari metode Array JavaScript
bawaan map(), dan ingin bereksperimen dengannya. Console adalah tempat yang baik
untuk mencoba fungsi ini.
Lihat Mulai Menjalankan JavaScript untuk mendapatkan pengalaman langsung dalam menjalankan JavaScript di Konsol.