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).
strona http://internetmaker.pl/ nie działa 🙁
jak zapisać zmiany na stałe w szablonie, które sobie już wprowadzimy ? Męczę się i nie wiem jak to zrobić 🙁
Kasiu tego się nie robi w firebug tylko plikach na serwerze 🙂 Firebug daje tylko podgląd na żywo.
Ze zmianami w plikach css rzeczywiście żaden problem, ale jak odnaleźć właściwy plik html?
Pozdrawiam, Andrzej
Andrzej trzeba już znać strukturę szablonu.
Marcin zapraszam na http://www.ekademia.pl/kursy/gdaq z interkursy.pl wycofałem swoje produkty.