JavaScript, Web

Basic Of Firebug II, Javascript Debug

By popular demand 🙂 posting ini akan membahas soal Javascript debugging menggunakan Firebug.

Javascript debugging dalam arti sederhana adalah usaha untuk meresolve bug dalam javascript, so prequisites dalam post yang satu ini adalah memahami basic of Javascript tentunya 🙂

1. Tentu saja mendapatkan firebugnya, bisa didapat disini atau google for “firebug” yourself 🙂

2. Aktifkan settingan yang berhubungan dengan debugging firebugui

Lihat bagian setting yang diberi tanda lingkaran, aktifkan itu semua dengan men-check check boxnya dan menekan tombol Apply 🙂

Apakah mereka?

  • Console akan mengaktifkan JavaScript Console dimana kita bisa pakai untuk memanggil fungsi javascript secara langsung (berguna untuk debugging)
  • Script berguna untuk Java Script Debugging
  • Net berguna untuk mencatat alur request “HTTP” dari page yang bersangkutan (berguna untuk debug AJAX)

More on Console, Script and Net

Advertisements
JavaScript, Web

Basic Of Firebug, Manipulasi HTML

Karena ada beberapa teman yang bertanya soal ini 🙂 dan sedikit sulit untuk mengulanginya dalam kata-kata.

I’ll try to write guide visualnya.

Disclaimer: like I said di judulnya , BASIC OF FIREBUG.. so jangan rant kalo hal dibawah terlalu simple for you extra-ordinary mind *grin*

Tentunya hal pertama yang harus dilakukan adalah memiliki Firebug. firebug bisa didapatkan di Sini atau cari kata kunci “Firebug” di google 😛

Setelah terinstall, akan muncul icon Firebug firebugicon di pojok kanan bawah. atau kamu bisa mengakses lewat menu Tools -> Firebug -> Open Firebug.

saat firebug aktif,  firebug akan ada 2 stripe yang berisi tombol dan tab.

firebuguiStripe pertama akan sangat membantu kita dalam debug, manipulasi dan otak-atik HTML, dan stripe kedua berisi modul-modul firebug (mungkin akan sedikit berbeda tergantung addon yang kamu install.. contoh punyaku memiliki modul SensSEO).  Sedangkan bagian yang aku tandain dengan lingkaran merupakan setting untuk site yang sedang dibuka.. agar semua modul dapat bekerja; setting ini sebaiknya diaktifkan 🙂 (untuk materi kita hari ini sih belum dibutuhkan.. but still coba aktifkan semua saja)

[HTML : Inspect & Edit]

tombol Inspect dan Edit di stripe pertama adalah hal yang berguna dalam HTML+CSS design, inspect berguna untuk memilih elemen yang akan di periksa dan edit berguna untuk memanipulasi kode HTML dari elemen itu.

How? this is a walktrough.

1. Click tombol inspect.

clickinspect

2. Pilih elemen yang akan diinspeksi, dalam contoh ini adalah judul dari sebuah blog-posting di sebuah-blog ga penting 😀

clickelement

As you can see, elemen yang dipilih akan otomatis terpilih di dalam modul HTML (bagian yang berisi source HTML dibawah).  kamu bisa mengubah atribut dari elemen yang terpilih langsung disini dengan cara double-click ke atribut dari elemen yang ada di modul HTML ini.

Tapi untuk mengubah yang lebih (dari class, atribut sampai ke HTMLnya itu sendiri) bisa menggunakan point 4 dibawah

4. click tombol edit saat elemen masih terpilih, maka kode HTML dari elemen akan terlihat dan bisa di-edit untuk testing

editelemen

Dari contoh diatas saya mengubah isi dari tag <A> menjadi “Bloody Bloody”.

Perlu diingat.. perubahan ini dilakukan secara runtime (client-side) alias TIDAK AKAN TERSAVE 😉

Pertanyaannya for you beginners out there,

feature firebug yang satu ini ini buat apa? untuk mengetes efek CSS terhadap sebuah halaman HTML, tes behaviour dari Javascript DOM secara runtime 🙂 dan fungsi-fungsi lainnya…

Jika bahasa saya terlalu sulit.. hmm.. someday kalau pemahaman HTML, CSS dan JS kamu lebih dalam… kamu akan tahu betapa bergunanya fungsi yang ini 🙂 hehe  *kabur*