Firebug – as w rękawie webdevelopera

Firebug jest darmowym rozszerzeniem przeglądarki Mozilla Firefox, które znacząco ułatwia pracę nad wyglądem serwisu. W tym artykule poznasz sposoby, dzięki którym będziesz mógł tworzyć strony szybciej i skuteczniej. Dzięki temu oszczędzisz cenny czas, który dotąd poświęcałeś na żmudne poszukiwanie błędów i wprowadzanie poprawek.

Po pobraniu i zainstalowaniu Firebuga spod adresu http://getfirebug.com, w prawym dolnym rogu twojej przeglądarki pojawi się nowa ikona z wizerunkiem insekta. Po kliknięciu na niej ujrzysz poziomy panel, wykorzystujący część okna przeglądarki. Jeśli wolisz, aby Firebug znajdował się w osobnym oknie, możesz je wydzielić, klikając na ikonę ze strzałką w prawym górnym rogu panelu.

Podstawową częścią interfejsu jest pasek zakładek: Konsola, HTML, CSS, Skrypt, DOM oraz Sieć. Jak się zapewne domyślasz, każda z nich odnosi się do pewnego aspektu działania serwisu. Na początek przyjrzyjmy się sekcji HTML.

{flv}firebug{/flv}

Zakładka HTML

Panel dzieli się na dwie części. Po lewej stronie wyświetlona jest wygenerowana struktura HTML dokumentu, zaś po prawej – lista właściwości, które przypisane są do danego elementu. Prawa część podzielona jest na 3 części: Styl, Układ oraz DOM.

Styl. Domyślnie jest to aktywna zakładka. Zawiera listę właściwości CSS, wyświetlonych kaskadowo na zasadzie \”od szczegółu do ogółu\”. Na samej górze pokazane są właściwości najbliższe danemu elementowi (np. przypisane do niego na podstawie klasy czy identyfikatora), a niżej możemy zobaczyć własności odziedziczone z elementów wyższego poziomu.

Jeśli dana właściwość została przekreślona, oznacza to, że do elementu istnieje przypisana nowa wartość, w bliższej mu deklaracji. Obok każdej deklaracji CSS widoczna jest nazwa pliku, w którym jest ona zawarta, wraz numerem linii, w której możemy ją znaleźć.

Układ. W tym miejscu mamy wizualizację modelu pudełkowego (ang. box model) danego elementu. Są to dokładne informacje o jego wymiarach, zastosowanym dopełnieniu, marginesach oraz obramowaniu.

Własności te mają decydujący wpływ na odpowiednie ułożenie obiektu względem innych elementów na stronie. Chcesz więcej? Najedź kursorem na wizualizację, a na ekranie ukażą się linie prowadnic i linijki, precyzyjnie wskazujące wymiary obiektu. Funkcja ta robi naprawdę duże wrażenie.

DOM. Pod tą zakładką kryje się dokładna lista obiektów i funkcji użytych w dokumencie; standardowo dostępnych w DOM oraz dodanych z kodu JavaScript.

Jesteś tu w stanie dokładnie poznać własności wybranych elementów, co jest nieocenionym ułatwieniem podczas pisania własnych skryptów.

Inspekcja budowy dokumentu

Dzięki tym informacjom, klikając na dowolny element drzewa (lub jeśli wolisz, poruszając się po nim za pomocą kursorów klawiatury), masz pod ręką szczegółowe dane dotyczące stylów CSS, użytych do jego wyświetlenia w przeglądarce, a także wielu innych właściwości.

Istnieje również dużo bardziej wygodna metoda podglądania kodu. Kliknij na przycisk \”Zbadaj\” na pasku powyżej zakładek w panelu Firebuga, a następnie skieruj kursor na okno z zawartością strony. Zobaczysz, że elementy, nad którymi znajduje się kursor (np. akapity, nagłówki, odnośniki), zostaną obramowane, a panel Firebuga dynamicznie zmienia swoją zawartość, pokazując właściwości wskazanych elementów. Kliknij na danym elemencie, aby zatwierdzić jego wybór. Możesz także wskazać dany element poprzez kliknięcie na nim prawym przyciskiem myszy i wybranie z menu kontekstowego opcji \”Zbadaj element\”.

