Vodič je stariji od 2 godine i možda nije u potpunosti aktualan. Za provjeru, koristite “pitaj učitelja”.

Firebug: alat za svakog web developera

Firebug: alat za svakog web developera
Autor članka: Igor Kovačić
Kategorije: Programiranje
Datum objave: 24.08.2011

Svaki ozbiljan web developer mora imati i ozbiljne alate za rad, zato je Firebug alat koji jednostavno morate imati. U ovom vodiču pogledajte kako ga instalirati te osnove korištenja.

Za početak, trebat će Vam Mozilla Firefox. Usudimo se reći kako je to najbolji browser za web development. U vrijeme pisanje ovog vodiča aktualna je verzija 6.

Firebug, dodatak za Firefox, možete preuzeti ovdje.

firebug instalacija

Pritiskom na Add to Firefox preuzet ćete Firebug.

Nakon instalacije i ponovnog pokretanja Firefoxa, Firebug je spreman za rad.

Firebug se otvara tako da kliknete na ikonicu u gornjem desnom uglu:

firebug open

ili tako da pritisnete tipku F12.

Osnove korištenja

Ovaj alat nudi nam nekoliko glavnih mogućnosti poput:

  • Pregleda i izmjene HTML kôda
  • Pregleda i izmjene CSS kôda
  • Pregleda, pokretanja i debugiranja javascript kôda
  • Pregleda DOM-a (Document Object Model)
  • Pregleda zahtjeva i odgovora na zahtjeve (request)

Bitno je napomenuti kako izmijenjeni kôd neće biti spremljen i da će to biti vidljivo samo na Vašem računalu. Firebug je alat koji olakšava razvoj web aplikacija.

firebug

Za vježbu možemo pokušati izmijeniti dio HTML-a na Google.hr naslovnici.

Pritisnimo F12, odaberimo tab HTML i pritisnimo alat označen kao na slici ispod:

firebug inspect

Odvucimo strelicu do natpisa Hrvatska ispod Google logotipa i kliknimo.

firebug primjer

Zatim pritisnimo Edit i upišimo nešto različito od toga.

firebug edit

Do editiranja smo mogli doći i tako da smo kliknuli desnim klikom na Hrvatska, a zatim Inspect element.

Pogledajmo rezultat ;)

firebug primjer

Nakon dužeg korištenja Firebuga za razne stvari nećete moći bez njega.

Nadamo se da je ovaj vodič koristio! ;)

Komentirajte prvi!

Pratite komentare na članak 'Firebug: alat za svakog web developera' putem RSS feeda.

Ostavite komentar na ovaj članak

Uvredljivi i spam komentari biti će obrisani. Ukoliko se Vaš komentar ne pojavi odmah, pričekajte da ga odobrimo ;-). Odgovore na pitanje brže ćete dobiti ukoliko nas kontaktirate putem forme pitajte učitelja.