Firefox to bardzo popularna przeglądarka, która pod względem ilości użytkowników ustępuje jedynie Internet Explorerowi. W standardowej konfiguracji oferuje wyłącznie podstawowe opcje, jednak dzięki wtyczkom staje się o wiele bardziej uniwersalna. W tym artykule pokazujemy, jak z popularnego lisa stworzyć narzędzie wspomagające pracę webmasterów i programistów.

Możliwość zainstalowania ogromnej ilości różnego rodzaju pluginów pozwala na dostosowanie Firefoxa do potrzeb i wymagań użytkownika. Dzięki temu, że udostępniono wiele wtyczek stworzonych z myślą o webmasterach i programistach zajmujących się projektowaniem stron i serwisów internetowych, przeglądarka Mozilli może stać się bardzo dobrym narzędziem usprawniającym ich pracę. Wystarczy tylko zainstalować i korzystać z pluginów, które opisaliśmy poniżej.


1. FireBug - obowiązkowy dodatek dla każdego webmastera
Firerbug to bez wątpienia jedna z najbardziej popularnych i najlepszych wtyczek dla Firefoxa, które wspomagają pracę programistów i webmasterów. Posiada ona multum przydatnych opcji pozwalających na natychmiastowe sprawdzenie efektów pracy. Aplikacja umożliwia podejrzenie kodu HTML, CSS i JavaScript, pozwalając na jego edycję w czasie rzeczywistym. Dzięki temu możliwe staje się korygowanie wszelkich błędów i modyfikowanie strony na bieżąco. Niezwykle pomocną funkcją jest debugowanie i wykonywanie kodu JavaScript, co jest niespotykane w innych tego typu narzędziach. Ponadto FireBug oferuje wyświetlanie strukturalnego modelu dokumentu (DOM), pokazuje wszelkie informacje na temat zaznaczonych obiektów i posiada multum innych opcji, które przydadzą się każdemu programiście i webmasterowi. Pozycja bezwzględnie obowiązkowa.



Pobierz FireBug.

2. Web Developer Toolbar - komplet potrzebnych funkcji
Web Developer Toolbar w gruncie rzeczy posiada podobne funkcje jak FireBug. Różni się natomiast miejscem usytuowania w przeglądarce, gdyż nie uruchamia się go w nowym oknie tak jak FireBug, lecz jest umieszczony bezpośrednio pod paskiem zakładek. Z tego poziomu ma się dostęp do takich funkcji jak włączanie i wyłączenia skryptów Java i JavaScript, grafik umieszczonych na przeglądanej stronie internetowe, ciasteczek czy tabelek. Ponadto można przeglądać, edytować i walidować kod HTML, odczytywać plik CSS, wyświetlać informacje na temat określonych obiektów i elementów witryny, dostosowywać rozmiar okna Firefoxa do wielkości danego monitora i wiele, wiele więcej. Choć ze względu na swoją rozbudowaną funkcjonalność Web Developer Toolbar może być zamiennikiem dla FireBuga, to polecamy korzystanie z obu tych narzędzi jednocześnie.

Pobierz Web Developer Toolbar.

3. FireFTP - klient FPT w przeglądarce
Każdy webmaster i programista jest zmuszony do przesyłania plików na serwer, aby udostępnić je w Sieci. W tym celu z reguły wykorzystywane są programy trzecie, czyli klienty FTP. A jakby tak doposażyć Firefoxa w tego typu narzędzie? Znacznie uprawniłoby to pracę twórcom stron i nie zmuszałoby ich do korzystania z kolejnych aplikacji. Właśnie w tym celu powstał FireFTP. Program uruchamia się jako nowa karta, z której poziomu można wysyłać pliki na serwer. FireFTP nie jest byle jakim, zastępczym narzędziem, ale pełnoprawnym i funkcjonalnym klientem FTP obsługującym wiele połączeń, wznawiającym połączenia, posiadającym wsparcie dla metody Przeciągnij i upuść, oferującym opcję synchronizacji danych pomiędzy dyskiem a serwerem i umożliwiającym podejrzenie właściwości plików bezpośrednio na serwerze. Bardzo przydatna wtyczka.

Pobierz FireFTP.

4. IE Tab - dostosuj stronę do Internet Explorera
Nie od dziś wiadomo, że Internet Explorer to zmora i bolączka dla każdego webmastera. Fakt, że przeglądarka od Microsoftu potrafi wyświetlać strony internetowe w inny sposób niż pozostałe przeglądarki, sprawia, że trzeba do niego dopasowywać witryny. Jest to nużące i niezbyt ciekawe, ale niestety konieczne, jeśli zależy nam na użytkownikach. Wszak Internet Explorer jest ciągle najpopularniejszą przeglądarką. Aby dostosować stronę do niego, nie trzeba jednak z niego korzystać. Wystarczy tylko Firefox, pod warunkiem, że ma się zainstalowaną wtyczkę IE Tab. Zasada jej działania polega na tym, że wbudowuje ona przeglądarkę Internet Explorer w Firefoxa i otwiera ją w nowej karcie. Uruchamiając jakąkolwiek witrynę internetową z poziomu nowej karty, widać, jak jest ona wyświetlana przez przeglądarkę Microsoftu. I nie trzeba nawet ani chwilę jej uruchamiać. Bo i po co, w końcu po to mamy liska, prawda?

Pobierz IE Tab.

