Artykuł

getfirebug.com getfirebug.com
lis 23 2009
0

Firebug - opis możliwości wtyczki dla przeglądarki Mozilla Firefox

Tworzenie stron internetowych, od zawsze było niezwykle pracochłonnym zajęciem. Ważny jest tu każdy detal, każdy piksel, czy też każdy akapit tekstu. Stronę trzeba przystosować do różnych systemów operacyjnych, przeglądarek, trzeba obsługiwać różne czcionki, różne rozdzielczości ekranu, koniecznym również staje się przewidzenie faktu, że użytkownik może wyłączyć np. JavaScript, czy ciasteczka, dwie rzeczy, bez których trudno wyobrazić sobie jakąkolwiek stronę internetową. Dlatego też tworzenie, a następnie testowanie i poprawianie strony staję się bardzo żmudnym i czasochłonnym procesem. Doświadczony webdeveloper z pewnością wiele z tych problemów rozwiąże od razu, jednak również w tym przypadku poprawianie strony i wysyłanie poprawek na serwer jest czynnością czasochłonną. Czy jest zatem jakiś ratunek? Tak - jest nim Firebug niezwykle przydatny dodatek do przeglądarki internetowej Mozilla Firefox, któremu małą wzmiankę poświęcone w artykule poświęconym przydatnym wtyczkom do Firefoxa.

Firebug - charakterystyka ogólna

Ale czym tak właściwie jest ten cudowny Firebug? Opis na stronie dodatków do Firefoxa mówi rzecz następującą: Firebug dodaje do Firefoksa bogactwo narzędzi programistycznych. Można edytować, analizować kod oraz monitorować CSS, HTML i JavaScript bezpośrednio na dowolnej stronie internetowej…. I jest to naprawdę dobry opis charakteryzujący Firebuga. Użytkownik otrzymuje edytor wraz z debuggerem, który pozwala na dynamiczną zmianę strony z poziomu przeglądarki. Możemy zmieniać arkusze styli, kod strony, zawartość akapitów, kod JavaScript, dosłownie dowolny element naszej witryny. Możemy również debuggować kod, stawiać breakpointy, śledzić wykonywanie funkcji, czy zapytań asynchronicznych XHR używanych w Ajaxie i wielu popularnych pluginach JQuery. Należy teraz jednak zwrócić uwagę, że żadne wprowadzone zmiany nie są nigdzie zapisywane i zostaną utracone po ponownym załadowaniu strony.

Jak widać, możliwości wtyczki są naprawdę spore i tylko od nas zależy w jaki sposób ją wykorzystamy. Nie jest to typowy edytor stron WWW, właściwie to może nawet nim nie jest, ale jest to świetne narzędzie do debuggowania strony, szybkiego wykrywania problemów, a nawet do drobnych prac projektowych. Plugin można pobrać i zainstalować ze strony dodatków Mozilli.

W kolejnych akapitach skupimy się kolejno na poszczególnych zakładkach Firebuga.

Ikonka robaka

Ikonka robaka (pierwsza z brzegu) pozwala na dostęp do opcji konfiguracyjnych wtyczki. Możemy tutaj ustawić podstawowe opcje takie jak wielkość czcionki, opcje ustawiania okna Firebuga, sprawdzić czas ładowania JavaScriptu, czy też uzyskać informacje na temat aktualnej wersji wtyczki.

Badanie elementów strony

Kolejna ikonka, zawiera jedną z ważniejszych funkcjonalności Firebuga - czyli możliwość badania elementów strony. Badanie umożliwia uzyskanie dodatkowych informacji na temat podświetlonego elementu. Wybrany element zostaje wyróżniony w drzewie znaczników HTML, a użytkownik ma możliwość obejrzenia/edycji przypisanych do niego własności oraz styli. Przykładowo na screenie poniżej, podświetlony został odnośnik do działu Linki. W centralnej części okna wtyczki, pojawiło się usytuowanie odnośnika w drzewie tagów strony HTML. W górnej części okna, pojawia się również hierarchia dziedziczenia cech tego elementu. Są to kolejno elementy a, li, div itd. Oznacza to, że nasz link, oprócz swoich charakterystycznych cech i reguł, dziedziczy również własności po wszystkich elementach znajdujących się wyżej nad nim. Jest to standardowa zasada CSS i oczywiście obowiązują tutaj reguły ważności - wszystkie cechy zdefiniowanie bezpośrednio dla elementu a są najważniejsze.

Kontynuując analizę okna - w prawej części znajdują się reguły CSS. Jeśli dany element posiadał zdefiniowane klasy (a tak jest właśnie w tym przypadku) to zostaną one wyszczególnione w zakładce Styl. Każdą z cech tutaj znajdujących się możemy wyłączyć, przeedytować, możemy również dopisać nowe. Na ostatniej zakładce w tej części okna dla tego widoku mianowicie zakładce Układ, możemy obejrzeć układ pudełkowy danego elementu. Widoczne będą tutaj wartości marginesów, paddingu, obramowania itp. własności dla danego elementu. Ostatnia zakładka DOM przedstawia wartości selektorów DOM dla wybranego elementu.

Konsola

