Apa itu Firebug dan fungsinya bagi blogger

Firebug

Firebug adalah salah satu addons yang wajib ada pada web browser kegemaran aku, Mozilla Firefox. Firebug ni merupakan salah satu tool bagi web developer. Aku bukan web developer, tapi kenapa aku menggunakan Firebug? Dah tentu la untuk kerja-kerja blogging. Firebug dah banyak membantu aku dalam menguruskan blog terutamanya dalam aktiviti mengubahsuai theme.

Mungkin ramai lagi yang masih belum tau kehebatan Firebug ni, kan? Ada juga yang tak tau langsung tentang kewujudan ‘serangga’ ni. So, silakanlah membaca hasil penulisan daripada apa yang aku faham tentang Firebug!

Firebug merupakan salah satu addons untuk Firefox yang perlu ada bagi seseorang web developer. Dengan firebug, kita dapat mengedit, mendebug dan memonitor CSS, HTML, dan JavaScript secara live tanpa perlu membuka file editor. Firebug boleh didapatkan di kedai berhampiran http://getfirebug.com atau di laman khas addons Firefox.

Fungsi Firebug:

  • Menampilkan HTML dalam bentuk yang mudah dibaca. Formatnya disusun dalam bentuk colapsible tree. Ini membantu kita dalam mendebug susunan tree HTML serta dapat mengubah gaya dan susun aturnya secara real-time.
  • Mempunyai ‘inspector’, di mana kita boleh melihat style dan komponen pada mana-mana web dengan mengklik komponen tersebut. Kita juga dapat mengedit style dan komponen tersebut.
  • Menggunakan JavaScript Debugger tercanggih yang tersedia pada mana-mana browser
  • Menganalisa penggunaan rangkaian dan prestasi dengan tepat
     

Lepas dah install, sila restart web browser (Firefox) dan korang akan nampak 1 ikon serangga berwarna kelabu di status bar Firefox, iaitu di bahagian bawah sebelah kanan.

Untuk mengaktifkannya, klik pada ikon tu dan Firebug akan terbuka pada bahagian bawah di laman web. Kemudian, pengalaman korang bersama Firebug akan bermula. Korang akan suka dengan Firebug ni jika korang faham dan mahir dengan fungsi-fungsinya.

Fungsi Panel Firebug:

Pada panel Firebug terdapat beberapa tab dengan fungsi-fungsinya yang tersendiri.

NET Firebug

  • Console – melihat aktiviti-aktiviti debuging.
  • HTML – melihat code HTML pada sesebuah lawan web.
  • CSS – melihat code CSS pada laman web.
  • Script – melihat code javascript yang diload.
  • DOM – melihat fungsi-fungsi yang terdapat pada sesebuah laman web.
  • Net – melihat apa yang diload pada website, urutan loading, status dan kepantasannya.
     

HTML DOM Inspector dan Modifikasi Elemen HTML

Salah satu fungsi penting yang ada pada Firebug adalah HTML DOM Inspector, di mana dengan menggunakan Firebug korang dapat melihat elemen-elemen tertentu dalam web secara lengkap, baik dari segi code HTML mahupun CSS tanpa perlu mencarinya satu persatu. Cukup dengan menekan butang ‘inspect’ (button kedua dengan simbol pointer biru) atau dengan hanya klik kanan pada object yang mahu di’inspect’.

Selain melihat, korang juga dapat membuat editing pada tree HTML yang ada. Hanya perlu klik kanan pada element tree di panel HTML Firebug, dan akan kelihatan pelbagai pilihan yang dapat dilakukan seperti Edit, Copy dan Delete elemen tersebut.

CSS Inspector dan Modifikasi CSS

CSS merupakan elemen penting pada sesebuah laman web yang akan menentukan bentuk dan susun atur pada laman web. Kadang-kadang ianya menyusahkan programmer. Dengan bantuan Firebug, programmer dengan mudah dapat mengedit dan mengubah style yang ada pada laman web. Tengok gambar kat bawah ni:

Firebug CSS Tooltip
Tooltips untuk melihat Image background/logo di CSS
Mengedit CSS secara Live
Disable Style pada
element tertentu

Video Pengenalan Firebug

Blogger dan Firebug

