Ticker

6/recent/ticker-posts

Cara Mengetahui Kesalahan Pada Javascript Menggunakan Fasilitas Browser

Pada saat kita membuat script javascript di aplikasi web terkadang hasilnya tidak sesuai dengan apa yang kita inginkan, ini diakibatkan oleh pembuatan script yang tidak sempurna atau terjadi kesalahan. Hal semacam ini terkadang membuat kita sulit untuk mengetahui kesalahannya, oleh karena itu pada artikel ini akan dijelaskan bagaimana kita mengetahui kesalahan tersebut menggunakan fasilitas yang ada di browser.


Buatlah script html sebagai berikut,

<html>
<head>
    <title>Pengetesan keasalahan Javascript</title>
</head>
<body>
<script type="text/javascript">
    var a = 1;
    var b = 2;
    var c = 3;
    document.write(a+b+c+d);
</script>
</body>
</html>


Ketika script diatas di jalankan pada browser akan muncul tampilan sebgai berikut,


Pada gambar diatas tidak muncul tulisan apapun di browser, ini menandakan ada kesalahan pada script yang kita buat tadi. Untuk mengetahui kesalahan dan posisinya dimana, pada keyboard tekan Ctrl + Shift + J sehingga muncul tampilan sebagai berikut,








Pada bagian kanan browser akan muncul inspect Element (posisi inspect element ini bisa terletah di kanan browser, bisa juga di bawah). Tekan tanda >> samping Element sehinggal muncul tampilan seperti diatas dan anda pilih atau klik bagian console (yang di lingkari merah), sehingga muncul seperti di bawah,










Pada gambar diatas yang di lingkari muncul tulisan yang berwarna merah yang isinya "ReferenceError: d is not defined" itu menandakan terjadi kesalahan pada script yang dibuat bahwa variabel d tidak ada atau tidak didefinisikan. sebelah kanan tulisan tersebut ada tulisan hitam "error.html:10" menandakan bahwa error tersebut terletak pada baris ke 10 di halaman error.html.

Dengan melihat kesalahan dan posisi kesalahannya membuat kita lebih mudah mengetahui masalah yang terjadi dan bagaimana membetulkan kesalahan tersebut.

Untuk membetulkan kesalahan tersebut, tambahkan var d = 1 di bawah var c = 3 kemudian simpan dan refresh browser, makan di bagian inspect element (console) tersebut tulisan yang berwarna merah yang tadi akan hilang.

Semoga bermanfaat.

Posting Komentar

0 Komentar