Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce. Zamknij

Firebug - Narzędziownia - Polska Akademia Dostępności

Wiedza Narzędzia Rozwiązania

Projekt realizowany
przez:

Fundacja Widzialni Ministerstwo Administracji i Cyfryzacji
Wtorek, 22 września 2020

Wyszukiwarka

Formularz wyszukiwania

Zaloguj się aby pobierać wzorce www i wziąć udział w forum.

Dostosuj wygląd

Czcionka:

  • Domyślna wielkość czcionki
  • Czcionka średnia
  • Czcionka duża

Kontrast

Firebug

7 kwietnia 2015

Firebug jest specjalnym dodatkiem do przeglądarki Mozilla Firefoks. Dzięki niemu użytkownik dostaje bogactwo narzędzi programistycznych. Firebug umożliwia edytowanie, analizowanie kodu oraz umożliwia monitorowanie CSS, HTML i avaScript bezpośrednio na dowolnej stronie internetowej. Jednocześnie Firebug umożliwia zainstalowanie innych wtyczek, które rozszerzają jego możliwości.

Widok przeglądarki i narzędzia Firebug z podglądem kodu HTML

Firebug jest bardzo przydatnym narzędziem dla programistów i webmasterów podczas testowania serwisów internetowych. Narzędzie nie testuje stron pod kątem standardu WCAG 2.0, ale jest bardzo często używanym programem podczas prac audytorskich przez specjalistów. Jego dodatkowym atutem jest interface w języku polskim. Aby korzystać z narzędzia należy w zakładce dodatki, w menu przeglądarki, odnaleźć i zainstalować wtyczkę Firebug.

Widok kodu arkuszy styli CSS w Firebugu

Firebuga można uruchomić po kliknięciu specjalnego przycisku, umieszczonego na pasku w górnym prawym rogu. Można otworzyć aplikację w osobnym oknie, lub jako pasek na dole przeglądarki. Firebug umożliwia również precyzyjną kontrolę nad tym, które witryny zamierzamy przeanalizować.

Widok zaznaczonego elementu na stronie i określenia jego położenia w kodzie źródłowym wyświetlanej strony

Dzięki dodatkowi możemy sprawdzić i edytować kod. W czasie rzeczywistym możemy odnaleźć elementy głęboko zaimplementowane w kodzie źródłowym. Wystarczy kliknąć na dany element na wyświetlanej stronie, a wtyczka dokładnie wskaże jego położenie. Podświetli nam kod źródłowy elementu oraz poda dokładnie ścieżkę dostępu. Firebug umożliwia także edycję badanych elementów.

Dzięki Firebugowi możemy przeanalizować dokładnie arkusze styli CSS. Są one sklasyfikowane w kolejności i właściwości zastosowania na stronie. Każda reguła ma link do pliku, skąd pochodzi. Dzięki temu możemy zmienić styl CSS dla pojedynczego lub całego obiektu i podejrzeć wynik.

Widok uruchomionego mechanizmu do obliczania czasu wczytywania elementów na stronie

Podczas analizowania serwisu możemy dzięki Firebugowi sprawdzić także długość wczytywania przez przeglądarkę danej podstrony lub wszelkich plików zamieszczonych w serwisie.

Strona wtyczki Firebug.


Galeria zdjęć

Powiększ zdjęcie: Logo wtyczki Firebug