Bagi blogger-blogger yang ingin mengedit theme dan sebagainya yang berkaitan dengan coding, Firebug akan memudahkan kerja korang. Walau bagaimanapun, sedikit pengetahuan tentang code HTML diperlukan. Pengetahuan yang tahap basic pon dah kira OK asalkan korang tau apa yang korang buat. Jangan risau sebab apa-apa perubahan pada theme blog yang korang buat dengan menggunakan Firebug ni takkan mengganggu blog korang. Ianya hanya mengubah paparan semasa korang mengedit je. Refresh dan paparan blog akan kembali seperti sediakala.

Kalau nak buat editing yang sebetul-betulnya kat blog, korang kena la edit di blog korang. Firebug hanya memudahkan korang faham dan tahu bahagian-bahagian yang perlu diubah, coding apa yang perlu digunakan, editing yang perlu dibuat, dan sebagainya.

PERHATIAN! Penipuan Menggunakan Firebug

Yess!! Dengan Firebug juga pelbagai penipuan boleh dilakukan. Aku nak ingatkan, jangan mudah percaya dengan hasutan penggiat bisnes di internet (sesetengah bisnes sahaja) yang memaparkan screenshot berunsur pendapat lumayan, duit jutawan, wang besar, transaksi bank yang berjumlah ribu-ribu juta-juta Ringgit Malaysia, USD atau sebagainya. Itu semua boleh dibuat menggunakan Firebug. ‘Inspect’ bahagian yang nak diubah, buat editing mengikut jumlah pendapatan yang kita nak, lepas tu print screen, and then save ke format .jpg, .gif atau sebagainya, kemudian upload ke internet. Contoh penipuan adalah seperti kat bawah ni.

Anarm Jutawan

Amacam? Kaya tak aku? Muahahaha.. Jumlah pendapatan yang terpapar dalam gambar tu boleh juga dibuat menggunakan Adobe Photoshop, tapi buat pakai Firebug akan nampak lebih terpelihara keasliannya tanpa sebarang kesan editing. Kalau pakai Photoshop dah tentu nampak bahagian-bahagian yang dipotong, dipadam, ditampal dan sebagainya (walaupun sedikit tetap akan nampak). Edit dengan Firebug? “Superb” je yang aku boleh cakap.

OK.. Buat masa ni, tu je kot yang aku nak kongsikan dengan korang. Kalau nak lebih faham bagaimana Firebug ni berfungsi, korang kena la cuba sendiri. Belum cuba belum tau kan? Tak kenal maka tak cinta. Hehe..

Dapatkan Firebug di kedai berhampiran http://getfirebug.com sekarang atau di laman khas addons Firefox. Bagi pengguna Google Chrome, korang boleh dapatkan versi Firebug Lite. Cara menggunakannya di Google Chrome aku tak pasti macam mana sebab aku lebih kerap pakai Mozilla Firefox. Pengguna Google Chrome pandai-pandai la explore sendiri ye..

Tentang Penulis

Pengasas blog Anarm.Net. Seorang pereka grafik dan laman web. Untuk jemputan event, review produk, food review, advertorial dan segala yang berkaitan, hubungi melalui email : hello@anarm.net


