Bermain-Main Dengan Javascript Console Di Google Chrome

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

Author: Arief Bayu Purwanto

Hello, my name is Arief Bayu Purwanto, a 24 years old father of a beautiful daughter. Interested in online programming, linux, games, and reading. Currently working on kapanlagi.com as junior developer. I live in a relatively quite and cool place called Malang. I'm available for some freelance stuff as well as some consulting job. You can see my portofolio for some previous task I've finished and some other information related to my capability. Btw, I'm plurking here.