Bermain-Main Dengan Javascript Console Di Google Chrome

written by Arief Bayu Purwanto on April 10, 2012 in Tips N Trick with one Comment

Barusan, teman saya ngebuzz, tanya apa bisa akses JSON dari URL berikut dengan menggunakan AJAX jQuery. Sebab, kata ybs, selalu error saat diproses:


http://www.blibli.com/webapp/wcs/stores/servlet/EMarketingSpotJSON___NewArrivalsProduct?catalogId=10051

Karena ada tantangan, ya saya terima saja:D.

Sebagai catatan, kondisi saya saat itu, sedang browsing ngalor-ngidul. Males buka editor hanya untuk mencoba kode kecil. Malas juga buka FTP client untuk upload ke server. Jadi, berikut step yang saya lakukan:

Cek struktur JSON

Benar sekali, yang pertama kali dicek adalah struktur JSONnya. Apakah sudah sesuai atau masih ada salah. Cara paling mudah, ambil saja hasil generate yang ada, lalu masukkan ke tools online json viewer pada mode Text. Setelah itu, tekan Format, kalau tidak ada error, berarti JSONnya valid.

Free Image Hosting at www.ImageShack.us

Setelah yakin valid, cek bagaimana datanya, untuk ini, pakai mode Viewer.

Free Image Hosting at www.ImageShack.us

Buka Chrome dengan mematikan web security

Yup, saya perlu chrome untuk main-main di javascript console-nya. Saya saat itu sedang browsing menggunakan firefox dan juga ada firebug-nya. Tapi, sepertinya same-origin policy menyebabkan error saat fetching ajax. Solusi yang saya ambil, pakai saja chrome (dengan sebelumnya mematikan web-security, agar tidak menyebabkan error yang sama). Caranya:

"C:\Users\{nama-user-anda}\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-web-security

Buka Website Yang Menggunakan jQuery

Karena saya sedang membuka The Verge yang ternyata juga menggunakan jQuery, yasud, load saja URLnya ke chrome:D. Setelah selesai loading, buka Options » Tools » JavaScript Console.

Masukkan kode Javascript yang ingin ditest

Karena ingin mencoba ajax, berarti saya perlu menggunakan kode-kode berikut (dapat dari mana? ya googling dong:D):

jQuery.ajax({url:'http://www.blibli.com/webapp/wcs/stores/servlet/EMarketingSpotJSON___NewArrivalsProduct?catalogId=10051'}).success(function(data){console.log("sukses!");});

Coba dijalankan dan lihat hasilnya.

Free Image Hosting at www.ImageShack.us

Berikutnya, tambahkan kode untuk mengecek JSON yang ada:

for(i=0; i<data.catalogs.length; i++){console.log("data: " + data.catalogs[i].name);}

Hasil akhirnya jadi:

jQuery.ajax({url: 'http://www.blibli.com/webapp/wcs/stores/servlet/EMarketingSpotJSON___NewArrivalsProduct?catalogId=10051'}).success(function(data){for(i=0; i<data.catalogs.length; i++){console.log("data: " + data.catalogs[i].name);};});

Kemudian jalankan:

Free Image Hosting at www.ImageShack.us

Kesimpulan

Begitulah, iseng-iseng sore ini, dalam menjawab pertanyaan kawan saya. Ternyata saya tidak menemukan error yang dimaksud, anggap aja case closed, ya:D. Ingat, Javascript console adalah teman yang sangat berharga dalam proses development dan debugging aplikasi website yang berhubungan dengan javascript. Jadi, pelajari dan dalamilah feature-feature yang ada. Salam Super! #eh