Firebug - ostateczny powód webdevelopowania Firefoksem

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Pamiętam początki tego rozszerzenia. Zainstalowałem je jako zaawansowaną konsolę JavaScript i zapomniałem o innych opcjach, których trochę się pod drodze pojawiło. Dwa tygodnie temu zajrzałem na stronę projektu i zobaczyłem, że autor rozszerzenia szykuje wersję 1.0. Zachęcony opisami przejrzałem możliwości Firebuga. Były imponujące. Dopiero dzisiaj jednak zapoznałem się z nimi bliżej - dostępna jest bowiem wersja 1.0 beta.

Razem z nową wersją dostajemy opcje już znane, rozszerzone o nowe możliwości, jak i również całkowicie nowe.

Inspektor DOM umożliwia edycję całego HTML, poszczególnych atrybutów, dodawanie nowych, kopiowanie zawartości węzła (innerHTML) oraz ścieżkę XPath (o bogowie, tego mi było trzeba).

Inspekcja CSS otrzymała poważne ulepszenia. Możliwe jest:

Wyłączanie poszczególnych reguł jednym klikiem.
Inkrementacja wartości numerycznych kursorami.
Przełączanie się między możliwymi wartościami właściwości CSS (coś ala prymitywny Code Insight).
Podgląd wymiarów i miniaturka obrazka w każdym url().

Dodano też fantastyczną nowość - Firebug pokazuje które właściwości CSS nadane elementowi są dziedziczone z rodziców! Z dalszych szczękoopadających opcji - mamy możliwość podejrzenia boks modelu dla każdego elementu na stronie oraz użycie linijki i prowadnic, coś jak w Photoshopie. :) Podświetlanie elementów wskazywanych w DOM uwzględnia także dopełnienia i marginesy. Problemy z odległościami praktycznie znikają, można je edytować na żywo.

Możliwe jest także podejrzenie spisu metod i obiektów JavaScript danej strony jak również edycja oraz zatrzymywanie wykonywania kodu na danej linijce. Mamy starą dobrą konsolę oraz lubiany ekran logowania (koniec z window.alert())

Całkiem przyjemnie zapowiada się też mierzenie czasu wykonania requestów via Ajax oraz czasu łączenia się z plikami - skryptami, obrazkami, arkuszami stylów.

Firebug otworzony może zostać w osobnym oknie, jeśli w znanym z wcześniejszych wersji dolnym panelu za mało widać. Możemy też go włączać dla określonych stron - na przykład mogę sobie ustawić go dla bloga i projektów nad którymi pracuję, a reszta stron nie będzie straszyła ilością błędów JS.

Nie wiem, zlinczujcie mnie jak chcecie, ale jeśli Firefox nie jest najlepszym wyborem dla webdeveloperów ¹, to ja się poddaję. Nowy Firebug sprawia, że po prostu kopie tyłek.

Opera, Safari i inne przeglądarki mogą użyć bonusowo przygotowaną przez autora konsolę JavaScript w postaci skryptu.

1) Tia, mogłem się powstrzymać, ale jestem zbyt podekscytowany możliwościami tego cudeńka. ;)

Tagi wpisu: ajax, console, css, dom, extension, firebug, firefox, inspector, javascript, webdesign, webdevelopment

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 04 grudnia 2006 o 23:21

Kategorie: Narzędzia, Przeglądarki

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

Dulek 1 04 grudnia 2006, 23:23

Kiedyś koszmarnie spowalniał Fx, nadal tak jest?
Riddle 2 04 grudnia 2006, 23:24

Hmm, nie wiem, stety niestety nie jestem dobrym testerem szybkości z powodu sprzętu. Czytaj – mi nic nigdy nie muliło. :P Ani ładowanie stron ani sama przeglądarka. :)
Piotr Usewicz 3 04 grudnia 2006, 23:27

Alez, nigdy mi nie spowalnial Fx. Poza tym, piekne narzedzie, zwlaszcza w wersji 1.0
JOUKI 4 04 grudnia 2006, 23:38

Notka: Plugin zassano. :)

Powyższy komentarz: Który to już raz czytam jak to Riddle zachwala swój sprzęt… Heh.
ajgon 5 04 grudnia 2006, 23:46

Bawie sie od kilku godzin i sie nacieszyc nie moge. Ostatni raz mialem taka radoche, jak sie kolejka elektryczna kumpla brata bawilem ;]
mcv 6 05 grudnia 2006, 00:44

I wszystko stało się prostsze! Genialne rozszerzenie, przyda mi się podsłuchiwanie zapytań XMLHttpRequest. :DDD
radek.kaba 7 05 grudnia 2006, 00:55

Firebug zaczynało od świetnego pomysłu: żeby zebrać kilka funkcji (a raczej ulepszeń) porozrzucanych wcześniej po innych rozszerzeniach… a teraz to prawie prawdziwe środowisko uruchomieniowe.

A ja pamiętam jak instalując je po raz pierwszy cieszyłem się, że nareszcie mogłem wywalić venkmana :) – ten to dopiero mulił Firefoksa…
Thinker 8 05 grudnia 2006, 09:12

Jak wierny user Firebuga 0.4 aż się skusiłem na nową wersję i jestem zadowolony. Fajnie wygląda i działa. I btw, nigdy nie zjadało to dużo procka, przynajmniej tych liczonych w GHz :P
Michał Stempień 9 05 grudnia 2006, 09:18

Niezastąpione rozszerzenie. Po prostu rewelacja, nie mogę wyjść z zachwytu.
Ancestor 10 05 grudnia 2006, 10:37

