Wykorzystanie dobrych narzędzi w czasie pracy nad stroną internetową pozwala zaoszczędzić mnóstwo czasu i zmniejszyć ilość błędów. Jako osoba zajmująca się tworzeniem stron www przetestowałem naprawdę sporo rozwiązań, które rzekomo mają pomóc osiągnąć te cele. Dziś chciałem przedstawić Wam jedno z moich ulubionych narzędzi: wtyczkę (rozszerzenie) do przeglądarek Firefox i Google Chrome o nazwie Web Developer.

Wtyczka Web Developer pozwala na szybkie sprawdzenie błędów w kodzie oraz przetestowanie tworzonej strony www w różnych okolicznościach. Jej funkcje pogrupowane są w następujące zakładki:

  • Disable (wyłącz)
  • Cookies
  • CSS
  • Forms (formularze)
  • Images (obrazy)
  • Information (informacje)
  • Miscellaneous (różne)
  • Outline (obrysuj)
  • Resize (zmień rozmiar)
  • Tools (narzędzia)
  • Options (opcje)

Z pomocą prezentowanego pluginu jednym kliknięciem sprawdzicie walidowalność (poprawność) kodu (X)HTML i CSS. W podobny sposób można przetestować kod pod kątem standardów użyteczności i dostępności serwisu (np. czy strona dostosowana jest do osób niepełnosprawnych). Do listy walidatorów można dodać także własne pozycje, co z pewnością docenią osoby przyzwyczajone do innych webowych usług sprawdzających poprawność kodu.

Wtyczka Web Developer - funkcje związane z obrazkami
Wtyczka Web Developer – funkcje związane z obrazkami

Co bardzo przydaje się na ostatnim etapie tworzenia strony www, wtyczka Web Developer umożliwia zmianę rozmiaru okna przeglądarki, dzięki czemu możemy symulować, jak strona będzie wyglądała na ekranach o różnych rozdzielczościach. Od niedawna możliwe jest podawanie własnych rozmiarów okna – możecie zatem podać rozmiar ekranu telefonu komórkowego.

Wtyczka Web Developer - responsive design
Wtyczka Web Developer pomaga w tworzeniu stron www zgodnych z responsive design

Warto zauważyć także, że Web Developer daje możliwość wyłączania poszczególnych elementów: kodu CSS (odpowiedzialnego za wygląd strony), grafiki, kodu Java Script. Dzięki temu można symulować m.in. to, jak strona będzie widziana „oczami’ robota wyszukiwarki bądź jak będzie wyświetlana w tekstowych przeglądarkach internetowych.

Na tym nie koniec możliwości wtyczki Web Developer. Oferuje ona wiele ciekawych funkcji związanych z formularzami, ułatwia czyszczenie cache’u (pamięci podręcznej przeglądarki) i historii, a także umożliwia sprawdzenie koloru pod wskaźnikiem myszy (funkcja pipety).

Wtyczka Web Developer - pipeta koloru
Wtyczka Web Developer – do dyspozycji webmastera jest m.in. pipeta

Polecam Waszej uwadze tę wtyczkę i zapraszam do odkrywania drzemiących jej możliwości, zwłaszcza że plugin Web Developers jest dostępny całkowicie za darmo. Więcej informacji (w tym możliwość pobrania rozszerzenia) na stronie autora.

Marek Jeleśniański

Specjalizuję się w dziennikarstwie internetowym. Prowadzę szkolenia z tego zakresu, napisałem także dwie prace naukowe związane z mediami internetowymi. Od 7 lat jestem redaktorem naczelnym serwisu PC Centre. Jestem także właścicielem agencji interaktywnej Oxido.

Leave a Reply