Jesteś tutaj: webmade.org >> porady >> pozostałe
autor: Mateusz Pilszek, ostatnia modyfikacja: 2007-07-21
firebug 
Firebug to rozszerzenie do przeglądarki internetowej Mozilla Firefox. Dzięki niemu można w komfortowy sposób przeglądać kod źródłowy strony oraz odnaleźć kod CSS odpowiadający za wygląd jej poszczególnych elementów. Możliwości Firebug'a są jeszcze większe – można m.in. obserwować szybkość ładowania zewnętrznych plików, przeglądać DOM oraz debugować i profilować kod JavaScript. Firebug pozwala na edycję kodu i podgląd zmian w oknie przeglądarki (bez odświeżania strony).
Funkcje tego narzędzia można wymieniać jeszcze bardzo długo. W artykule przedstawię jego najważniejsze możliwości. Jeżeli nie używałeś jeszcze Firebug'a, po przeczytaniu tego artykułu nie będziesz mógł bez niego pracować.
Do instalacji rozszerzenia wymagana jest przeglądarka Mozilla Firefox w wersji 1.5 lub wyższej. Niestety Firebug nie współpracuje obecnie z wersją przeglądarki dla systemu Linux.
Wejdź na stronę rozszerzenia w serwisie Mozilla Add-Ons i kliknij na przycisk „Instaluj”. Pojawi się okienko „Instalacja oprogramowania” w którym ponownie kliknij na przycisk „Zainstaluj”. Następnie uruchom ponownie przeglądarkę.
Ikonę Firebug'a znajdziesz po prawej stronie paska stanu. Gdy na nią klikniesz, pojawi się okno, w którym znajdują się dwie opcje:
Interfejs został podzielony na sześć zakładek – Console, HTML, CSS, Script, DOM, Net. W artykule opisałem cztery z nich.
Uruchom Firebug'a poprzez kliknięcie w ikonę na pasku stanu. Przejdź na zakładkę „HTML”. Znajdziesz tam kod źródłowy strony w postaci drzewa. Jeżeli rozwiniesz sekcję <body> dokumentu i najedziesz kursorem na dowolny znacznik, przestrzeń strony, którą on wypełnia zostanie podświetlona na niebieski kolor, tak jak na poniższym zrzucie:
Zauważ także, że na fioletowo zostało podświetlone wypełnienie (padding), a na żółto margines (margin). Jeżeli dla elementu zostanie ustalone obramowanie (border), zostanie ono podświetlone na kolor szary.
Kliknięcie prawym przyciskiem na dowolny znacznik lub atrybut umożliwia dostęp do przydatnych opcji. Pozycja „Delete Element” spowoduje usunięcie znacznika, „New Attribute” - dodanie nowego atrybutu, „Delete Attribute” - usunięcie atrybutu:
Jeżeli nie potrafimy odnaleźć jakiegoś elementu (np. obrazka) w kodzie HTML, wystarczy podczas przeglądania witryny kliknąć na ten element prawym przyciskiem i wybrać opcję „Inspect Element”, a zostanie on podświetlony na zakładce HTML:
Aby zbadać element, należy zaznaczyć go poprzez kliknięcie. Powinien on zostać podświetlony, tak jak na poniższym zrzucie:
Do badania elementów służą trzy zakładki znajdujące się w prawej części interfejsu – Style, Layout i DOM. Przejdź na zakładkę Style. Znajdują się w niej reguły CSS dotyczące zaznaczonego elementu, a także odziedziczone reguły. Zaznaczenie myszką dowolnej wartości umożliwia jej zmianę. Podgląd zmian jest wyświetlany na bieżąco w oknie przeglądarki (po wciśnięciu entera).
Można także w łatwy sposób usuwać pojedyncze właściwości. Wystarczy kliknąć prawym przyciskiem myszy na niechcianą właściwość i wybrać opcję „Delete”. W menu kontekstowym znajdziemy także kilka innych pozycji: „New Property..." umożliwia dodanie nowej właściwości do reguły, a „Disable” blokuje właściwość – będzie ona pomijana przez przeglądarkę.
Czas przejść do zakładki „Layout”. Wyświetla ona w sposób schematyczny zaznaczony element blokowy – jego wymiary, wypełnienie, obramowanie, margines oraz przestrzeń poza elementem (offset):
Zaznaczenie dowolnej liczby pozwala zmienić jej wartość – np. grubość obramowania, tak jak na powyższym zrzucie. Wyniki zobaczysz zaraz po wciśnięciu entera, który zatwierdza wprowadzone dane.
Trzecia zakładka – DOM, służy do przeglądania właściwości JavaScript zaznaczonego obiektu:
Czas na zakładkę CSS. Znajdziemy w niej kompletny kod budujący wygląd strony. Jeżeli do strony dołączono kilka zewnętrznych plików CSS, z menu znajdującego się obok przycisku „Edit” można wybrać ten, który chcemy przeglądać:
Edycja odbywa się tak samo jak w przypadku zakładki Style:
Zakładka Net wyświetla informacje o wszystkich plikach dołączonych do strony. Są to np. arkusze stylów znajdujące się w plikach .css, skrypty JavaScript o rozszerzeniu .js, obrazki osadzane za pomocą znaczników img, animacje Flash.
Przy każdym pliku znajduje się szary pasek, którego długość symbolizuje czas pobierania (obok podano także czas w milisekundach). Szary pasek jest odpowiednio usytuowany na linii czasu – im dalej od lewej strony, tym później rozpoczęło się pobieranie pliku przez przeglądarkę.
Jasnoszary kolor paska oznacza, iż plik został pobrany z bufora podręcznego przeglądarki, natomiast ciemnoszary wskazuje na to, że plik został pobrany z internetu. Na samym dole listy pod linią czasu znajduje się informacja o całkowitym rozmiarze pobranych danych oraz całkowitym czasie ich pobierania.
Kliknij na ikonkę „+” przy nazwie któregoś z plików, a będziesz mógł przejrzeć nagłówki wysłane do serwera oraz odpowiedź serwera:
Zakładka Console umożliwia podgląd informacji o błędach wygenerowanych przez interpreter JavaScript. Jeżeli na stronie pojawi się błąd, ikonka Firebug'a na pasku stanu zmieni kolor na czerwony.
W artykule nie opisałem dwóch zakładek – Script i DOM. Przeznaczone są one dla zaawansowanych webmasterów, a ich przedstawienie w artykule zajęłoby bardzo dużo miejsca. Możliwości tego programu są znacznie większe – ująłem tutaj jedynie najważniejsze i najciekawsze funkcje, przydatne każdemu webmasterowi. Zainteresowanych szczegółami odsyłam na oficjalną stronę programu.
Mateusz Pilszek
szukaj: firebug
Osoby czytające tę publikację przeglądały również:
blogporadyartykułyrecenzjewiadomości
© 2004-2008 copyright by webmade.org