Firebug – podstawy

To jest tekst z kategorii Wpisy archiwalne.

Zapraszam do obejrzenia screencasta pokazującego podstawowe funkcje Firebuga. Nie jest to wyczerpujący przewodnik – tylko absolutne podstawy. Ciekawszymi opcjami, szczególnie wtyczkami, zajmiemy się w kolejnych częściach cyklu – te pojawią się już niedługo.

Jedna uwaga – z niewiadomych przyczyn, czasami wpisy w oknach Firebuga robią się bladozielone, przez co nieczytelne. Zdarzało mi się to tylko podczas nagrywania tego screencasta, dlatego wiązałbym te problemy z narzędziem screencast-o-matic, ale szczegółów nie badałem.

Podstawowe funkcje Firebuga pokazałem na stronie startowej aplikacji Quickstart, będącej wprowadzeniem do Zend Framework (cykl o ZF już niedługo).

Pierwszym elementem Firebuga jest zakładka Konsola
Ma kilka najważniejszych funkcji (oprócz tego sporo innych, bardziej zaawansowanych, również dodawanych przez wtyczki)

  • zgłaszanie błędów JavaScript. To nie jest pokazane na filmie, lecz jakiekolwiek błędy przerywające wykonanie skryptu pojawią się jako wpis w konsoli. Dość już sytuacji, gdy kod JavaScript nie wykonuje się, a my nie wiemy dlaczego.
  • logowanie danych z aplikacji JavaScript. W kodzie JavaScript umieszczamy wywołanie console.log(‚tekst do zalogowania’) Argumentem tej funkcji może być również zmienna, w tym tablicowa – gdyby nie to, ta funkcjonalność byłaby raczej mało atrakcyjna. Temat zgłębimy już niedługo.
  • wykonanie kodu „z ręki”. Kod wykonuje się w oknie przeglądarki oraz w konsoli – możemy obserwować, czy wykonał się poprawnie oraz jakie zwrócił wyniki.
  • jeśli nasza aplikacja wykorzystuje podejście Ajax, to będziemy tu mieli również odwołania Ajaxowe – nie wyobrażam sobie dziś debugowania aplikacji Ajaxowej bez tego narzędzia.

Drugi element, to zakładka HTML
Tutaj najważniejsze są: możliwość przeglądu dokumentu w postaci rozwijanego drzewka łącznie z możliwością modyfikacji treści, a także opcja badania elementu. Dzięki niej możemy odnaleźć w kodzie strony element, który wskażemy bezpośrednio na stronie.
Szczegóły badanego elementu są pokazywane w kilku zakładkach – jego ostylowanie (własne + dziedziczone), wyliczone parametry, okienko „układ”, gdzie możemy manipulować wymiarami marginesów, obramowań, odstępów i wielkości samego elementu (bardzo przydatne przy eksperymentach z layoutem) a także karta ze szczegółami ujętymi w modelu DOM.

Kolejna zakładka to CSS
Dzięki niej mamy możliwość podejrzenia arkusza CSS i wprowadzenia w nim zmian na żywo.

Zakładka Skrypt – debugger JavaScript
Mamy tutaj podgląd wszystkich kodów użytych do stworzenia strony – plików html, css, js. I to właśnie w plikach js zakładka pokazuje swoje najważniejsze oblicze – możemy tam ustawić breakpointy, czujki i podglądać wartości zmiennych – słowem, debugger jak w środowiskach programistycznych.

Zakładka DOM pokazuje dane DOM na temat wybranych elementów. Można tam odnaleźć sporo ciekawostek, jednak w codziennej pracy to chyba najrzadziej wykorzystywane przeze mnie narzędzie.

Ostatnia w podstawowym układzie Firebuga jest zakładka Sieć.
Możemy dzięki niej obserwować całą aktywność sieciową naszej strony w obsludze danego żądania (lub wielu, jeśli przełączymy trwałość). Widzimy wszystkie odwołania do plików html, css, js, zewnętrznych zasobów, a także żądania Ajax (tu zdublowanie funkcji z konsoli). Mamy do dyspozycji listę (z możliwością filtrowania), na której możemy wybrać również szczegóły konkretnych pozycji.

Już niedługo kolejne wpisy. Przyjrzymy się w nich szczegółowo, jak korzystać z poszczególnych funkcji oraz jak rozszerzyć możliwości Firebuga za pomocą wtyczek (tak jest, wtyczek do wtyczki 😉

Możliwość komentowania jest wyłączona.