Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/it/dev-zone/1146-firebug-podstawy.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden
in /var/www/old-yc/plugins/content/addthis.php on line 38
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 ;)