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 ;)