Alat Pengembangan Web

Dalam tutorial ini, Anda akan belajar cara membuka tab Console dari alat pengembangan web untuk melihat pesan-pesan.

Alat pengembangan web memungkinkan Anda menguji dan debug kode JavaScript. Alat pengembangan web sering disebut sebagai devtools.

Browser web modern seperti Google Chrome, Firefox, Edge, Safari, dan Opera menyediakan devtools sebagai fitur bawaan.

Secara umum, devtools memungkinkan Anda bekerja dengan berbagai teknologi web seperti HTML, CSS, DOM, dan JavaScript.

Dalam tutorial ini, Anda akan belajar cara membuka tab Console dari devtools untuk melihat keluaran pesan oleh JavaScript.

Google Chrome Pertama, buka file devtools.html.

File devtools.html berisi kode JavaScript berikut:

<script>
    console.log('Halo, devtools!');

    // kode berikut menyebabkan kesalahan
    let salam = pesan;
</script>

Kedua, tekan F12 pada Windows atau Cmd+Opt+J jika Anda menggunakan Mac.

Devtools akan membuka tab Console secara default. Ini akan terlihat seperti ini:

Pesan pertama adalah ‘Halo, DevTools!’ yang merupakan keluaran dari perintah berikut:

console.log('Halo, DevTools!');

Untuk mengeluarkan nilai variabel, Anda menggunakan metode console.log() berikut. Contohnya:

let pesan = 'Selamat Pagi!';
console.log(pesan);

Pesan kedua yang muncul di tab Console adalah sebuah kesalahan.

Uncaught ReferenceError: pesan tidak didefinisikan

Ini karena variabel pesan tidak didefinisikan dalam kode tetapi dirujuk dalam penugasan.

Sekarang, Anda dapat melihat baik pesan normal yang dikeluarkan oleh console.log() maupun pesan kesalahan. Itu sudah cukup untuk memulai. Kita akan menjelajahi devtools lebih lanjut dalam tutorial selanjutnya.

Firefox dan Edge Biasanya, Anda membuka tab Console dari devtools di Firefox dan Edge menggunakan F12. Mereka memiliki antarmuka pengguna yang serupa.

Safari Jika Anda menggunakan browser Safari di Mac, Anda perlu mengaktifkan Menu Pengembang terlebih dahulu:

Dan kemudian tekan Cmd+Opt+C untuk mengalihkan jendela Console:

Dalam tutorial ini, Anda telah belajar cara membuka tab Console dari devtools untuk memeriksa pesan yang dikeluarkan oleh kode JavaScript.

Abdan Zam Zam Ramadhan