Przeglądarka dla projektantów stron

Choć każdy szanujący się projektant i twórca serwisów internetowych ma w swoim arsenale kilka różnych przeglądarek internetowych, dzięki czemu może testować sposoby wyświetlania stron, jedna przeglądarka zajmuje w tej grupie miejsce szczególne.

Choć każdy szanujący się projektant i twórca serwisów internetowych ma w swoim arsenale kilka różnych przeglądarek internetowych, dzięki czemu może testować sposoby wyświetlania stron, jedna przeglądarka zajmuje w tej grupie miejsce szczególne.

Nie chodzi wcale o Internet Explorera, który z racji dominującej pozycji na rynku bez wątpienia pozostaje najważniejszym wyznacznikiem zgodności strony z obowiązującymi standardami, w związku z czym niektórzy traktują go jako jedyną przeglądarkę testową.

Chcesz szybko zorientować się, dokąd prowadzą poszczególne formularze i jakie ukryte pola mają, można wybrać podgląd graficzny (na ilustracji) albo tabelaryczne zestawienie wszystkich formularzy na stronie.

Chcesz szybko zorientować się, dokąd prowadzą poszczególne formularze i jakie ukryte pola mają, można wybrać podgląd graficzny (na ilustracji) albo tabelaryczne zestawienie wszystkich formularzy na stronie.

Tym razem będzie mowa o robiącym furorę Firefoksie, który od pewnego czasu podbija serca nie tylko specjalistów i dziennikarzy, ale także milionów użytkowników na całym świecie.

Spośród wielu jego zalet jedna jest dla nas szczególnie ważna - otwarta architektura, pozwalająca w prosty sposób tworzyć rozszerzenia, dodające nowe funkcje do przeglądarki. W połączeniu z aktywnością bardzo dużej społeczności programistów, daje to kombinację wręcz zabójczą dla konkurencji, przynajmniej z perspektywy osób piszących aplikacje np. w PHP bądź ASP.

Okazuje się, że mają do dyspozycji olbrzymią liczbę rozszerzeń, zamieniających Firefoksa w prawdziwy kombajn, wspomagający projektowanie, testowanie i analizowanie stron WWW. Bardzo często są to narzędzia unikatowe. Rzadko kiedy dostępne są alternatywne rozwiązania, np. w przypadku Internet Explorera musimy się zwykle przygotować na wydatek rzędu kilkudziesięciu lub nawet kilkuset dolarów, podczas gdy rozszerzenia do Firefoksa są darmowe.

Zestaw all inclusive

Dzięki funkcji Display Id & Class Details zorientowanie się, który styl odpowiada za wygląd danego elementu staje się dziecinnie proste. Koniec z mozolnym przedzieraniem się przez kod!

Dzięki funkcji Display Id & Class Details zorientowanie się, który styl odpowiada za wygląd danego elementu staje się dziecinnie proste. Koniec z mozolnym przedzieraniem się przez kod!

Rozpoczęcie opisu od pakietu innego niż Web Developer byłoby w najlepszym wypadku zaburzeniem priorytetów. Jest to najbardziej wszechstronne i przydatne narzędzie spośród wszystkich programistycznych dodatków do Firefoksa i zdecydowanie rekomendujemy jego instalację w pierwszej kolejności.

Najnowszą wersję można zawsze pobrać bezpośrednio ze strony autora, pod adresem http://chrispederick.com/work/firefox/webdeveloper/ .

Instalacja odbywa się w sposób standardowy dla wszystkich rozszerzeń, niemal automatycznie.

Po instalacji rozszerzenia dostęp do oferowanych przez nie funkcji uzyskujemy na trzy sposoby. Po pierwsze, w menu kontekstowym, dostępnym po wciśnięciu prawego przycisku myszy, w oknie przeglądarki pojawia się nowa pozycja Web Developer, dająca dostęp do wszystkich narzędzi. Po drugie, na pasku z ikonami jest dodatkowy zestaw ikon, który pozwala wywoływać te same funkcje, co menu kontekstowe, ale czasami kliknięcie ikony jest szybsze. Wreszcie, w menu Narzędzia przeglądarki pojawia się ten sam zestaw funkcji, co w menu kontekstowym.

Przyjrzyjmy się kolejnym kategoriom, na jakie podzielono ten prawdziwy kombajn. Niektóre funkcje tylko krótko omówimy, natomiast kilku najbardziej interesującym przyjrzymy się dokładniej.

Pierwsze menu nosi nazwę Disable (zablokuj). Jest ono równie przydatne dla zwykłych użytkowników, jak dla twórców stron, choć dla tych ostatnich z całą pewnością nie jest to najważniejsze narzędzie w pakiecie Web Developer. Poszczególne funkcje pozwalają zablokować pamięć podręczną przeglądarki, uruchamianie apletów Java i skryptów JavaScript; możemy również wyłączyć wyświetlanie obrazków (przydatne, gdy np. łączymy się przez telefon komórkowy), zmusić przeglądarkę do zignorowania styli ustawionych dla niej itd. Dla twórców stron szczególnie przydatne może być blokowanie styli, ponieważ operację tę można przeprowadzić wybiórczo - wyłączyć np. tylko wybrane style z zewnętrznych arkuszy, a pozostawić wszystkie zdefiniowane bezpośrednio w dokumencie albo odwrotnie. W przypadku skomplikowanych stron, wykorzystujących kilka arkuszy, pozwala to ustalić źródła ewentualnych błędów i problemów z wyświetlaniem strony.

