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..


98 Comments

  1. sehat says

    Makasih gan….
    infonya…

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

  2. asma says

    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

  3. Zala Wajik says

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

    • says

      @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..

  4. 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 )

    • says

      @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..

  5. 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

  6. says

    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~!

  7. Amirez says

    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

    • says

      @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..

  8. GM says

    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

  9. 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…

  10. Anzur Anuar says

    betul bro. firebug terbaek!! :w00t:

    Ping Website ; jom ping entry terbaru anda disini

  11. Jaws says

    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..

  12. ariff says

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

    • says

      @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..

  13. menteil says

    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

Trackbacks

  1. 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 …

  2. 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 …