Javascript dasar : cara mengetahui pesan error di javascript

kata kerennya itu debugging javascript,jadi untuk mengetahui pesan error di javascript itu sangat unik sekali, ketika error javascript ini pesan error nya tidak langsung tampil melainkan harus memakai bantuan lagi untuk kita mengetahui pesan error yang terjadi pada kode javascript kita. nama toolnya itu adalah debugger.seperti biasa sebelum kita memulainya izinkan diri ini untuk mengucapkan

Salam sobat semua.

Alhamdulillahi robill 'alamiiin atas segala nikmat yang telah diberikan Allah pada diri ini secara gratis sehingga diri ini bisa menulis dan berbagi dalam tulisan ini. Sholawat serta salamku akan tetap terpanjatkan kepada baginda Sayyidina Muhammad ibni abdillah S.A.W. beserta kepada keluarga dan sahabatnya. sebelum kita memulai segalanya, marilah kita ucapkan baca basmalah agar semua apa yang kita lakukan dan kita usahakan mendapat pertolongan sehingga di permudahkan dan dicapaikan apa yang kita harapakan.

Bismillahir rohmaanir rohiim, sebelum kita melangkah dan mengenal lebih jauh tentang javasscript yang wajib juga kita ketahui yaitu bagaiman cara mengetahui pesan error yang terjadi dalam kode-kode javscript kita, karena javascript ini bukan seperti php,HTML,css dan lain sebagainya yang langsung ketika ada error akan menampilkan pesan error kode kita, tapi javascript ini masih perlu bantuan tool lagi yang namanya debugger javascript, dan proses tersebut dinamakan debugging javascript.

sedikit cerita sebelum kita mulai, karena debugging javascript zaman dulu atau zaman old sangatlah ruwet tapi power full. kalau dulu saya mau debugging itu harus pake tool debugger yang namanya firebug addon firefox. firebug ini adalah salah satu plugin firefox yang sangat power full dan sangat membantu sekali setiap saya membuat dan bergelut dengan kode-kode yang berbau javascript. dan kemaren saya ingin membuat tulisan tentang firebug ini dan ternyata ketika ke blog firebug yang bisa

kalian lihat disini dan ternyata firebug sudah tidak ada lagi di addons firefox, sedih bercampur bingung harus memakai tool debugger apa lagi,

dan ternyata di blog firebug itu diarahin di suruh memakai firefox developer version yang mana saya belum pernah sama sekali menyentuh tool firefox developer version ini. tapi apa boleh buat kita harus mencobanya, karena kita butuh debugger javascript untuk debugging javascript dalam kode-kode javascript kita nantinya.

oke langsung saja kita install tuh firefox developer version dengan mengklik tombol firefox developer version seperti gambar berikut.

setelah itu kita akan dialihkan ke blognya mozilla firefox dan disuruh download tool firefox developer version. sekarang klik saja tombol firefox developer version yang berwarna biru seperti pada gambar

kemudian klik tombol save file seperti gambar berikut

setelah itu maka firefox kita akan mendeownload filenya dan ketika selesai maka akan tampil pada icon download di ujung sebelah kanan firefox sperti pada gambar

langsung saja klik applikasi yang sudah terdownload pada icon download firefox yang ada di ujung kanan atas. dan akan muncul dialog pesan user account dan klik yes saja kawan, karena itu artinya kalau kita klik yes kita memberikan hak penuh pada installer dalam OS windows kita. kemudian setelah itu akan tampil jendela installer seperti berikut dan biarkan samapai prosesnya selesai.

setelah selesai maka firefox developer version ini akan membuka secara otomati dan kita langsung saja mencoba debugging javascript script atau kode javascript kita.biar mempercepat kita coba saja kode yang sebelumnya sudah kita buat pada tulisan sebelumnya yang ada di sini sekarang kita buka dulu nih kodenya pada tool firefox developer version seperti tampak gambar

nah untuk mengaktifkan debugger javascriptnya kita pertama kita tampilkan dulu menubarnya dengan cara klik kanan pada tempat kosong diatas selain pada tab firefoxnya.seperti pada gambar berikut kemudian klik menubar dan menubar nya akan muncul seperti pada gambar berikut

kalau sudah muncul menu barnya sekarang kita klik pada menu bar tool -> browser tools -> web developer tools sehingga nanti akan seperti berikut

nah kalau sudah muncul seperti diatas sekarang kita klik tab console pada tool web developernya seperti pada gambar berikut

dari gambar diatas sudah muncul error tentang HTML nya, tapi kalau saya dari dulu ketika muncul error seperti itu sering saya hiraukan karena kode-kode javascript dan HTML masih running seperti apa yang diharapkan. sekarang kita buat error kode javascript kita, silahkan kalian ketik atau copy paste kode javascript berikut pada text editor kalian masing-masing

function outawaljs(){

var outnya=document.getElementById("outjs1");

outnya.innerHTML="<h2>Ini Javascript pertamaku</h2>";

}

dan untuk kode HTML nya seperti berikut

 <html>

<head>

<title>My Web</title>

<script language="javascript" src="js/tes.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body  onload="outawaljs()">

<div id="outjs"></div>

</body>

<html>

dari kode diatas akan menghasilkan output seperti berikut

dari hasil diatas kita bisa lihat dalam browser tidak tampil apa-apa, sedangkan kita lihat lagi pada console akan muncul keterangan error seperit berikut

Uncaught TypeError: can't access property "innerHTML", outnya is null

    outawaljs file:///E:/file_html/js/tes.js:3

    onload file:///E:/file_html/filejs_1.html:1

nah dari sini kita tahu bahwa dalam pesan tersebut diberitahukan bahwa ada error tidak bisa akses properti innerhtml karena properti id outnya kosong atau tidak ada,dan itu terjadi error pada tes.js di line 3. kurang lebih seperti itu lah pesan error yang ditampilkan. maka dengan pesan error ini atau debugging javascript ini kita bisa mempermudah untuk memeperbaiki error dalam kode-kode javascript kita, dan sekarang kita coba perbaiki kode diatas dengan dua cara, bisa memperbaiki kode pada 

javascript seperti berikut

function outawaljs(){

var outnya=document.getElementById("outjs");

outnya.innerHTML="<h2>Ini Javascript pertamaku</h2>";

}

atau bisa kita memperbaiki dengan kode HTML seperti berikut

<html>

<head>

<title>My Web</title>

<script language="javascript" src="js/tes.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body  onload="outawaljs()">

<div id="outjs1"></div>

</body>

<html>

sehingga kode javascript lengkpanya seperti berikut

function outawaljs(){

var outnya=document.getElementById("outjs1");

outnya.innerHTML="<h2>Ini Javascript pertamaku</h2>";

}

dan kode HTML nya seperit berikut

<html>

<head>

<title>My Web</title>

<script language="javascript" src="js/tes.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body  onload="outawaljs()">

<div id="outjs1"></div>

</body>

<html>

dan jika kita reload atau refresh browser kita maka kode diatas akan menghasilkan seperti berikut nah saya rasa cukup sekian dulu tulisan tentang debugging javascript ini atau cara mengetahui pesan error di javascript dengan cara menggunakan tool debugger javascript yang namanya firefox developer version, dan kita lanjut di next tulisan kawna, mudah-mudahan tulisan ini bisa membawa dan memberikan manfaat bagi kita

semua, Aamiiin.

Salam sobat semua.

#javascript #debugging #debugger #html #free #share #berbagi #gratis #web #website #websites #webdeveloper #developer #firebug #firefox