Konsola jest kolejnym elementem Firebuga. Prawdopodobnie domyślnie może być wyłączona. Aby ją uruchomić, należy kliknąć myszką na nazwę zakładki Konsola i następnie wybrać opcję Włączony . Powinniśmy teraz uzyskać opcję śledzenia błędów strony, JavaScript; analizy obiektów XHR; czasu ładowania strony; śledzenia ciasteczek itp. Tylko od nas zależy jakie dane chcemy przeanalizować.

HTML

HTML jest zakładką, która zasadniczo została już omówiona w punkcie poświęconym badaniu elementów strony. Dodatkowe opcje, można uzyskać poprzez kliknięcie na nazwę wybranej zakładki, zasada ta tyczy się właściwie każdej zakładki wtyczki. Sekcja HTML, pozwala na badanie elementów witryny z poziomu drzewa tagów. Podobnie jak w przypadku narzędzia do badania strony przedstawionego wcześniej, po zaznaczeniu określonego elementu w drzewie strony, możemy zmodyfikować jego własności i style.

CSS

CSS jest kolejną zakładką umieszczona w oknie Firebuga. Pozwala ona uzyskać podgląd dołączonych do strony plików CSS. W każdym momencie, możemy wybrać inny plik CSS, niż ten, który został ustawiony jako domyślny. Wystarczy kliknąć na nazwie bieżącego pliku i wybrać inną interesującą nas pozycję. Operacja ta, została przedstawiona na screenie poniżej. Podobnie jak na zakładce HTML, również tutaj, możemy modyfikować reguły CSS; dodawać nowe własności; edytować/usuwać istniejące. Różnica jest tak, że tym razem operacje wykonujemy z punktu widzenia plików, a nie poszczególnych elementów.

Skrypt

Kolejną zakładką jest zakładka Skrypt. Jest to prosty debugger JavaScript. Pozwala na stawianie punktów wstrzymania (breakpoint), czujek (watch) oraz przeglądanie stosu (stack). Podobnie jak w przypadku CSS, również tutaj możemy wybrać podglądany skrypt - operacja ta została przedstawiona na screenie poniżej. Aby poprawnie korzystać z tej zakładki należy się upewnić, że obsługa skryptów jest włączona, możemy to sprawdzić poprzez kliknięcie na nazwę zakładki. W menu, w którym się pojawi, powinna być zaznaczona opcja Włączony.

DOM

Zakładka DOM, pozwala na przeglądanie różnych właściwości CSS aktualnej strony oraz podgląd wartości obiektów DOM. Więcej na temat obiektowego modelu dokumentów (z ang. DOM) możecie przeczytać w artykule poświęconym odczytywaniu elementów oraz w artykule na temat tworzenia, usuwaniu i modyfikacji elementów.

Sieć

Zakładka Sieć, jest jednym z najciekawszych elementów Firebuga. Pozwala ona na śledzenie różnorakich żądań przetwarzanych przez stronę. Dzięki temu w prosty sposób możemy podejrzeć proces ładowania każdego elementu strony. Ponadto, możemy podejrzeć również bieżące żądania XHR. Co ważne, żądania możemy przeglądać według kategorii umieszczonych na górnym pasku zakładki. Są to kolejno:

  • Wszystko - widoczne będą wszystkie rodzaje zapytań
  • HTML - widoczne będą zapytania odnoszące się do stron WWW
  • CSS - widoczne będą zapytania odnoszące się do przetwarzania arkuszy styli
  • JS - widoczne będą zapytania odnoszące się do przetwarzania plików skryptowych
  • XHR - widoczne będą zapytania odnoszące się do przetwarzania zadań AJAX
  • Obrazki - widoczne będą zapytania odnoszące się do przetwarzania obrazów
  • Flash - widoczne będą zapytania odnoszące się do animacji Flash

Prześledźmy teraz przykładowe zapytanie dla żądania XHR wyszukiwania na stronie Alt Control Delete. Tak wygląda sekcja nagłówków:

Tak wiadomość przesłana w XHR:

A tak odpowiedź:

Jak widać, wyszukiwanie na stronie oparte o AJAX - działa. Jest to świetne narzędzie do testów obiektów typu XHR oraz wielu innych elementów naszej strony.

Ciasteczka

Firebug stał się na tyle potężną wtyczką, że doczekał się również własnych rozszerzeń. Jednym z nich jest narzędzie Firecookie, które można znaleźć tutaj. Firecookie tworzy swoją własną zakładkę nazwaną Ciasteczka. Panel ciasteczek musi być aktywowany aby móc zarządzać ciasteczkami. Aktywacji dokonujemy w standardowy dla Firebuga sposób, poprzez ustawienie opcji Włączony. Po aktywacji opcji, należy ponownie załadować stronę.

Firecookie, umożliwia również tworzenie własnych ciasteczek dla określonej strony. Aby tego dokonać, klikamy na opcję ciasteczka i wybieramy pozycję Utwórz ciasteczko. Na ekranie pojawi się nowe okienko. Możemy tutaj wprowadzić dane nowego ciasteczka.

Podsumowanie

Firebug jest niewątpliwie jedną z najbardziej rozbudowanych i zarazem najpopularniejszych wtyczek dla przeglądarki Mozilla Firefox. Posiada ogromne możliwości, jest wspaniałym narzędziem do testów i niezastąpioną aplikacją dla każdego debuggera. Warto również zainteresować się wtyczkami do samego Firebuga, np. opisaną w artykule wtyczką Firecookie.

Data ostatniej modyfikacji: 11.02.2014, 11:33.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus