Skip to content

Cara Melakukan Debug Console, Javascript dan AJAX di Google Chrome

25 April 2010

Bagi web developer, tool seperti firebug merupakan sebuah keharusan. Namun sangat disayangkan firebug ini hanya nyaman jika digunakan dari browser firefox. Lalu bagaimana dengan browser lain yang tidak support dengan firebug ? Mau tidak mau kita harus mengoptimalkan menggunakan tool debugging bawaan browser tersebut. Google chrome adalah salah satunya.

Sedikit flashback, berawal dari intensifnya melakukan coding ExtJS, ternyata Engine Javascript Firefox (Trace Monkey) lambat sekali. Semakin besar program ExtJS yang dibuat semakin berat rasanya. Berbeda jauh dengan chrome yang dibackup dengan engine V8, sangat ringan dan cepat. Lebih responsive dalam menjalankan aplikasi ExtJs.

Posting kali ini tentu saja akan membahas tool chrome ini, yang ternyata cukup mumpuni untuk beralih dari firebug. Let’s see.

Debug Console dan Javascript

  • Buka  javascript console dari menu icon control current page->developer->Javascript console atau dengan menggunakan shortcut ctrl+shift+j atau ctrl+shift+i.

Menu Developer Chrome

  • Setelah itu akan muncul layar seperti berikut

Jendela Debug Javascript

  1. Click icon script
  2. Pilih file javascript dari halaman web yang ingin kita debug pada combobox yang tersedia.
  3. Jika kita ingin melakukan debug per baris, maka click pada nomor baris untuk mengeset breakpoint. Lalu jalankan web seperti biasa dan pada saat mengeksekusi kode yang diberi breakpoint ini akan berhenti (pause) dibaris tersebut.
  4. Pada bagian ini, kita dapat melihat informasi breakpointnya yaitu scoping variable dan call stacknya.
  5. Control eksekusi code selanjutnya bisa melalui icon yang terdapat pada point nomer 5 ini. Apakah ingin melanjutkan eksekusi langsung atau baris per baris (step over).
  6. Terakhir adalah bagian console javascript, paling bawah. Console ini pun hampir sama dengan firebug hanya di chrome ini, sudah mendukung syntax hilighting, jadi lebih enak untuk bacanya. Silahkan tinggal bermain-main dengan code javascript diconsole ini.
    Pada contoh gambar diatas, breakpoint diset sesudah assign variable title. Jika kita ketik diconsole ‘title’ maka hasilnya adalah object component title.
    Tips : Untuk mencetak ke console dari kode javascript kita, chrome menggunakan fungsi console.log(), sama dengan firebug.

Debug Request Ajax

  • Buka menu Developer Tools atau dengan shortcut ctrl+shift+i.

Jendela Developer Tools

  1. Pada Jendela Developer Tools, click icon Resources. Pilih always enable pada opsi yang tersedia jika kita ingin senantiasa melakukan debug ajax pada web kita. Jika tidak, maka aktifkan temporary saja dengan memilih default Only enable for this session. Ingat mengaktifkan feature ini akan membuat load page lebih lambat, karena chrome akan mentrack resources  dari halaman web kita. Seperti css, gambar, javascript, waktu load, response time dsb.
  2. Click tombol Enable resource tracking. Halaman web akan direfresh.
  • Kemudian akan muncul jendela seperti berikut :

Jendela Debug Ajax

  1. Pilih tab xhr untuk memulai debug request Ajax.
  2. Jika kita melakukan request Ajax, maka akan terlihat dipanel sebelah kiri, ke url mana request ditujukan. Click salah satu request yang akan kita lihat.
  3. Parameter data yang dikirimkan akan terlihat di jendela header. Contoh diatas, parameter yang dikirimkan adalah edit, action, title dan code, dengan menggunakan methode request POST.
  4. Untuk melihat hasil/response dari server click tab Content.

Tips : Untuk menghentikan tracking resources ini, klik saja tanda centang biru samping kiri tulisan Sort by Response Time pada panel paling bawah jendela.

That’s all. Tampak familiar bukan ? Selebihnya tinggal kita explore feature lain dari Development Tools chrome ini, seperti Inspect element, profiling web untuk mengetahui berapa besar makan resource CPUnya dll.

Menurut gossip, Firefox versi 4 kemungkinan akan keluar dengan engine js yang lebih cepat. So, sementara ini terserah kita, apakah akan beralih dulu ke chrome untuk development sambil menunggu FF 4 keluar, atau tetap bertahan di FF versi sekarang.

Saya pribadi sih sudah jarang pakai firefox sekarang, satu-satunya alasan masih menggunakannya adalah 2 addonsnya download manager DownThemAll dan DownloadHelper, yang belum tersedia padanannya di chrome. Duh, kenapa saya jadi suka chrome ya, padahal sebelumnya i really hate that browser and love FF so much.

Ada tambahan atau pertanyaan ? Silahkan click link comment dibawah.

Selamat Mendebug😛

9 Comments leave one →
  1. 26 May 2010 5:41 pm

    Mangstab mas !. Thanks a lot. Ternyata tersembunyi banget ya fiturnya🙂, mudah2an developer chrome bisa improve interfacenya biar lebih familiar di mata developer (seperti FF+Firebug)

  2. cevarief permalink*
    27 May 2010 5:50 am

    Sama-sama mas. Thanks udah berkunjung😀

  3. 21 July 2010 12:50 pm

    nice …kerennn

  4. 6 October 2010 9:10 am

    Developer tool Chrome memang sangat berguna sekali. Dev tool chrome memiliki feature feature built-in seperti audits, kalau di FF harus pasang add-ons yslow atau add-ons semacamnya.

    Sekarang saya juga lebih sering pake chrome daripada FF. FF di komputer saya beratnya minta ampun.

    Eh ngomong2 mas orang cimahi ya?

  5. cevarief permalink*
    7 October 2010 5:53 am

    Iya saya orang cimahi mas😀 Dari sini juga nih?

  6. haqisaurus permalink
    17 February 2011 7:17 pm

    kalo debug php caranya gimana mas?? pake apa??

  7. 30 June 2011 5:37 pm

    apa bedanya java script dengan java editor dan fungsi utamanya apa mas

  8. 9 March 2012 8:50 am

    Saya juga sama mas, dahulu pecinta firefox
    tapi sekarang ntah kenapa lebih “sreg” dengan chrome.

    Thx atas sharingnya😀

  9. 31 May 2015 8:17 am

    sfsdfsfsdfew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: