Cara Melakukan Debug Console, Javascript dan AJAX di Google Chrome

Posted: Oktober 1, 2014 in Artikel
Tag:

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.

  • Setelah itu akan muncul layar seperti berikut

  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.

  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 :

  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.

SUMBER

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s