Bez modyfikacji nie ma zabawy

Firebug nie byłby jednak tak cenionym narzędziem, gdyby jego rola sprowadzała się tylko do wyświetlania informacji. Dzięki niemu jesteś również w stanie modyfikować \”w locie\” praktycznie wszystkie aspekty wyświetlanej w przeglądarce strony. Oznacza to, że możesz wprowadzać dowolne modyfikacje w jej wyglądzie i zachowaniu bez jej przeładowania.

Przykładowo, klikając na właściwość lub wartość reguły CSS na zakładce Styl, możesz wywołać pole edycji danej reguły i wprowadzić nowe dane. Firebug jest tu o tyle pomocny, że dostarcza zestaw możliwych do wprowadzenia wartości wraz z ich autouzupełnianiem.

Dodatkowo, jeśli dana właściwość ma charakter jednostkowy (np. font-size, gdzie możemy wpisać jednostkę w pikselach), możesz zmniejszać lub zwiększać wartość jednostki klawiszami Up oraz Down (o 1) oraz Page Up i Page Down (o 10).

Zmiany odnoszące się w danej regule CSS odniosą efekt we wszystkich elementach, na które reguła ta ma wpływ. Efekt zmian jest na bieżąco wyświetlany w oknie przeglądarki. Eksperymenty z CSS jeszcze nigdy nie były tak proste.

Idźmy dalej. Aby deaktywować regułę CSS, kliknij na ikonę szarego przekreślonego okręgu, który pojawi się po lewej stronie reguły nad którą trzymasz kursor. Aby dodać nową regułę, kliknij dwukrotnie na pustym polu w pobliżu danej deklaracji CSS.

Możesz również edytować kod HTML odpowiedzialny za wyświetlanie elementu. W tym celu kliknij dwukrotnie na danym elemencie po lewej stronie panelu lub użyj przycisku \”Edytuj\” na prawo od przycisku \”Zbadaj\”. Być może zainteresują cię inne opcje dotyczące elementów HTML, dostępne z menu kontekstowego, takie jak dodawanie nowych atrybutów czy usuwanie całych elementów.

Dzięki powyżej opisanym możliwościom Firebuga, jesteś w stanie błyskawicznie wprowadzać odpowiednie poprawki na stronie bez zagłębiania się w zawiłości jej kodu źródłowego. Rozważ następujący przykład: powiedzmy, że zostałeś poproszony o modyfikację wyglądu pewnego serwisu internetowego. Twoim zadaniem jest wprowadzenie kilku zmian, np. zmiany koloru hiperłączy w menu i stopce, bądź poszerzenie wybranej kolumny.

Standardowo modyfikacje takie mogły odbywać się poprzez studiowanie źródła strony i plików CSS w poszukiwaniu odpowiednich deklaracji. W przypadku, gdy arkusze stylów składają się z wielu złożonych i nadpisujących się nawzajem reguł, trudno jest znaleźć od razu odpowiednie fragmenty kodu.

Z Firebugiem rozwiązanie jest proste: wskazujesz kursorem wybrane elementy na stronie, od razu otrzymując informacje co zmienić i jak. Możesz dokonywać dowolnych poprawek, które natychmiast są widoczne na stronie. A kiedy osiągniesz zadowalający efekt, otwierasz edytor i dokonujesz sprawdzonych zmian. Z pewnością docenisz wygodę, którą zapewnia Firebug.

Zakładki CSS, DOM i Skrypt

Pora przyjrzeć się pozostałym zakładkom w głównym panelu Firebuga. Dwie z nich, CSS oraz DOM, są już ci znajome. Wyświetlają one w pełnym oknie to, co zdążyliśmy poznać już wcześniej.

Warto tu dodać, że w zakładce CSS możesz edytować kod wyświetlonych plików CSS. W tym celu kliknij na przycisk \”Edytuj\” u góry i zmień treść pliku. Dodatkowo na prawo od tego przycisku znajduje się menu rozwijalne, z którego wybierzesz konkretne źródło stylów do wyświetlenia.

