Firebug, opisywany już na naszym serwisie choćby w artykułach Firebug podstawy i Debugowanie aplikacji AJAX za pomocą FirePHP, jest bardzo dobrym narzędziem dla programisty aplikacji webowych. Sam w sobie posiada bardzo przydatne opcje, jednak rozszerzenie go za pomocą wtyczek daje jeszcze lepsze rezultaty. Poniżej opiszę krótko, moim zdaniem, najciekawsze z nich.

W kwestii technicznej dla mniej wtajemniczonych - wtyczki do Firebuga są tak naprawdę wtyczkami do Firefoxa, jednak nie zadziałają, jeśli Firebuga zabraknie.

• FirePHP

Dzięki temu dodatkowi debugowanie aplikacji PHP staje się znacznie prostsze. Zwykle trudno uchwytne problemy z AJAXem stają się widoczne jak na dłoni. Sam Firebug potrafi je przybliżyć od strony przeglądarki, dzięki FirePHP możemy prześledzić np. etapy formułowania odpowiedzi jeszcze po stronie serwera.
Na FirePHP składają się dwie części - jedną jest dodatek do przeglądarki, drugą biblioteka do zainstalowania na serwerze. W wielu popularnych frameworkach można łatwo włączyć obsługę FirePHP bez konieczności doinstalowywania części serwerowej - mają ją już w swojej bibliotece.

• Firecookie

Ciasteczka potrafią przysporzć problemów. I nie chodzi tylko o dietę, ale również o aplikacje webowe. Ich tworzenie i testowanie często wymaga szybkiego dostępu i możliwości manipulowania plikami cookie. Firecooki to właśnie umożliwia. Dostarcza dodatkową zakładkę do Firebuga, w której możemy podejrzeć listę ciasteczek, szczegóły na ich temat, a także usunąć wybrane ciasteczka znacznie łatwiej niż przkopując się przez ustawienia Firefoxa. Możemy też utworzyć ciasteczko dla danej sesji nieco łatwiej, niż wpisując odpowiedni kod w konsoli JavaScript.

• Firebug Autocompleter

Konsola Firebuga dostarcza od razu prosty autocompleter podpowiadający obiekty i metody dostępne w danym oknie. Dodatek Firebug Autocompleter przenosi to na nowy poziom pokazując listę obiektów, metod a także słów kluczowych i zasobów w miarę jak piszemy kod w konsoli.
Co prawda konsola nie służy bezpośrednio do programownia, ale taki gadżet jest naprawdę fajny.

• Firepath

Standardowo Firebug posiada okna inspekcji HTML i DOM. Jednak w programowaniu aplikacji nie przyda nam się ręczne wskazanie obiektów - musimy je wybrać za pomocą selektorów. Są różne metody - selektory CSS, XPath lub wyrażenia silnika Sizzle obecnego np. w jQuery. Dodatek FirePath pozwala na sformułowanie, przetestowanie lub podejrzenie wyników działania takich właśnie selektorów. Przydatne zwłaszcza na początku zabawy z selektorami, ale i później całkiem pomocne.

• Inline Code Ffinder

Jak nakazują Wojownicy Czytelności i Czystości Całkowitej, czyli W3C HTML nie powinien zawierać wpisanych kodów JavaScript i CSS (inline'ów mówiąc skrótowo). Ten dodatek pozwoli wyśledzić wszystkie takie przypadki na stronie. Każdy znacznik, który zawiera wpisany styl jest otoczony na zielono, elementy z wpisanym JavaScriptem są obramowane na czerwono. To, co jest w nich "nie tak" można sprawdzić najeżdżając na element. Dziwną rzeczą w tym dodatku jest interfejs zajmujący cały panel - ja nie znalazłem dla niego zastosowania.

• FireQuery

Ta wtyczka, jak można wnioskować już z nazwy, przydaje się przy pracy z jQuery. Elementy, którym przypięte są funkcje obsługi zdarzeń są specjalnie oznaczone, choć mnie ta funkcja rozczarowuje w porównaniu z, niestety już niedostępnym dla najnowszego Firefoxa, FireEvents. Ciekawostką jest natomiast łatwość wstrzyknięcia do strony jQuery (oczywiście na czas bieżącego żądania - np. po to, aby sprawdzić jakieś polecenia w konsoli). Ale chyba najlepszą rzeczą jest tu - to jedno z moich nowszych odkryć - jQuery Lint, czyli linter wykorzystania jQuery. Bardzo fajne narzędzie, a dzięki tej wtyczce dostępne na wyciągnięcie ręki.

• Firerainbow

Zakładka Skrypt w Firebugu jest szara i smutna. Do czasu, aż pobierzemy wtyczkę Firerainbow. Wtedy pojawia się tam kolorowanie składni i od razu znacznie wygodniej możemy korzystać z tego świetnego debuggera.
 

Osobną kategorią są jak dla mnie wtyczki biorące na celownik problemy ze stylami. Osobiście rzadko zajmuję się kompleksowo CSSem. Ale widzę w tych wtyczkach potencjał, który kiedyś uratuje mi może nie życie, ale na pewno sporo czasu i nerwów.

• Firepicker

W Firebugu możemy podmieniać na żywo kolory elementów, choćby po to, aby poeksperymentować z wyglądem. Z tym dodatkiem to o tyle łatwiejsze, że zamiast wpisywać kolor ręcznie, możemy wybrać go z palety podobnej jak w prostych programach graficznych.

• CSS Usage

Fajne narzędzie, dzięki któremu możemy sprawdzić, w jakim stopniu wykorzystujemy nasz arkusz stylu, a co jest w nim nadmiarowe. Dodajmy do tego możliwość wyeksportowania oczyszczonej wersji - i już widać, do czego może nam się ta wtyczka naprawdę przydać.

• Pixel Perfect

Gdy mamy już zapierający dech w piersiach projekt graficzny, to dobrze byłoby go wiernie przenieść na naszą stronę. Jeśli jednak nie ma się do tego pewnej ręki - warto skorzystać z tej wtyczki. Pozwoli nam nałożyć obrazek z layoutem na naszą stroną z odpowiednią przezroczystością - teraz możemy dopasować wszystko PERFECTyjnie co do PIXELa.

• FireFile

To jest materiał na osobny artykuł - i swój artykuł dostanie. Póki co krótko - mieszamy w CSSie za pomocą Firebuga i co dalej? Przenosimy zmiany do arkusza, po drodze gubiąc lub myląc połowę. Ta wtyczka pozwoli zapisywać zmiany w CSSie z poziomu Firebuga (oczywiście nie na każdej stronie).

Mam nadzieję, że znaleźliście na tej liście jakieś ciekawe narzędzia dla siebie. Powodzenia i niech ułatwiają Wam programistyczne i webmasterskie życie ;)

Żeby trzymać porządek we wtyczkach i np. nie uruchamiać ich przy zwykłym przeglądaniu internetu można stworzyć osobny profil Firefoxa z zainstalowanymi tymi wszystkimi (lub niektórymi) wtyczkami.