Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Firefox i dodatki dla webdevelopera

Firefox jest ulubioną przeglądarką wielu webmasterów, ale czy zastanawiałeś się dlaczego?
Prawdopodobnie swoją popularność zawdzięcza sobie ilością dodatków, które do niego wyszły. W tym artykule chcę ci przedstawić narzędzia, które znacznie przyśpieszyły moją pracę i dziś nie wyobrażam sobię bez nich tworzenia stron. 

Firefox i jego wbudowane narzędzia
Firefox posiada wbudowane narzędzia dla twórców witryn. Znajdziemy je w pasku menu -> narzędzia -> dla twórców witryn.

=inspect-select

Pierwszym z nich jest pasek programisty z pomocą, którego możemy sterować naszą przeglądarką. Konsoli WWW jak i debugera szeroko opisywać nie będę, ponieważ mają one na celu głównie zauważyć czynności na stronie, a także błędy, ale od czego są walidatory i dodatki opisane później, które są bardziej precyzyjne i aktualne.

Przycisk zbadaj element oferuje nam sprawdzenie w formie graficznej jakie style css są podpięty do konkretnego kodu html/xhtml. Jest on podpięty również do edytora stylu w wynikiem czego możemy szybko i nie zmieniając okna zmienić konkretną wartość i wprowadzać zmiany w formie podglądu.

Jednym z ważniejszym narzędziem dla każdego designera będzie widok responsywny gdzie sami możemy w łatwy sposób sterować szerokością okna i obserwować jak strona wygląda na różnych rozdzielczościach.

Kolejną wygodą jaką daje nam Firefox jest brudnopis. Czasem nasza pamięć zawodzi i warto zanotować najważniejsze rzeczy, ale jednak czy nie lepszy jest zwykły notatnik?  Skończyliśmy wypisywać możliwości narzędzi firefoxa oprócz jednej ciekawej funkcji, którą zostawiłem na sam koniec.

Badając dowolne miejsce strony (poprzez zbadaj element) możemy włączyć tryb podglądu 3D. Bez problemu możemy na nim zauważyć, co ukrywa się za naszymi oczami, a ciebie czytelniku zapraszam dalej do przeglądu dodatków, które samemu będziesz musiał zainstalować.

Colorzilla – Paleta kolorów każdego designera
Colorzilla jest dodatkiem, który można ściągnąć z http://www.colorzilla.com/ . Można go używać zarówno w Google Chromie jak i Firefoxie, a używać naprawdę warto! Zacznijmy od samego zapisywania barw, które dla większości was jest szczegółem. Colorzilla podaje nam kolory w  RGB, HSL i systemie szesnastkowym. Sami także możemy wybrać jak chcemy by były zapisywane czy rgb(252, 252, 252), rgb(99%, 99%, 99%), R: 252, G: 252, B: 252

Kroplomierz jest wam pewnie znany z wielu programów graficznych gdzie potrzebujecie po prostu użyć takiego samego koloru. W Colorzilli ma on wiele opcji konfiguracji. Samemu możesz wybrać skrót klawiszowy, automatyczne kopiowanie i sposób zapisu barwy. Oprócz tego mamy dostep do pełnej palety kolorów z moliwościa ich wyboru z panteonu. Nasz wybór możemy zapisać, a następnie w dowolnym momencie do niego powrócić tutaj warto wspomnieć o analizatorze kolorów. Analizator przeszukuje wszystkie style css w poszukiwaniu podanych na stronie barw, a następnie przedstawia nam szczegółowy raport.

Web Develop tools – ponieważ liczy się poprawna strona
Dodatek, który jest odpowiedzialny tak naprawdę za sprawdzanie stron pod wieloma względami. Pobieramy go z http://chrispederick.com/work/web-developer/ 

Untitled-3

Pierwszy przycisk jest to po prostu ,,budka kontroli przeglądarki”, a w niej możemy bez problemu wyłączyć działanie na stronie internetowej Javy, javascriptu, ale także wyłączyć kolory, css i praktycznie całą stronę.

Kolejne narzędzia dotyczą działania ciasteczek, które możemy wyłączyć, zapisać nowe, a także podejrzeć istniejące. Uważam, że jest to ogromna wygoda w testowaniu stron oferujących logowanie. Nie jestem jednak programistą, więc szybko zmienię temat na kolejny przycisk, którym jest CSS.

Autor tego dodatku dobrze przemyślał sytuację, gdy napisane style strony chcemy zamienić na własne i dodał nam do tego specjalną funkcję. Bardzo przydatnym narzędziem jest wyświetlanie panelu o stylach (Alt+Shift+N). Mając go otworzonego możemy kliknąć w dowolne miejsce na stronie w celu zbadania stylów, które zostały mu nadane (podobnie jak zbadaj element), ale również możemy ściągnąć ścieżkę do tego pliku w strukturze co może nam pomóc wprowadzić zmiany.  Kolejny przycisk może was naprawdę zaskoczyć a nazwę nosi niewinną ,,Formularze”. Nie tylko możemy włączyć automatyczne uzupełnienie formularza, ale także usunąć ograniczenie związane z długością frazy w oknie. Oszukać możemy także hasła, które od teraz mogą być widoczne, a nie zakodowane za pomocą gwiazdek. Oprócz tego za pomocą tego przycisku odblokujemy zablokowane okna formularzy. Mnie osobiście to zaszokowało, że da się tyle dowiedzieć z pomocą normalnego dodatku. Kolejnym narzędziem są ,,obrazki”, a z jego pomocą możemy usunąć obrazki na stronie, ale także pokazać ich wymiary i wagę. Możliwe, że będziesz jego często używać w momencie optymalizacji strony. Nadanie kolejnemu przyciskowi nazwy ,,informacja” było zbyt ogólnym powiedzeniem co się tutaj znajdzie. Bez problemu wykryjesz duplikaty identyfikatorów, a także inne nie dużo warte informację, ale ich ilość naprawdę przeraża. Osobiście jako designer nigdy nie użyłem niczego z tej kolumny, więc wydaję mi się, że mi przebaczycie jak jej dokładnie nie opiszę. Kolejnym przyciskiem są różne małe narzędzia, które mogą nam czasem pomóc przy edytowaniu strony. Znajdziemy tu między innymi: Możliwość skasowania swoich danych, linijkę, prowadnicę, lupę, możliwość wyświetlenia ukrytych elementów, a także możliwość edycji kodu źródłowego. Kolejną kolumną są możliwości wyróżnienia konkretnych elementów, którego wynikiem możemy dowiedzieć się szybko o sposobie kodowania strony. Kolejny przycisk jest odpowiedzialny za sterowaniem rozdzielczości okna przeglądarki, ale wydaję mi się, że tu jednak wygodniejszy jest wbudowane narzędzie Firefoxa opisane wcześniej. Reszta okien jest odpowiedzialna przede wszystkim za walidację strony, lecz nie koniecznie powinno się zwracać uwagi, ponieważ walidacja obejmuje pliki i sprawdza je pod Xhtml 1.0 Strict oraz Css 2. Jednak dodatek jak najbardziej warto ściągnąć.

Firebug – Chrząszcz dojdzie w każde miejsce na twojej stronie

52714

Ostatni dodatek stał się tak naprawdę standardem każdego webmastera. Specjalnie na samym początku nie rozpisywałem się na temat zbadaj element, ponieważ firebug łamię go o głowę! Pobieramy go z https://getfirebug.com/.  Badając element z użyciem tego narzędzia będziemy mogli zedytować samą strukturę, javascript i oczywiście wygląd. Oprócz tego mamy tutaj znacznie lepszą konsolę strony WWW, która wypisze nam błędy i ostrzeżenia. Gdy doinstalujemy jeszcze do niego dodatek yslow, będziemy mogli zacząć w pełni pracę nad optymalizacja strony. Badając style css konkretnego elementu możemy dowiedzieć się, która linijka, którego pliku się do niego odnosi, a jest to naprawdę wygodne. Oprócz tego możemy skopiować ścieżkę do konkretnego znacznika (podobnie jak w WebDevelopsTools, a także sprawdzimy tu również cały DOM. Ciężko jest mi opisać Firebuga, ale jest to po prostu dzieło mistrzów i gorąco polecam pobranie tego dodatku, a na pewno okaże się najczęściej używanym dodatkiem w waszej 


Autor artykułu: Krzysztof Łokaj