W zakładce Skrypt znajdziesz kompletny kod JavaScript zastosowany na danej stronie. Dodatkowo wyświetlone są źródła (pliki JavaScript bądź skrypty zadeklarowane bezpośrednio w dokumencie). Firebug pozwala również na debugowanie JavaScriptu poprzez m.in. ustawianie breakpointów z konstrukcjami warunkowymi czy podgląd zmiennych. Daje to możliwość dokładnej obserwacji wykonywanych skryptów, co doceni każdy programista.

Zakładka Konsola

Na osobne omówienie zasługuje wbudowana konsola. W przypadku wystąpienia błędu na stronie, zostanie on wyświetlony w konsoli. Konsoli można także używać do wyświetlania informacji generowanych przez JavaScript – jeżeli dotąd używałeś do tego celu polecenia alert(), z pewnością powinieneś zapoznać się z tą metodą. Jej użycie jest proste i sprowadza się do umieszczenia w kodzie JavaScript polecenia:

console.log(\'informacja, która zostanie wyświetlona w konsoli\');

Powyższe polecenie spowoduje pozostawienie informacji (loga) w konsoli. Istnieją także inne, bardziej zaawansowane możliwości logowania, o których możesz przeczytać w dokumentacji Firebuga.

Programistów JavaScript z pewnością zainteresuje również funkcja wyświetlania zestawienia użytych funkcji JavaScript, wraz z czasem ich wykonywania na stronie. Po kliknięciu na przycisk \”Profiler\”, Firebug prześledzi wykonywanie skryptów, po czym – kiedy naciśniesz przycisk ponownie – wyświetli wynik w formie tabeli. Jest to pomocne do zwiększania wydajności własnych skryptów. Daje możliwość ocenienia, które z nich wykonują się najdłużej.

Konsola nie byłaby jednak konsolą, gdyby nie możliwość wpisywania własnych poleceń. Pole do wprowadzania komend znajduje się na dole – poprzedzone jest niebieskimi znakami zachęty. W tym miejscu możesz wpisać dowolny kod JavaScript. Masz tym samym wpływ na zachowanie załadowanego dokumentu. Na przykład, jeśli wpiszesz:

document.body.style.display = \'none\';

spowoduje to wyświetlenie pustej strony (poprzez ukrycie elementu body).

Jeśli do dokumentu dołączona jest biblioteka JavaScript w rodzaju jQuery, możesz uzyskać ciekawe efekty, manipulując zawartością dokumentu poprzez wpisywanie prostych konstrukcji. Pole do wprowadzania tekstu możesz powiększyć poprzez kliknięcie na czerwony przycisk w prawym dolnym rogu konsoli.

Zakładka Sieć

Ostatnia zakładka zawiera informacje dotyczące wszystkich plików, które są pobierane podczas ładowania strony, wraz z danymi o czasie ich wczytywania, rozmiarze i nagłówkach HTTP. To tutaj na bieżąco wyświetlane są szczegółowe rezultaty zapytań XMLHttpRequest, w przypadku kiedy strona korzysta z AJAX-a.

Zakładka Sieć podzielona jest na kilka podzakładek, z czego domyślnie aktywna jest podzakładka Wszystko. Przechodząc do kolejnych pozycji, otrzymasz informacje o wygenerowanym pliku HTML, dołączonych arkuszach stylów, JavaScript, zapytaniach XMLHttpRequest, plikach graficznych oraz animacjach Flash.

Klikając na ikonę plusa obok wybranego elementu, rozwiniesz szczegółowe dane dotyczące jego transferu z serwera do przeglądarki. Są to m.in. informacje o serwerze, kodowaniu, cache czy ciasteczkach.

Firebug oferuje także ciekawą opcję podglądu przesyłanych zapytań AJAX-a. Kiedy dane zapytanie zostanie wysłane, wyświetli się w zakładce XHR (a także w konsoli). Dzięki temu otrzymasz możliwość wglądu w przesłane zmienne, ich wartości i odpowiedzi serwera. Informacje te mogą stanowić nieocenioną pomoc podczas rozwijania aplikacji bogato wykorzystujących AJAX-a.

Koniec z tworzeniem stron po omacku

Firebug jest narzędziem, bez którego trudno po jakimś czasie wyobrazić sobie tworzenie serwisów internetowych. Zachęcam do własnych eksperymentów, ponieważ jego funkcjonalność można jeszcze dodatkowo zwiększyć.