Firebug – dobry przyjaciel każdego web developera

Pamiętacie jeszcze czasy, w których nie było Firebuga? Jak wtedy debugowało się skrypty Javascript? Jak sprawdzało się zawartość ciasteczek, prędkość ładowania się poszczególnych elementów, czy też przeglądało drzewo DOM? Aż włos się na głowie jeży.

Na szczęście czasy te dawno już minęły, a nas w tych wszystkich niewdzięcznych zajęciach wspomaga Firebug – niedoścignione narzędzie dla web developerów i jeden z głównych powodów, dla których Firefox jest najpopularniejszą przeglądarką. Sam Firebug oferuje szereg funkcjonalności, jednak czasami okazuje się, że przydałoby się coś jeszcze. W tym momencie na scenę wkraczają dodatki do Firebuga, których jest nie mało, i które uzupełniają braki.

Warto poznać najciekawsze z nich, powodujące że Firebug jest jeszcze bardziej pomocny w codziennej pracy. Należą do nich:

  • Firecookie – dodatek pozwalający na zarządzanie ciasteczkami z poziomu Firebuga.
  • FirePHP – nie lada gratka dla programistów PHP. Dodatek ten pozwala na wysyłanie komunikatów do konsoli Firebuga z poziomu PHP, co znacznie ułatwia pracę nad aplikacjami korzystającymi z AJAXa.
  • Page Speed – dodatek od Google’a dostarczający szeregu informacji na temat wydajności naszej strony.
  • FireQuery – obowiązkowa pozycja dla wszystkich korzystających w swoich projektach z biblioteki jQuery
  • FireRainbow – kolorowanie składni w Firebugu
  • Firepicker – możliwość wyboru koloru dla atrybutu CSS (np. color) z palety.

Uzbrojeni w taki zestaw narzędzi, możemy bez większych problemów przystąpić do tworzenia oraz testowania aplikacji opartych o HTML, CSS i Javascript.

Leave a comment ?

10 Comments.

  1. Co robi ten FireQuery? Bo z komentarzy na stronie nie wnoszę by robiło coś co może czemukolwiek służyć

  2. Tylko trzeba dodać, że korzystanie z kilku potrafi nieść za sobą niekoniecznie fajne efekty. U mnie przykładowo tandem FirePHP + FireBug w chwili gdy wychodzi nowa wersja któregoś – wysypuje sesje w serwisie, który korzysta z FirePHP (konieczne przecież dołączenie biblioteki FirePHP w projekcie). Innymi słowy jakakolwiek praca po update'cie staje się niemożliwa dla debugu czegoś związanego z sesją. Jeśli nastąpi przeładowanie strony podczas włączonego FireBuga = session_destroy. Można jedynie wtedy debugować AJAX i kilka rzeczy drobnych w taki sposób: logujesz się do serwisu testowego z wyłączonym FireBugiem i przechodzisz do interesującej strony, włączasz FireBuga, testujesz AJAX, CSS, JS, DOM i co tam chcesz. Ale jeśli zapomnisz się i klikniesz link lub w jakiś inny sposób przeładujesz całą stronę – kapa. Musisz przed przejściem wyłaczyć FireBuga. Jeśli to zrobisz – będzie ok. Jeśli się zapomnisz – sesja pada.

  3. ~nospor
    Przede wszystkim pokazuje w zakładce HTML dla jakich elementów zdefiniowane są eventy, np onclick, onmouseover, itd. Co więcej, klikając w nazwę eventu, mamy możliwość przejrzenia dokładnych informacji na jego temat

    ~thek
    Nie miałem takich przebojów z Firegugiem i FirePHP. Możliwe że dlatego, iż nie trafiłem z testowaniem aplikacji w moment aktualizacji.

  4. Tomasz Kowalczyk

    Jak to nnnniiieee mmmmaaaa Fffiiirrebuga? Najstarsi górale nie pamiętają, kiedy to było. ;]

    Myślę, że każdy z nas powinien dziękować Administratorowi tego serwera za istnienie tego typu narzędzi. Ostatnio sporo korzystam z wbudowanego edytora skryptów JS do pisania małych skrypcików i dynamicznego testowania ich w przeglądarce – nie wiem, jak miałbym to robić z zewnętrznym IDE – przesuwanie myszki po ekranach oraz [Alt] + [Tab] nie wchodzą w grę. ;]

  5. Szkoga tylko, że przy opisie FB na stronie Mozilli widnieje taki oto komunikat: Niedostępny dla Firefox 3.5.5

    Kicha.

  6. No dobra. TO wszystko przez wczorajszy wieczór. Nie przyjrzałam się, że starsze wersje działają.

  7. "Pamiętacie jeszcze czasy, w których nie było Firebuga?"
    Był DragonFly, ale i tak, FireBug jest bezkonkurencyjny.

  8. Z fajnych wtyczek Firebuga: YSlow (odpowiednik pagespeeda od Yahoo – http://developer.yahoo.com/yslow/), CodeBurner (http://tools.sitepoint.com/codeburner/firebug/)

  9. Jest jeszcze jeden bardzo fajny dodatek o nazwie Webdeveloper toolbar. Dosłownie kombajn. Firebuga nie przebije ale ma parę ciekawych opcji np, linijka, walidacje, ukrywania teł, zarządzanie ciasteczkami.

  10. Korzystam z tej wtyczki jako uzupełnienie brakujących funkcjonalności Firebuga. Jest rewelacyjna w niektórych zastosowaniach.

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting