W zasadzie o tym dodatku powinienem był napisać już dawno temu. Większość z moich czytelników pewnie go już zna. Tym, którzy jeszcze wtyczki Web Developer nie mają w swoich przeglądarkach, zachęcam do lektury tego tekstu.

Web Developer to, jak sama nazwa wskazuje, narzędzie dla twórców stron internetowych. Większość funkcji jest przeznaczona dla twórców front-endu. Jednak twórcy back-endu także znajdą coś dla siebie.

Instalacja Web Developer

Aby zainstalować dodatek, wchodzimy w menu Narzędzia -> Dodatki i wpisujemy jego nazwę do wyszukiwarki rozszerzeń. Instalacja przebiega standardowo.

Wygląd

Narzędzia wtyczki mamy do dyspozycji z paska, który po instalacji pojawi się pod paskiem zakładek. Znajdziemy na nim 12 przycisków pokazujących różne listy wyboru.

Wyłącz

W menu Wyłącz możemy wyłączyć różne opcje przeglądarki. Większość z tych opcji znajdziemy także w Preferencjach Firefoxa, jednak dostęp do nich z taiego menu jest bardzo wygodny. Przykładem takiej opcji jest wyłączenie obsługi Javy (normalnie należałoby wyłączyć wtyczkę Java) albo JavaScriptu (opcja w Preferencjach).

Ciekawą opcją jest, pierwsza na liście, możliwość wyłączenia pamięci podręcznej. Funkcja przydaje się, gdy tworzymy witrynę i modyfikujemy plik css. Czasami zdarza się, że przy przejściu pomiędzy podstronami style zostaną wczytane z pamięci podręcznej. Jej wyłączenie spowoduje, że takie elementy będą za każdym razem od nowa wczytywane z pliku.

Ciasteczka

Kolejne menu nosi nazwę Ciasteczka. Jak wszyscy się domyślacie, służy do obsługi tzw. plików cookies, czyli danych witryn zachowywanych na komputerze użytkownika. Korzystając z opcji zawartych w tym menu możemy bardzo łatwo usunąć ciasteczka z danej sesji, dla danej domeny, czy ścieżki, a także przejrzeć je, zmodyfikować, czy też dodać nowe. Mamy także możliwość wyłączenia obsługi plików cookies - ta opcja także jest dostępna z poziomu Preferenzji przeglądarki.

CSS

Kolejne menu pozwala nam na zpoznanie się z akrkuszami stylów. Moim zdaniem najprzydatniejszą opcją jest możliwość edytowania arkusza css i zapoznawania się z efektami zmian. Jest to z pewnością dużo wygodniejsze niż ciągłe przełączanie się na edytor kodu i odświeżanie strony w przeglądarce. Odpowiednio wyedytowany kod możemy zapisać na dysku i później wykorzystywać przy odwiedzaniu strony.

Kolejne opcje dodatku pozwalają nam na manipulacie formularzami, obrazkami i informacjami np. z nagłówków.

Zaznacz

To menu wykorzystuję zdecydowanie najczęściej. Dzięki jego narzędziom, mogę sprawdzić np. czy zbyt dużemu oddaleniu jakiegoś elementu od innego jest winny nieodpowiedni margines, padding, czy może niewidoczny element wstawiony w to miejsce przez przypadek. Aby zaznaczyć konkretny element możemy skorzystać z opcji Zaznacz wskazany element - wyświetlającej adres (np. html > body > #content > div > p) po najechaniu myszką na tenże obiekt, albo Określ typy zaznaczanych elementów. W tej drugiej funkcji określamy (zupełnie jak w arkuszu CSS) adres elementu, który ma zostać zaznaczony wybranym kolorem.

Do dyspozycji mamy jeszcze możliwość zaznaczania elementów blokowych, ramek itp.

Jak widać, Web Developer, to bardzo przydatna wtyczka. Dzięki niej moja praca nad front-endem, której szczerze nienawidzę (back-end jest tym co kocham :D) stała się ciut bardziej przyjemna.

Zachęcam do samodzielnego wypróbowania wszystkich opcji - tych, których tutaj nie opisałem, też i podzielenia się swoimi opiniami.