Gdy wiemy już co napisać (potrzebny jest dobry pomysł) i jak to napisać (tu potrzebny jest kurs HTML i CSS, a także dalsze kursy, które pojawią się na youthcoders.net), pora zabrać się do pracy. Włączamy więc ulubione narzędzia i zaczynamy.
W dziale warsztat będziemy opisywać narzędzia, które wykorzystujemy do tworzenia naszych stron i aplikacji.

Na pierwszy ogień jednak nie pójdzie żaden edytor czy całe środowisko programistyczne.
Najpierw narzędzie, bez którego w sieci byłoby mroczno i straszno (w zasadzie kiedyś tak było).
Parafrazując pewne zdanie: webdeveloperzy dzielą się na tych, którzy używają Firebuga i na tych, którzy dopiero zaczną.

Pierwsza rzeczą, jaką programista webowy powinien zrobić po włączeniu świeżej instalacji Firefoxa, to menu Narzędzia->Dodatki wyszukać i zainstalować rozszerzenie Firebug.
Od tej pory mały robak czający się zazwyczaj w prawym dolnym rogu przeglądarki, na pasku stanu daje nam dostęp do wielkich możliwości w kwestii nie tylko śledzenia poprawności naszej aplikacji internetowej, ale także edycji jej wyglądu.

Na wstępie krótki opis możliwości dodatku. W następnych artykułach zajmiemy się praktycznym wykorzystaniem kolejnych modułów.

Rozwinięty panel Firebuga na górze posiada pasek dostępnych narzędzi. Ikona robaka (nawet robaki potrafią być przyjazne) daje dostęp do różnych podstawowych opcji. Kliknąłem go po raz pierwszy pisząc ten artykuł, żeby przekonać się, co tam jest. Wygląda więc na to, że nie będziemy tego przycisku używać.

Co innego drugi z kolei przycisk - Zbadaj element. Dziś nie wyobrażam sobie pracy nad stroną bez wykorzystania tego narzędzia. Klikamy i najeżdżamy kursorem na interesujący nas element layoutu strony... Natychmiast widzimy fragment kodu HTML odpowiedzialny za ten element, jego miejsce w strukturze dokumentu oraz towarzyszące mu style. Jeśli klikniemy ten element, dane pozostaną na panelu i możemy zabierać się do analizy.
Karty HTML i CSS posiadają przycisk Edytuj - na żywo możemy zmieniać layout strony. Dodatkowo podczas przeglądania HTML w prawej części panelu mamy kolejne zakładki - Styl (pokazującą wszystkie atrybuty stylu - własne, odziedziczone, wpisane etc.) a obok Układ - atrybuty margin i padding właśnie przestały być problemem. Dalej zakładka DOM. O niej za chwilę.
Moim skromnym zdaniem, to lepsze niż jakiekolwiek narzędzie WYSIWYG. Ale uwaga, zmiany są na bieżąco renderowane w oknie Firefoxa, ale pliki źródłowe oczywiście nie są zmieniane. Gdy osiągamy satysfakcjonujący nas rezultat, zmiany należy skopiować z Firebuga do edytora źródeł.

Przy okazji przycisku Zbadaj element wiemy już też mniej więcej, do czego służą karty HTML i CSS. Po drodze jednak pominęliśmy kartę Konsola. Po jej aktywowaniu strzałka przy tytule kart daje nam dostęp do opcji tego, co może być w niej logowane. Jednak największa siła konsoli to możliwość logowania własnych danych z poziomu Javascript i - to jest przebój, o którym szerzej w następnych artykułach - kodu PHP przy wykorzystaniu FirePHP.

Idąc dalej, docieramy do zakładki karty Skrypt. To odpowiednik klasycznych debuggerów znanych z różnych IDE, służący do debugowania JavaScriptu. Pobawimy się nim w przyszłości.

Kolejną kartą jest DOM. Tu otrzymujemy opis drzewa DOM naszego dokumentu (to samo, ale dla wybranych elementów oferuje zakładka DOM w panelu HTML). Są to na pewno wielce mądre rzeczy, jednak jeszcze nigdy nie zdążyło mi się wykorzystać tych informacji. Ale może jeszcze przyjdzie taki czas, w którym docenię ten element Firebuga.

Ostatnią zakładką jest Sieć. Pozostaje pusta, jeśli włączyliśmy Firebuga na załadowanej już stronie - pokaże co potrafi, jeśli przeładujemy zawartość okna. A potrafi wiele - poda wszystko co wie na temat żądań powstałych przy generowaniu strony - nagłówki, odpowiedzi, czas realizacji etc. Ale tak naprawdę zakładkę sieć docenimy pracując przy AJAXie. Szczegóły już niedługo.

Tak po krótce prezentują się możliwości Firebuga. Już wkrótce pojawią się artykuły opisujące je bardziej szczegółowo, na podstawie konkretnych zadań do wykonania.

W międzyczasie, jeśli ktoś chciałby dowiedzieć się czegoś więcej - http://getfirebug.com, to miejsce, gdzie należy szukać.

Warto przeczytać:

• http://youthcoders.net/it/dev-zone/1163-debugowanie-aplikacji-ajax-za-pomoca-firephp.html
  
• http://youthcoders.net/it/dev-zone/1146-firebug-podstawy.html