Ads by Yasya El Hakim
Membuka Developer Console JavaScript

Kode sangatlah rentan terhadap setiap kesalahan. Kemungkinan besar kalian pasti dapat membuat kesalahan. Sangatlah wajar karena setiap manusia pasti pernah membuat kesalahan.

Tetapi pada browser, pengguna tidak dapat melihat suatu kesalahan. Jadi, jika terdapat suatu kesalahan pada script, kita tidak dapat melihat apa saja yang error dan tentunya kita tidak dapat memperbaikinya.

Untuk melihat suatu kesalahan dan mendapatkan informasi yang bermanfaat tentang kesalahan pada script. Maka terdapat suatu tools pada browser yang dinamakan Developer Console.

Rata-rata, para developer banyak yang menggunakan Chrome atau Firefox karena kedua browser tersebut memiliki developer tool yang baik dan handal. Browser lain sebenarnya juga menyediakan developer tool dan juga memiliki fitur khusus, tetapi tidak sehandal kedua browser tersebut.

Terdapat banyak sekali fitur dari Developer Tool. Sebagai pendahuluan, langsung saja kita coba untuk membukanya, melihat suatu kesalahan, dan menjalankan perintah JavaScript.


Developer Tool pada Google Chrome

Buka Text Editor kesukaan kalian: Notepad, Notepad++, Sublime Text, dll.

Buatlah sebuah file, beri nama bug.html (dengan ekstensi .html) dan masukkan kode berikut kedalamnya:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    Error atau kesalahan tidak akan terlihat pada halaman Web.
    <script>
        Saya ERROR
    </script>
</body>
</html>


Buka file bug.html dengan menggunakan Google Chrome dan lihatlah hasilnya.

Terdapat suatu kesalahan yang ada di dalam kode JavaScript pada halaman tersebut dan kesalahan tersebut tidak akan terlihat oleh pengunjung biasa. Jadi, untuk mengetahuinya, mari kita buka Developer Tool.

Tekan tombol F12 pada Keyboard.

Secara Default, Developer Tool akan terbuka pada tab Console dan akan terlihat seperti berikut:

Developer Tool pada Chrome

Tampilan Developer Tool mungkin agak berbeda karena sangat tergantung pada versi Chrome yang digunakan. Pada contoh diatas, saya menggunakan Google Chrome Developer Edition dengan versi 80.0.3964.0 (Official Build) dev (64-bit).

Pada gambar diatas, kita dapat melihat pesan kesalahan berwarna merah. Dan dalam hal ini, script yang telah kita buat terdiri dari teks "Saya ERROR" yang sudah jelas tidak dimengerti oleh browser.

Di sisi sebelah kanan, terdapat sebuah link yang dapat di klik: bug.html:9 yang merupakan sumber kesalahan. bug.html adalah nama file dan angka 9 adalah baris lokasi kesalahan itu terjadi.

Di bawah pesan kesalahan tedapat simbol arah panah kanan berwarna biru ">". Simbol itu merupakan tanda dari baris perintah dan lokasi di mana kita bisa mengetikkan perintah JavaScript. Kita dapat menekan tombol Enter untuk menjalankannya (Shift + Enter untuk memasukkan perintah multi-line).

Sekarang kita bisa melihat kesalahan khususnya pada Google Chrome dan hal tersebut sangatlah cukup untuk pendahuluan kali ini. Kita akan membahas lebih lanjut tentang developer tool bersamaan dengan Debugging mungkin pada bagian selanjtnya.

Developer Tool pada Mozilla Firefox, Microsoft Edge, dll

Rata-rata, kita dapat menekan tombol F12 pada keyboard untuk membuka developer tool pada browser.

Tampilannya juga akan terlihat sangat mirip. Jika kalian sudah lancar dengan salah satu Developer Tool yang pada Browser. Maka kalian pasti juga akan terbiasa dengan developer tool yang ada di browser lain.

Karena saya menggunakan dua jenis browser, Google Chrome Developer dan Mozilla Firefox Developer Edition. Maka saya juga akan menampilkan Developer Tool yang ada pada Firefox. Berikut adalah penampakannya:

Developer Tool pada Firefox

Apa itu Multi-Line Input pada Developer Console?

Biasanya, ketika kita ingin memasukkan satu baris kode kedalam console, kalian dapat menekan tombol Enter untuk menjalankannya.

Untuk memasukkan beberapa baris, kita dapat menekan tombol Shift + Enter.

Hal inilah yang disebut dengan multi-line input.

Kesimpulan

  • Kita dapat melihat kesalahan, menjalankan perintah, mengecek variabel, dll hanya dengan menggunakan Developer Tools.
  • Kita dapat membuka developer tool dengan menekan tombol F12 pada keyboard. Cara untuk membukanya juga sama dengan sebagian besar browser yang ada di Windows.

Nah, sekarang kita sudah memiliki environment yang sudah cukup siap. Pada bagian selanjutnya, kita akan langsung bermain dengan JavaScript.

0Komentar

Sebelumnya Selanjutnya