98 Comments

  1. Nak cubalah, terima kasih. ;)
    Entri terbaru di blog Asyrof Asri : [PENGUMUMAN] – Saya Akan Adakan Blogger ContestMy Profile

  2. Makasih gan….
    infonya…

    sekalian mo nanya bagaimana menampilkan postingan artikel blog…
    Sesuai keinginan kita.
    Matur suwun jawabanya…

  3. aku baru tau tentang firebug,, thxs
    Entri terbaru di blog Infoe kita : Cara Mengetahui Masa SuburMy Profile

  4. google chrome memang laju tp kadang2 page dia x render betul. firefox tetap jadi pilihan
    Entri terbaru di blog geekz36 : Tutorial Membuat Sticky Post di BlogspotMy Profile

  5. BolaMalaysiaDOTcom says:

    Anarm anda memang seorang yang berbakat dalam bidang blogging. Saya suka yang gambar nuffnag tu. Beribu-ribu. Wakakakaakaka :w00t: :w00t:
    Entri terbaru di blog BolaMalaysiaDOTcom : Tak terdaya lagi- RajagobalMy Profile

  6. nak try jugak.. dapat belajar lagi godek2 html.. itu je kot yg reti nak guna. function lain tak berapa nak reti :D
    Entri terbaru di blog serol : Nota di facebook-kita boleh percaya keMy Profile

  7. oh.. aku masih jauh ketinggalan, perlu segera mahir dlm paham firebug ni..
    Entri terbaru di blog pejol : Ada perubahan di Facebook- Tak Perasan keMy Profile

  8. Jom Linux says:

    hehe…tak sgka lak leh guna wat tipu..aku pun x terpikir benda2 camtu…pndi betul depa ni :cheerful:
    Entri terbaru di blog Jom Linux : Reviu Fedora 14 Bahagian 1My Profile

  9. Oh… baru aku tahu apa itu firebug… hehehehe

    btw… terkejut jugak aku tgok earning nuffnang ko tu kalau aku tak baca betul2.. huhuhuhuh
    Entri terbaru di blog Ayie : Gambar-gambar yang menarikMy Profile

  10. Assalamualaikum,hehehe terbaik wok harus dicuba menggunakan firebug :).. thank q bro anarm :).
    Entri terbaru di blog Ayieblog : Taklimat Lahitan IndustriMy Profile

  11. dah lama aku install benda alah ni dekat laptop tapi masalahnya tak pandai nak guna. Kena pergi kelas tutorial baru paham agaknye..hehe
    Entri terbaru di blog asma : Aku ingin BebasMy Profile

  12. terkejut jugak la mula2 tgok amaun nuffnang 2.. rupe2ny tipu yerk..

  13. Satu penerangan mengenai firebug yang betul-betul mantap! Syabas dan terima kasih bro kerana sudi membuat artikel ini. :lol:
    Entri terbaru di blog eHyprobulksms : Hyprobulksms skim cepat kayaMy Profile

  14. Aku dah pakai benda alah nie.. Tapi banyak yang aku tak tahu.. Kena banyak2 godek nie.. Tambah2 ko kongsikan pulak tentang penipuan itu.. 1st Time aku tahu.. Hahaha.. Kuno jugak aku nie.. Adeii
    Entri terbaru di blog ProfHariz : Senarai Juara Piala Malaysia 1921-2010My Profile

  15. wah macam bro tahu je aku skank mencari tutor untuk edit themes..
    tq bro..
    tadi google usya jumpa entri bro pasal localhost tu..
    superb..nanti nak cuba..tq sekali gi…
    Entri terbaru di blog syahrilhafiz : Pic Profil Facebook SyahrilHafizCom Terbaru!My Profile

  16. terbaik dari ladang! lps ni makin ramai la yg jadi kaki kencing.. huhu..

  17. pergh…link siap ada bar la plak…ada income ke tu bro? dah lama aku tak pakai firebug ni…maklumlah…takda mood lagi nak ubah2 theme ni…hehe
    Entri terbaru di blog Mohd Isa : Senarai Blog SEO TerhebatMy Profile

  18. aku memang tak tau benda ni dan tak tau guna pun.InsyaAllah aku akan cuba meng ‘expert’ kan diri aku
    Entri terbaru di blog slimdiet2 : TELAH BANYAK KAJIAN MENGENAI KOLOSTRUM DILAKUKANMy Profile

  19. Zala Wajik says:

    Dengan firebug lah aku buang code lagu2 yang autoplay tanpa butang stop di sesetengah blog, kalau aku rajin. miahahaha

  20. blh tipu jgk erk kt firebug..kellaasss :whistle: :whistle: :w00t:
    Entri terbaru di blog apiih : Inspirasi The Beatles Abbey Road album coverMy Profile

  21. Google chrome dah siap ada benda ni.x perlu add on :)
    Entri terbaru di blog Anak Perak : Tamatlah Riwayat Sotong PaulMy Profile

    • @Anak Perak, aku pernah guna google chrome.. inspect element kat google chrome macam takleh wat editing secara live.. untuk tengok code, boleh.. tapi tak tau la sekarang camne sebab dah lama aku tinggalkan google chrome..

  22. perghh…….walaupun dah terangkan…..masih gak tak paham..
    kene baca banyak kali nie baru paham…..huhuhuhuhu

  23. Nizam6281 says:

    Baru tau Firebug ni edit live
    Ingat sama macam Notepad++
    Aku guna tu dulu buat website punya HTML ..

    Apa2 masalah aku contact hang k?

    Entah2 ni yang dorang guna untuk edit ragam2 kat Facebook tu ( Yang sultan melaka, Perdana Menteri, Ayam )

    • @Nizam6281, lebih kurang je dengan notepad++.. aku pon pakai notepad++ jugak.. firebug ni just untuk tengok/edit coding kat bahgian2 tertentu.. nak cari bahgian tu memang susah.. dengan firebug, pakai je function ‘inspect’, terus dapat edit bahgian mana yang kita nak..

  24. owh macam tuh… menarik2… aku nak try buat edit income nuffnang tuh…hehe kasi orang terbeliak mata…
    Entri terbaru di blog zik : Menjadi lebih kreatifMy Profile

  25. samanosuke_04 says:

    Cool gile bleh hack screenshot nuffnang tue, haha!!

    aku guna web developer toolbar untuk bebenda camnie.. aku guna pon sekadar untok tahu teknik CSS bila tengok blog2 yang aku berkenan..
    Entri terbaru di blog samanosuke_04 : Nuffnanger yang Tabah…My Profile

  26. Aku rasa kalau lah takde firebug nih, susah keje aku nak design blog / website ni. Kalau firebug suruh bayar baru boleh guna plugin pun aku sanggup buat. Hee..

    Yang point last sekali menarik minat aku. Akhirnya dah terbongkar rahsia screenshot tuuuu~!

  27. aik komen x masuk lagi

  28. menarik ni kalau ada masa boleh rujuk balik..salam kenal

  29. aku ada juga pasang firebug tu.. tapi sekadar guna untuk check page speed/css, lepas tu edit manual dari dashboard.. tak tau pula banyak lagi fungsi firebug ni. Lagi terkejut tengok fungsi firebug boleh tukar earning tu, hehe
    Entri terbaru di blog kulanz : Filem HAQ Bakal Ditayangkan Pada Januari 2011My Profile

  30. entri ni dah kira lengkap dah untuk pengenalan firebug.
    firebug memang best, banyak membantu nak edit coding.
    pernah gak tukar earning dlm nuffnang guna firebug eheh.
    saja nak tengok dapat earning beribu-ribu…angan-angan sendiri jelah :biggrin:
    Entri terbaru di blog Amirez : Hati-Hati Bila Buat Pembayaran OnlineMy Profile

  31. terbaik penerangan bro..

  32. wah banyak rupanya fungsi firebug ni, memang patut ada ni

    • @etomyam, memang banyak fungsi dia.. dan ada lagi addons2 sampingan yang boleh ditambah pada firebug untuk perbanyakkan lagi fungsi dia.. tapi setakat ni, fungsi default pada firebug ni pon dah kira perfect dah..

  33. Firebug memang banyak guna terutama kalau buat tutorial.
    Entri terbaru di blog GreenLava : Jumping to a different location on the same pageMy Profile

  34. Rasanya ada try pasang add on macam ni. Fungsi dia sama. tgk kat toolbar bertindih2 pulak. Tu yang remove tu. :D

    Apa2 pun plugin ni kira cam dreamweaver. Leh cek apa yg ada kat site kita tu. :D leh edit2. :D

  35. Syafrizal says:

    Memang menarik tapi dulu aku tak reti sangat bab nak godek2 coding ni.. :biggrin:

  36. nice..tp aku pengguna tegar google chrome macam mana
    Entri terbaru di blog khairil : Keselamatan Pengguna Di InternetMy Profile

  37. Nice one ni bro.
    Aku pnh dgr gak mnde ni dulu, tapi malas nak cuba.
    Tapi sbb dah ada review ni, aku dah tau lah sket2 fungsi die. Nampak mmg memudahkan.

    *Tapi aku guna chrome. So bila nak guna add on ni, terpaksa lah guna FF masa nak edit2. hehee
    Entri terbaru di blog Affan : Fakta- Eh- 94 Pengganas adalah bukan MuslimMy Profile

  38. Wahhh macam menarik. Tapi x suke firefox >.<
    Entri terbaru di blog bubbles182 : Lawatan mengejut Ayong- Paeh- Een &amp Aman ke Pulau PinangMy Profile

  39. angka dlm nuffnang tu betul kan? kan? kan? wakaka

  40. Faisal Reza says:

    salam… aku pun dok pakai Firebug… mmg best amat… tp bab penipuan tu baru 1st time terfikir… perrghhh x sangka geliga otak hang.. bab2 camni keh3x…

  41. Rasa nak install addon ni untuk Goggle Chrome tapi kenta tunggu upgrade memory dan harddisk dulu :ninja:

  42. dah ada kt add on Firefox
    tapi jarang guna..tak reti sebenarnya
    kena baca entri ni pelan² – satu² kot baru nak faham

    erk..sebenarnya kena praktis selalu , kan…hehehe
    Entri terbaru di blog Kujie : Kejutan 20102010 – Pengantin BloggerMy Profile

  43. pernah gak dengar firebug ni dulu
    aku nak install terus la macam ni,best function dia
    Entri terbaru di blog wazy : CUMA RM5My Profile

  44. mau mencubaa..
    :D
    Entri terbaru di blog saya_aRief : SANG KENARI VS SANG KIJANGMy Profile

  45. Anzur Anuar says:

    betul bro. firebug terbaek!! :w00t:

    Ping Website ; jom ping entry terbaru anda disini

  46. entri ni bukan ko dah karang lama ker?
    apsal baru keluar?
    berbulan gak aku rasa ni..
    haha..
    btw, saya mmg pengguna Firebug..
    firebug mmg best..

  47. aku pernah dengar je tak pernah try..thanks for info bro :biggrin:
    Entri terbaru di blog aizuddin : 1tradezonemy – Tempat Pengiklanan Terbaru MalaysiaMy Profile

  48. hoho.. baru aku tau macam mana diorang buat. btw. nice entri. aku guna 1% je daripada feature yg ada kat firebug tu

    • @ariff, aku pon guna lebih kurang 1% je kot.. takpon lebih sikit.. buat edit2 code CSS, HTML, curi script kat web2 lain, tu je.. hehe.. function yang lain2 tu ade lagi yang tak berapa nak faham..

  49. Firebug mmg memudahkan kerja. Mmg best!
    Lg1, boleh tambah addon Page Speed, guna bersama Firebug utk dapatkan analisis speed blog.
    Entri terbaru di blog Geothite : Download Percuma 3 Siri Games Command & Conquer ClassicMy Profile

  50. hehe.. wajib guna bagi aku nie.. aku pun baru lagi guba addon nie.. belajar2 godek lagi..

    btw, plugin apa yang ko guna untuk popup bawah kanan nie? tanya jer..
    Entri terbaru di blog menteil : Darjat Seorang Blogger!My Profile

  51. thanks bro.. firebug memang best. Ah! tak tau lak ada orang boleh tipu2 dengan firebug..
    Entri terbaru di blog zuls : Pengiklanan Twitter – Kenapa Tak Dapat Job Jawapan dan CadanganMy Profile

Trackbacks

  1. […] dengan pelbagai rupa dari tetapan theme tanpa dilihat oleh pelawat blog. Lebih kurang macam edit theme guna Firebug kot. Bagi theme WordPress yang menyokong fungsi baru ni boleh tukar warna, background, tajuk dan […]

  2. Anarm.Net says:

    Tukar font blog dengan Google Font API…

    Rata-rata pemilik laman web dan blog biasanya menggunakan font seperti Arial, Georgia, Times New Roman, Trebuchet MS, Tahoma, Verdana dan sebagainya untuk blog mereka. Kini, dengan adanya Google Font API membolehkan pemilik laman web atau blog menukar …

  3. 10 Add-ons Firefox yang perlu ada…

    Mozilla Firefox merupakan web browser kegemaran Sue. Walaupun ramai yang cakap Google Chrome lagi best sebab laju, tapi Sue rasa sama je. Kalau line internet slow, pakai la browser apa pon tetap slow jugak nak bukak web atau blog. Kan? Lagipon Firefox …