Mengecek Fungsionalitas Javascript Dengan Console Google Chrome

Tanpa perlu melakukan instalasi plugin developer, Google Chrome sejak awal sudah melengkapinya dengan tools Inspect Element yang sangat kaya fitur. Salah satu fitur yang akan saya bahas dan uji kali ini adalah Console Inspect Element. Jika biasanya kita menggunakan Inspect Element hanya untuk melihat source code web dan memanipulasi interface. Maka sekarang kita akan mencoba bagaimana Console dapat berfungsi bagi seorang developer.

Google Chrome Console

Lantas, apa saja sebenarnya fungsi dari Console ini ? Saya mencuplik dari dokumentasi Google Developer, bahwa fungsi Console Chrome diantaranya adalah :

• Sebagai tools diagnostic pengecekan fungsi di dalam Javascript yang telah diberi log.
• Menguji fungsionalitas function() javascript atau $(function) jquery dengan hanya mengetik command di dalam Console.

Mari kita coba memulai bereksplorasi dengan Console DevTools Google Chrome. Pada tutorial ini saya menggunakan Google Chrome Canary versi 29. Karena browser ini telah didukung oleh Chrome DevTools untuk keperluan Development.
Misalnya dalam praktik kali ini kita mempunyai sebuah kode javascript sederhana yang isinya adalah sebagai berikut :

function test1() { console.log("tes log console"); alert("tes console pertama"); } function test2(){ $(document).ready(function() { console.log("tes log console log 2"); $(".test1").append("Inspect Element Console"); }); }

1 2 3 4 5 6 7 8 9 10 11

function test1() {   console.log("tes log console");   alert("tes console pertama"); }   function test2(){   $(document).ready(function() {    console.log("tes log console log 2");    $(".test1").append("Inspect Element Console");   }); }

Kode di atas memiliki dua function yang berbeda, dimana :

• function test1(); menampilkan window alert.
• function test2(); akan melakukan append html pada class test1 di dalam dokumen menggunakan Jquery.

Kita dapat memanggil function tersebut dengan mengetikkan function di dalam Console tes Google Chrome. Misalnya untuk function test1();, tinggal ketikkan saja test1(); di Console. Lihat gambar berikut untuk lebih jelasnya :

function test1();

function test2();

Menggunakan Console Google Chrome akan sangat berguna saat seorang developer ingin mempelajari dan melakukan uji function() di dalam Javascript. Ditambah Google Chrome juga mempunyai notifikasi pengenalan fungsi javascript jika terjadi sebuah kesalahan syntax.

Inspect Element adalah sebuah tool yang telah menjadi satu kesatuan dengan Chrome DevTools. Chrome DevTools sendiri merupakan peralatan yang dapat digunakan oleh para developer pengguna Google Chrome untuk melakukan pengetesan script program web.