5. YSlow - liczy się każda milisekunda
Nie od dziś wiadomo, że o jakości strony, długości odwiedzin i ilości użytkowników w pewnym stopniu decyduje czas jej ładowania w przeglądarce. Jeśli jest on zbyt długi, zniechęceni internauci zamykają witrynę i przechodzą do konkurencji, a tego nikt nie chce. Aby zapobiec tego typu niemiłym sytuacjom, warto dokładnie przeanalizować czas ładowania strony. W tym celu niezwykle pomocna okazuje się wtyczka YSlow. Pokazuje ona dokładny czas uruchamiania witryny, dodatkowo określając tę wartość dla poszczególnych elementów składających się na stronę. Dzięki temu widać, które obiekty ją spowalniają, co pozwala na ich szybką optymalizację. Ponadto YSlow wyświetla podpowiedzi dotyczące sposobu, w jaki powinno się przyspieszyć uruchamianie strony. Narzędzie jest szczególnie przydatne twórcom dużych serwisów. Co ciekawe, nie jest ono wtyczką przeznaczoną bezpośrednio dla Firefoxa, lecz dla wymienionego początku FireBuga.

Pobierz YSlow.

6. MeasureIt - strona na wymiar
Patrzysz na jakiś element strony i zastanawiasz się, jakie są jego wymiary albo nie wiesz, czy w prawidłowych odległościach od siebie zostały rozmieszczone poszczególne obiekty? Jeśli tak, to znaczy, że przyda Ci się MeasureIt. Po zainstalowaniu tej wtyczki jest ona widoczna na pasku stanu niewielka ikona, a po kliknięciu w nią kursorem staje się cyfrową linijką. Zaznaczając wybrany element lub wskazany obszar, wyświetlają się informacje na temat jego rozmiarów. Dane są podawane w pikselach. Dzięki MeasureIt z powodzeniem skroisz swoją stronę na wymiar.

Pobierz MeasureIt.

7. ColorZilla - pipeta dla webmastera
Jeżeli spodobał Ci się kolor umieszczony na jakiejś stronie internetowej i zamierzasz go wykorzystać w swoim projekcie, lecz nie wiesz, jak się on nazywa, zainstaluj wtyczkę ColorZilla. Jest to narzędzie analogiczne do dostępnej w programach graficznych pipety. Jego zadaniem polega więc na pobieraniu próbek kolorów i przenoszeniu ich do własnej aplikacji. W tym celu wystarczy tylko najechać kursorem na wybraną barwę i kliknąć w odpowiednim miejscu. ColorZilla to bardzo dokładne narzędzie, gdyż przy jego użyciu da się pobrać kolor dosłownie każdego wyświetlanego w przeglądarce piksela. Z tego względu niezwykle pomocna okazuje się lupa pozwalająca na wielokrotne powiększenie wskazanego obszaru. Możliwe jest również mierzenie odległości między określonymi elementami. Satysfakcja gwarantowana.

Pobierz ColorZilla.

8. Total Validator - zapewnia poprawność strony
Choć wykorzystywanie Total Validatora bywa bardzo pomocne, to równie często potrafi doprowadzić użytkownika na skraj załamania nerwowego. Jest to bowiem narzędzie sprawdzające poprawność strony, przede wszystkim pod względem kodu. Bezlitośnie wyłapuje wszelkie błędy w składni, nieprawidłowo działające linki, poziom realizacji założeń dostępności i waliduje witrynę zgodnie z wymaganiami określonymi przez organizację WC3. Nie jest to przyjemne, gdyż wskazuje webmasterowi błędy, które powinno się poprawić, co sprawia, że trzeba kolejne godziny spędzić na dopracowywaniu strony. Mimo wszystko warto się poświecić z myślą o ceniących bezbłędność użytkownikach i wyszukiwarce.

Pobierz Total Validator.

9. EditCSS - szybka i prosta edycja arkusza stylów
Podobnie jak w przypadku Total Validatora, tak i EditCSS jest powieleniem funkcji znajdujących się w aplikacjach FireBug i Web Developer Toolbar. Mimo to warto mu się bliżej przyjrzeć, ponieważ jest to poręczne, niewielkie i szybkie narzędzie. Jak można się domyślać, służy ono do obsługi plików CSS. Przy jego użyciu da czytać i w czasie rzeczywistym modyfikować arkusze stylów, na bieżąco podglądając wprowadzane zmiany. Kod wyświetla się w panelu bocznym, skąd można go również eksportować na dysk twardy. Szybko, łatwo i skutecznie.

Pobierz EditCSS.

10. Extended Statusbar - miernik danych strony
Extended Statusbar to kolejne niewielkie i jednocześnie przydatne narzędzie. Rezyduje tuż pod paskiem zakładek, gdzie wyświetla krótkie dane na temat długości ładowania strony, ilości wczytanych plików graficznych, liczby ściągniętych bajtów oraz procentowy stopień załadowania witryny w danym momencie. Dzięki temu można natychmiastowo ocenić, czy strona nie jest zbyt opasła i czy się prawidłowo i w całości wczytuje. Extended Statusbar nie jest może jakimś innowacyjnym i odkrywczym narzędziem, niemniej jednak jego zgrabność i komfortowe rozmieszczenie sprawia, że warto po niego sięgnąć.

Pobierz Extended Statusbar.

Zapomnieliśmy o jakichś innych godnych uwagi pluginach? Jeśli tak, to zachęcamy do dzielenia się swoimi opiniami w komentarzach.