Warsztat: przeglądarka

Kiedyś każdy szanujący się webdeveloper używał do budowania serwisów Firefoksa, bo… nie miał specjalnego wyboru. Czasy się zmieniają i inne przeglądarki oferują coraz więcej udogodnień pod tym kątem. Dlatego chciałem sprowokować was do odpowiedzi na proste pytanie: czego używacie do pracy na co dzień?

Mozilla Firefox

Moją podstawową przeglądarką od lat jest Firefox. Dawniej znany jako Phoenix, później Firebird, jednak w środku wciąż ten sam. O gustach się nie dyskutuje, więc do interfejsu przekonywać nie zamierzam. Chciałem jednak wspomnieć o kilku funkcjach, z których regularnie korzystam.

podgląd fragmentu drzewa DOM
Wystarczy zaznaczyć interesujący nas fragment dokumentu, niezależnie od tego, czy był częścią oryginalnej strony, został pobrany Ajaksem, czy wygenerowany przez skrypt po stronie użytkownika. Klikamy prawym przyciskiem i wybieramy Pokaż źródło zaznaczenia.
wybiórcze zaznaczanie tabel
Przytrzymując klawisz Ctrl i klikając na krawędzi tabeli bądź wewnątrz jednej z komórek, możemy zaznaczyć sobie dowolny zestaw danych. Gotowy do skopiowania i wklejenia w inne miejsce.
wbudowana konsola błędów
Niegdyś niesamowicie pomocna, obecnie znacznie mniej przydatna funkcja. Pokazuje w locie wszystkie błędy wykryte w dokumencie. Niestety, bez podziału na zakładki, z których pochodzą komunikaty. Od wersji 1.5, z nieznanych mi przyczyn, konsola JavaScript pokazuje również błędy CSS, które kwalifikowane są jako krytyczne, co przy wspomnianym braku ograniczenia do danego dokumentu czyni konsolę ledwo używalną.
odświeżanie źródła
Wbudowany podgląd źródła dokumentu bez problemu reaguje na kombinację klawiszy Ctrl+R i grzecznie odświeża podglądane źródła bez potrzeby przeładowywania strony w przeglądarce.
inspektor DOM
Przychodząca z programem przeglądarka drzewa dokumentu pozwala wygodnie ustalić, jak wygląda zagnieżdżenie elementów i odczytać ich podstawowe atrybuty.
rozbudowane informacje o stronie
Dostępna pod prawym przyciskiem opcja Informacje o stronie pozwala nie tylko poznać rozmiar bieżącego dokumentu, ale w wygodny sposób listuje wszystkie odnośniki i elementy graficzne, w przypadku tych ostatnich podając także alternatywne wersje tekstowe, jakie zostały im przypisane.

Wtyczki

Sama przeglądarka to jednak niewiele i choć można się obejść bez dodatków, dopiero wtyczki dają prawdziwy komfort budowania serwisów.

Web Developer
Dodaje wygodne menu kontekstowe i pasek narzędzi skierowane specjalnie dla autorów stron. Mamy tu pełne spektrum wyłączania, włączania i edycji w locie dla arkuszy stylów, formularzy, grafiki i podstawowych elementów drzewa dokumentu. Wszystko można zmierzyć, obrysować, a na końcu przepuścić przez walidator.
FireBug
Prawdziwy kombajn do śledzenia kodu JavaScript. Podaje liczbę błędów dla bieżącej zakładki przeglądarki, kliknięcie tej informacji rozwija panel z przyborami na każdą okazję. Jeśli uważasz, że konsola wbudowana w Firefoksa jest przeładowana zbędnymi komunikatami, jeśli potrzebujesz debugować zapytania AJAX w locie, jeśli chciałbyś inspektora DOM który zwyczajnie pozwoli ci kliknąć na elemencie, to rozszerzenie jest dla ciebie.
ColorZilla
Marzenie każdego grafika — pipeta wbudowana w przeglądarkę. Widzisz ciekawy motyw kolorystyczny na stronie? Zastanawiasz się, czy to obrazek, czy kolor tła? To bez znaczenia, bo wystarczy uaktywnić ColorZillę i kliknąć dowolny punkt w ramach okna przeglądarki. Od tej chwili kolor jest dostępny do skopiowania w dowolnej postaci. Trudno trafić? Dostępna jest opcja powiększenia strony, podobna do tej zawartej we wspomniamym wcześniej rozszerzeniu Web Developer.

A jakich wy używacie zestawów? Zaznaczam, że chodzi mi tylko o rozszerzenia przydatne do budowy stron, inne, jak choćby Tabbrowser Preferences, mnie w tym miejscu nie interesują.

Technorati Tags: , , , , , ,

web software