Funkcja View Page Information z menu Information zbiera wszystkie najważniejsze informacje o wyświetlanej stronie w jednym oknie.

Funkcja View Page Information z menu Information zbiera wszystkie najważniejsze informacje o wyświetlanej stronie w jednym oknie.

Jeśli chodzi o arkusze stylów, podczas prac nad stroną jeszcze ciekawsze okazuje się kolejne menu - CSS. Sama jego nazwa od razu wyjaśnia, jakich funkcji się spodziewać. Jednak możliwości niektórych z nich i tak są zaskakujące. Jeśli byłeś kiedykolwiek ciekaw, jak jakaś witryna wyglądałaby z twoim arkuszem stylów - nic prostszego. Funkcja Add User Style Sheet... pozwala do dowolnego serwisu dodać własny arkusz i zobaczyć zmiany. To jednak raczej ciekawostka. Ciekawostką nie jest już jednak opcja Edit CSS. Po jej wybraniu z boku przeglądarki otwiera się panel, pozwalający edytować wszystkie style niezależnie od tego, czy stronę otwieramy lokalnie, z własnego dysku, czy też ze zdalnego serwera WWW. Wszystkie wprowadzane zmiany widzimy w czasie rzeczywistym! Nie trzeba ich mozolnie zapisywać w zewnętrznym edytorze, przełączać się do okna podglądu lub przeglądarki i odświeżać strony. Zmiana koloru, marginesów czy innych parametrów skutkuje ich natychmiastowym wprowadzeniem na ekranie. Dzięki temu czas dopasowania wielu ustawień niezwykle się skraca.

Równie przydatne jest kolejne menu Forms, które udostępnia kilka narzędzi do pracy z formularzami. Wszyscy, którzy kiedykolwiek tworzyli rozbudowane formularze, zwłaszcza generowane automatycznie przez skrypty, wiedzą zapewne, że może to być dość żmudne zajęcie, podczas którego łatwo o błędy. Także analiza formularzy przygotowanych przez innych może być dość trudnym zadaniem. Jednak użycie funkcji z menu Forms całkowicie zmienia tę sytuację.

Dobrze sformatowany kod źródłowy, z logicznie pokazanymi kolejnymi poziomami zagnieżdżeń, bardzo ułatwia analizę strony.

Dobrze sformatowany kod źródłowy, z logicznie pokazanymi kolejnymi poziomami zagnieżdżeń, bardzo ułatwia analizę strony.

Przede wszystkim możemy skorzystać z opcji Display Form Details. Po jej wybraniu, przy wszystkich polach formularza zostaną wyświetlone etykiety, pokazujące rodzaj pola, jego nazwę, identyfikator i inne parametry. Formularz zostanie otoczony ramką, w której zobaczymy nazwę, rodzaj akcji, stronę docelową i inne informacje zawarte w nagłówku. Już ten mechanizm wystarcza, żeby dość dobrze zorientować się w strukturze formularza, ale to nie wszystko. Możemy również skorzystać z funkcji View Form Information, która informacje na temat wszystkich formularzy zestawia w formie tabeli i wyświetla w nowej zakładce. Pozycje w tabeli pokazują etykietę, identyfikator, nazwę, rodzaj i wartość wszystkich pól, co oznacza, że do dyspozycji ma my komplet potrzebnych informacji. Dzięki temu analiza formularza, jego tworzenie i ewentualne poprawianie mogą odbywać się dużo prościej.

Oczywiście nie zabrakło kilku innych drobiazgów - wyświetlania prawdziwej zawartości pól z hasłami, opróżniania wszystkich pól wyboru typu "radio" (normalnie, po zaznaczeniu jednego z takich pól, nie ma możliwości ponownego wyłączenia wszystkich), uaktywniania zablokowanych pól edycyjnych, zdejmowania ograniczenia długości itd.

Jeśli chciałbyś zobaczyć, jak wygląda "rozmowa" pomiędzy przeglądarką a serwerem, np. aby dowiedzieć się, jakie informacje na twój temat są wysyłane w świat, wówczas Live HTTP Headers będzie doskonałym rozwiązaniem.

Jeśli chciałbyś zobaczyć, jak wygląda "rozmowa" pomiędzy przeglądarką a serwerem, np. aby dowiedzieć się, jakie informacje na twój temat są wysyłane w świat, wówczas Live HTTP Headers będzie doskonałym rozwiązaniem.