Niecierpliwie czekałem na 1.0, bo toczyła się dyskusja, czy narzędzie nie stanie się płatne, co sfinansowałoby jego dalszy rozwój. Jednak na szczęście autor zdecydował, że będzie on nadal rozwijany na licencji Open Source.

Co tu dużo mówić, rozszerzenie jest cudowne. Funkcjonalny inspektor DOM, narzędzia CSS, debugger i profiler (!) JavaScriptu, podgląd zapytań HTTP, a to wszystko w prostym i wygodnym interfejsie. Obecnie nie ma żadnego narzędzia webdeveloperskiego, które mogłoby się równać z tandemem Firefox + Firebug.

Używając tego czuję się dziecko w sklepie z zabawkami. :)
wariat 11 05 grudnia 2006, 10:39

(Komentarz zmodyfikowany 05.12.2006 o 15:08)
Webdeveloco?! Nowy Pinglish? Fajny! :D
Jak to się czyta? :D Było napisać Łebdewlopowania było by do kompletu z widżetami :D

MSPANC
lopik 12 05 grudnia 2006, 11:00

Dokładnie, jest to jedno z najlepszych rozszerzeni dla Firefoxa :-)
Opera do „paska stanu” nie dorasta Firefox’owi z tym rozszerzeniem. ;)
Pozdro.
D4rky 13 05 grudnia 2006, 13:46

(Komentarz zmodyfikowany 05.12.2006 o 15:09)
~~A ja mam OTowe pytanie – odpalił już ktoś Aardvarka na FFx2 ?~~
nbw 14 05 grudnia 2006, 20:08

No weź, rid.. nie znałeś tego wcześniej? Moje dobre zdanie o Tobie się zdewaluowało ;) Jak można cokolwiek debugować bez firebuga? ;)
kL 15 06 grudnia 2006, 00:20

Kopie, ale tylko dla tych, co nie używali Xyle Scope.
Ancestor 16 06 grudnia 2006, 01:22

kL – nie znam tego programu, ale z tego, co zdążyłem się zorientować, wspomaga on jedynie pracę z CSS i DOM. Firebug potrafi o wiele więcej – ja na przykład używam go głównie jako debuggera JS i XMLHttpRequest.
Grucha 17 06 grudnia 2006, 12:05

Świetna wtyczka, już od jakiegoś czasu szukałem wygodnej dokowalnej konsoli JS.
Nero 18 06 grudnia 2006, 15:22

O… od dawna z tego korzystam ale nie mialem pojecia ze to sie rozwinelo :)
pawlik 19 06 grudnia 2006, 21:08

nie domknąłeś czegoś, menu w operze znajduje się pod formularzem do komentowania. ;)
Wojtek 20 07 grudnia 2006, 15:15

Skok z 0.4 na 1.0 jest rzeczywiście przyjemny, jak to się mówi – ‘must have’.
Tyhagara 21 08 grudnia 2006, 22:57

Wersję 1.0 beta zainstalowałem w pracy. Rzeczywiście robi wrażenie, myślałem, że już nic mnie nie zaskoczy jeśli chodzi o tego typu narzędzia, a tu proszę.

Jak tak sobie pomyślę, to aż mnie wnerwia, dlaczego to inni muszą robić takie fajne rzeczy, a ja tylko je znajduje w sieci? Trzeba się wziąć w garść i coś w końcu napisać, oprócz zarabiania pieniędzy ;)
TroPtyN 22 11 grudnia 2006, 00:01

Cudowne rozszerzenie. :D Nie sądziłem, że to może być tak fajowe. Być może przerzucę się ze SciTE|Flasha (ale ciężko będzie się przenieść – przyzwyczaiłem się).
ktor 23 11 grudnia 2006, 10:38

Jest tylko jeden problem. Mianowicie rozszerzenie w nowej wersji całkiem blokuje możliwość pracowania z lokalnymi kopiami skryptów, które pobierają dane za pomocą XMLHttpRequest z serwerów, tzn. cross-domain scripting, który już i tak jest bardzo ograniczony w firefoksie. I chociaż nowa wersja rzeczywiście robi wrażenie, pozostanę narazie przy 0.4.1. Pozdrawiam, Paweł.
wariat 24 11 grudnia 2006, 19:22

Chyba nie tylko z lokalnymi kopiami. Podpisana kluczem testowym wersja też nie śmiga jeśli firebug jest włączony. Choć nie próbowałem wieszać jej w necie, bo to co robiłem z założenia ma chodzić z dysku i tylko pobierać dane z internetu.
pryngiel 25 28 stycznia 2007, 22:46

Bardzo przydatne. Czasami dzięki temu można łatwo wyłapać jakiś błąd, który gołym okiem w Operze jest nie widoczny.
Meble 26 09 lutego 2007, 22:38

Czym dokładnie jest ten Firebug i do czego służy? Gdzie również mógłbym go pobrać?
vbert 27 22 lutego 2007, 02:47

Meble: google.com -> wpisz w JEDYNE pole tekstowe: firebug i … już!

^ To oczywiście na wpadek jakbyś przeoczył początek artykułu autora (gdzieś na górze strony!).

Dla leniwych zrobię wyjątek: http://www.getfirebug.com/

Dodam, że jeśli do tego miłego narzędzia dodać: bibliotekę jQuery to już niemal pełnia szczęścia :)

Dla zainteresowanych: http://jquery.com/

Jest ona bardzo dobrze udokumentowana. Jedna z wersji dokumentacji: http://visualjquery.com/1.1.1.html