Zwiększanie produktywności z wtyczkami Chrome dla twórców stron www i koderów

Chrome jest najpopularniejszą przeglądarką internetową – według danych serwisu StatCounter używa jej połowa Europejczyków i blisko 60% Amerykanów. Jeśli dodamy do tego narzędzia DevTools, łatwo zrozumieć, dlaczego Chrome jest lubiany również przez web developerów.

Wydajność i produktywność pracy z Chrome można podnieść jeszcze bardziej dzięki wtyczkom i rozszerzeniom. Wiele z nich zostało stworzonych z myślą o twórcach stron www i sklepów internetowych.

Zwiększanie produktywności z wtyczkami Chrome dla twórców stron www i koderów
Rozszerzenia i wtyczki Chrome dla web developerów

Dzięki rozszerzeniom Chrome dla developerów możesz nie tylko przetestować różne wersje kolorystyczne layoutu czy fontów, ale również sprawdzić poprawność linków i ułatwić sobie kodowanie.

Które wtyczki do Chrome sprawdzą się najlepiej przy kodowaniu strony www? Które warto zainstalować?

 

Najlepsze wtyczki Chrome dla twórców stron www

Dimensiosn

Źródło 

Wtyczki dla web developerów i twórców stron www
Rozszerzenia Chrome dla web developerów -Dimensiosn

To rozszerzenie oparte na kodzie open-source służy do sprawdzania wymiarów elementu. Przydaje się, kiedy otrzymujesz do opracowania mock-up grafiki nowego interfejsu. Kiedy otworzysz go w Chrome i aktywujesz rozszerzenie Dimensions, rozszerzenie wyświetli ci wymiary każdego elementu.

 

Window Resizer

Źródło

Wtyczki dla web developerów i twórców stron www
Rozszerzenia Chrome dla web developerów – Windows Resizer

To jedna z wielu wtyczek Chrome, które umożliwiają sprawdzenie, jak twój projekt będzie wyglądał na urządzeniach o różnej rozdzielczości. Kliknięcie w ikonkę rozszerzenia i wybór wielkości dostosowują okno przeglądarki do zadanej wartości.

 

Fontface Ninja

Źródło 
Koniec z zagadkami, jakiego fontu użyto na stronie. Fontface Ninja pokaże ci nazwę kroju, a także umożliwi jego pobranie lub zakup ze strony producenta.

 

ColorZilla

Źródło

Wtyczki dla web developerów i twórców stron www
Rozszerzenia Chrome dla web developerów – ColorZilla

Ta wtyczka oryginalnie została napisana dla Mozilli, ale ze względu na dużą popularność powstała także jej wersja na Chrome. Dodaje do przeglądarki sporo opcji pomagających w doborze i edycji koloru – od palet i kroplomierzy aż tworzenia gradientów w CSS.

 

TinEye Reverse Image Search

Źródło 

Wtyczki dla web developerów i twórców stron www
Rozszerzenia Chrome dla web developerów – TinEye

Ta wtyczka potrafi znaleźć źródło niemal każdej grafiki. Wtyczka w wyszukiwaniu nie polega na opisach, słowach kluczowych lub metadanych. W czasie wyszukiwania tworzy raczej „odcisk” twojego zdjęcia i porównuje je z zasobami bazy, a dzięki temu wyszukuje obrazy identyczne, a nie „podobne do”, również jeśli obrazy były przycinane, obracane lub edytowane. Co tydzień do bazy dodawanych jest kilkadziesiąt milionów obrazów.

 

Live CSS Editor

Źródło

Wtyczki dla web developerów i twórców stron www
Rozszerzenia Chrome dla web developerów – Live CSS Editor

Dzięki temu rozszerzeniu możesz napisać regułę CSS do każdej strony i od razu zobaczyć efekty. Dlaczego Live CSS jest lepszy od innych podobnych wtyczek? Rozszerzenie zapisuje edytowany CSS za każdym razem, kiedy odświeżasz stronę.

 

CSS Dig

Źródło 

Koniec z bałaganem w CSS. Wtyczka CSS Dig grupuje style, aby ułatwić ci analizę kodu i zaplanować jego edycję.

 

CSS Shapes Editor

Źródło 

Wtyczki dla web developerów i twórców stron www
Rozszerzenia Chrome dla web developerów – CSS Shape Editor

Kodowanie kształtów potrafi być czasochłonne, szczególnie jeśli są to bardziej złożone obiekty. To rozszerzenie umożliwi ci edytowanie wartości Shape CSS w czasie rzeczywistym.

 

SnappySnippet

Źródło 
Ta wtyczka potrafi niesamowicie ułatwić życie. Zaznacz element i jednym kliknięciem wyślij jego CSS lub HTML do CodePen, jsFiddle lub JS Bin do dalszego edytowania lub testowania.

 

Check my Links

Źródło

Wtyczki dla web developerów i twórców stron www
Rozszerzenia Chrome dla web developerów – Check My Links

Nikt nie lubi niedziałających linków, a o pomyłkę nietrudno. To rozszerzenie zaznaczy na zielono działające linki i podkreśli na czerwono te, które nie działają.

 

Web Developer Chceklist

Źródło 

Wtyczki dla web developerów i twórców stron www
Rozszerzenia Chrome dla web developerów – Web Developer Check List

Strona zakodowana, gotowa do uruchomienia… dla pewności warto sprawdzić, czy wszystko działa i wygląda dobrze. Ta wtyczka to lista rzeczy, które powinieneś sprawdzić, jeśli chcesz pracować „zgodnie z regułami sztuki” lub jeśli… brakuje ci cierpliwości na ostatniej prostej przed oddaniem ukończonego zlecenia. Wtyczka wskaże ci także te obszary strony, które wymagają poprawek.

 

Website Destroyer

Źródło

Nawet jeśli na ogól kochasz swoją pracę, masz pewnie chwile, w których najchętniej zniszczyłbyś cały projekt i wyładował na nim programistyczne frustracje. Oto rozszerzenie stworzone właśnie w tym celu. Arsenał narzędzi do niszczenia strony jest niemal nieograniczony – od młotka do bomby.

 

12 rozszerzeń Chrome dla web developerów – podsumowanie

Już za zestaw DevTools Chrome oferuje sporo ułatwień w pracy web developerów. Mimo to możliwości Chrome można powiększyć, stosując wtyczki i rozszerzenia, które uzupełniają działanie DevTools.

Dzięki rozszerzeniom Chrome ułatwisz sobie pracę przed rozpoczęciem kodowania: sprawdzisz wielkość elementów, dobierzesz fonty, kolory i obrazy. Przy samej pracy nad stroną przydadzą się wtyczki ułatwiające kodowanie w CSS – od kodowania niestandardowych kształtów aż do poprawiania błędów .

Kiedy strona będzie już gotowa, dzięki wtyczkom do Chrome przetestujesz jej wygląd na ekranach o różnych rozdzielczościach, a nawet… sprawdzisz z listą, czy nie zapomniałeś o przetestowaniu któregoś elementu.