FireBug NIEZBĘDNE narzędzie każdego webmastera.

Firebug jest wtyczką do przeglądarki internetowej Firefox. Narzędzie to umożliwia podgląd kodu html, css, JS i umożliwia ich edycję w czasie rzeczywistym na stronie. Na blogu miałem zrobić dokładny opis programu i instrukcję korzystania z niego jednak jak się okazało Piotr Arendt na stronie internetmaker.pl napisał artykuł z dokładnym opisem programu dlatego napiszę o moich doświadczeniach z firebugiem. Narzędzie FireBug poznałem pracując w nowej firmie i szczerze zastanawiam się jak mogłem nie korzystając z niego. Gdy pomyślę o ile razy szybciej robił był projekty templatek do Joomli, ile nerwów bym zaoszczędził… To narzędzie jest naprawdę niezbędne w pracy webmasetra. Podam przykład prostego wykorzystania tego narzędzia przy robieniu szablonów do Joomli. Joomla w templatkach ma domyślnie zdefiniowanych x styli o konkretnych nazwach. Żeby cokolwiek zmienić w wyglądzie strony należy znać klasę przypisaną do danego obiektu. Powiedzmy do czytaj więcej jest “read_more”, żeby to sprawdzić musiałem odpalić źródło strony, dalej wyszukać “czytaj więcej” i sprawdzić jaka klasa jest przypisana do tego tekstu i tak przy każdym obiekcie co przy całym projekcie potrafiło zajmować naprawdę sporo czasu. Po zrobieniu x templatek część nazw styli ma się już w głowie 🙂 aczkolwiek nie jest to zbyt ciekawe zajęcie. Jak to wygląda w FireBug? Najeżdżamy na interesujący nas obiekt, klikamy prawym przyciskiem myszki i wybieramy zbadaj element. Na dole ekranu pojawi nam się okno firebuga z pokazanym kodem strony, ładnie kolorowaną składnią, gdzie możemy podejrzeć jaki styl jest przypisany do danego tekstu. Po prawej stronie w “styl” znajdziemy styl css, który opisuje wygląd linka. Co więcej możemy w każdej chwili dopisać sobie co tylko chcemy w kodzie. Możecie np. na żywo zmieniać css i sprawdzać jakie zmiany są dokonywane. Bez zapisywania dokumentu i bez jego odświeżania. Jeśli zmiany nam pasują dopiero wpisujemy je do CSS. Czyż to nie jest rewelacyjna sprawa? Jak widzicie jest to narzędzie bardzo proste i przydatne, a do tego darmowe. Jeśli mamy np. problem z marginesami, paddingami wystarczy przejść w zakładkę “Układ” i widzimy jakie obiekt ma dopełnienie, obramowanie, margines, odsunięcie. Dla mnie rewelacja, ile razy męczyłem się z tego typu problemami. Czasem zastanawiam się czemu nie odkryłem tego narzędzia wcześniej, czemu się tyle męczyłem. Pracując z tym narzędziem poczułem jakbym wszedł w kolejny stopień wstajemniczenia 🙂 Zapraszam do zapoznania się z dokładnym opisem wtyczki na stronie internetmaker.pl oraz do jej pobrania ze strony http://getfirebug.com (z której pochodzą grafiki do tego wpisu).

Jeśli ten artykuł pomógł Ci, masz co do niego jakieś wątpliwości lub pytania “Zostaw komentarz”, a na pewno na niego odpowiem.