Menu Images (obrazy) okazuje się niezwykle pomocne we wszystkich pracach związanych z ilustracjami na stronie. Pozwala np. dzięki opcjom Display Image Dimensions oraz Display Image File Size nałożyć na wszystkie ilustracje etykiety, pokazujące ich rozmiary i wielkość pliku. Bardzo przydatna do analizy jest View Image Information. Otwiera nowy panel w przeglądarce i wyświetla w nim w postaci tabeli zestawienie wszystkich ilustracji na danej stronie. Przedstawiane są poszczególne grafiki, a pod nimi informacje o ich lokalizacji, rozmiarach i objętości.

Bardzo proste jest też wychwycenie tych ilustracji, które np. nie mają alternatywnych opisów lub informacji o rozmiarze w kodzie strony. Odpowiednie polecenia z Images oznaczają tego typu ilustracje ramkami.

Kolejne menu Information kryje jedne z najciekawszych funkcji w całym pakiecie, przynajmniej dla osób, które lubią analizować budowę stron. Poszczególne funkcje w tym menu pozwalają dowiedzieć się, w jaki sposób skonstruowana jest strona. Zacznijmy np. od arkuszy styli, które dzisiaj są podstawą definiowania wyglądu stron. W przypadku skomplikowanych, wykorzystujących arkusze stylów z dziedziczeniem parametrów, zorientowanie się, który styl odpowiada za wygląd konkretnego elementu, wymaga czasami poważnego śledztwa. Tymczasem wystarczy wybrać opcję Display Id & Class Details, aby przy wszystkich elementach strony opisanych stylami pojawiły się etykiety, pokazujące identyfikator i przypisaną do niego klasę styli. Dzięki temu wystarczy jeden rzut oka, aby stwierdzić, który styl powinniśmy poddać edycji, aby zmienić wygląd danego elementu.

ColorZilla sprawia, że wybór odpowiedniej palety kolorów do serwisu jest dużo łatwiejszy, zwłaszcza że można korzystać z wielu profesjonalnych palet programu graficznego Gimp.

ColorZilla sprawia, że wybór odpowiedniej palety kolorów do serwisu jest dużo łatwiejszy, zwłaszcza że można korzystać z wielu profesjonalnych palet programu graficznego Gimp.

Do szybkiego zorientowania się w konstrukcji strony przydaje się też bardzo opcja View Page Information. Po jej wybraniu wyświetli się okno, zawierające podsumowanie wielu informacji, które moglibyśmy uzyskać również za pomocą innych wyspecjalizowanych funkcji. Możemy dowiedzieć się, czy dana strona jest wyświetlana z pamięci podręcznej, jaki jest jej całkowity rozmiar, podejrzeć informacje o wszystkich formularzach, wyświetlić odnośniki wraz z opisami lub zebrać w jednej tabeli informacje o wszystkich plikach multimedialnych na stronie.

Do ciekawostek należy funkcja Display Topographic Information, która zmienia kolory strony, przy czym kolor ciemniejszy pokazuje bardziej zewnętrzną tabelę lub obszar zdefiniowany np. znacznikami <DIV>, a im jaśniejszy, tym wyższy poziom zagnieżdżenia takich obszarów.

W menu Miscellanous zebrano różne funkcje, których nie dało się umieścić gdzie indziej. Niektóre z nich mają charakter raczej ciekawostki, jak np. Linearize Page, wyświetlająca dowolną stronę jako jedną, zwykle bardzo długą szpaltę. Są też jednak funkcje bardziej użyteczne, np. pozwalające opróżnić pamięć podręczną, foldery historii, uwierzytelniania HTTP czy ciasteczek zdefiniowanych podczas sesji. Do użytecznych dodatków należy również otwieranie konsol Java i JavaScript.

Menu Outline zawiera funkcje, pozwalające obrysować (w celu łatwego zlokalizowania) prawie każdy element strony. Możliwe jest zaznaczenie elementów blokowych strony (np. znaczników DIV), fragmentów z kodem, który nie jest zgodny z najnowszymi specyfikacjami, tabel, ich komórek, ramek itd. Jest to bardzo przydatne, gdy próbujemy odkryć, dlaczego szkielet strony, budowanej z wykorzystaniem tabel, nie działa prawidłowo. Zamiast ręcznie definiować w kodzie strony wyświetlanie ramek w tabelach, jednym kliknięciem myszy można włączyć i wyłączyć ich obrysowanie.

Niezwykle przydatne i proste jest menu Resize, które pozwala raz na zawsze rozwiązać problem testowania wyglądu strony w różnej rozdzielczości. Dzięki funkcji w tym menu możemy łatwo ustawić okno o dowolnych rozmiarach, a także włączyć wyświetlanie aktualnego rozmiaru na pasku tytułu przeglądarki.

Ostatnie z przydatnych menu to Tools, czyli narzędzia. Jest to zbiór odsyłaczy do różnych serwisów, zajmujących się sprawdzaniem poprawności kodu HTML, CSS, RSS itd. Dzięki temu wystarczy jedno kliknięcie, aby wysłać zapytanie na temat aktualnie wyświetlanej w przeglądarce strony i otrzymać odpowiedź.


Zobacz również