JavaScript Modern: Developer Console

Code sangatlah rentan dengan kesalahan. Mungkin anda juga dapat membuat kesalahan. Sebenarnya anda sedang membuat kesalahan, itu karena anda seorang manusia, bukan robot.

Tetapi pada Browser, pengguna tidak dapat melihat kesalahan. Jadi, jika terdapat suatu hal yang salah pada Script, kita tidak dapat melihat suatu hal yang rusak dan kita juga tidak bisa memperbaikinya.

Untuk melihat kesalahan dan mendapatkan banyak informasi berguna tentang Script, maka dibuatlah "Developer Tools" pada Browser.

Banyak para Developer menggunakan Chrome atau Firefox karena kedua Browser tersebut memiliki Developer Tools yang sangat berguna. Browser lainnya juga mencantumkan Developer Tools, terkadang juga memiliki fitur spesial.

Developer Tools adalah suatu potensi: Mereka mempunyai banyak fitur. Untuk memulainya, kita akan mempelajari bagaimana cara membukanya, melihat kesalahan, dan menjalankan perintah pada JavaScript.

Google Chrome

Buka halaman bug.html

Disana terdapat error pada kode JavaScript. Kode tersebut disembunyikan dari mata pengunjung.

Jadi, mari kita buka Developer Tools untuk melihatnya.

Tekan F12 pada Keyboard (Windows)

Developer Tools akan terbuka dan pilih tab Console.

Kemudian akan terlihat seperti gambar dibawah ini:
Tampilan Developer Console

Tampilan Developer Tools tergantung dari versi Chrome yang anda gunakan. Tampilan itu akan berubah dari waktu ke waktu tetapi tetap mirip.
  1. Disini kita dapat melihat pesan error berwana merah. Pada kasus ini. Script terdiri dari perintah "lalala" yang tidak diketahui oleh JavaScript.
  2. Disisi kanan terdapat teks bug.html:xx, teks tersebut dapat di klik. Jika anda mengekliknya, maka akan tertuju ke sumber Bug.

Dibawah pesan error, terdapat simbol >. Simbol tersebut adalah tanda "Command Line" dimana kita dapat menulis perintah JavaScript. Tekan Enter pada Keyboard untuk menjalankannya (Shift + Enter untuk memasukkan baris ganda).

Sekarang anda dapat melihat kesalahan dan hal tersebut sudah cukup untuk kita mulai. Kita akan kembali ke Developer Tool pada bagian Debugging pada Chrome.

Firefox, Edge, dll.

Kebanyakan Browser menggunakan Shortcut F12 untuk membuka Developer Tools.

Untuk melihat & menggunakannya sangatlah sama percis seperti Browser lainnya.

Multi-Line Input

Biasanya, ketika kita memasukkan kode kedalam Console dan menekan Enter pada Keyboard, maka Console akan menjalankannya.

Untuk memasukkan Multi-Line (Baris Ganda), anda dapat menekan Shift + Enter pada Keyboard.

Kesimpulan

  • Developer Tools befungsi untuk melihat kesalahan, menjalankan perintah, mempelajari variabel, dll.
  • Developer Tools dapat dibuka dengan menekan F12 pada Keyboard dari kebanyakan Browser di Windows.
Sekarang, perlengkapan kita sudah siap. Pada bagian selanjutnya, kita akan masuk kedalam JavaScript.

0Komentar

Sebelumnya Selanjutnya