15 najlepszych rozszerzeń Google Chrome dla projektantów witryn 2020

Google Chrome jest najbardziej rozpoznawalną przeglądarką internetową, a nie dlatego, że została stworzona przez samą firmę Google. Jest solidnym liderem na liście udziałów rynkowych przeglądarek internetowych, z ponad 45% przewagą nad najbliższym rywalem: Mozillą Firefox. Jest liderem na rynku mobilnych przeglądarek internetowych dzięki WebKit (Safari), odpowiednikowi Chrome na iOS. Chrome jest znany z solidnego i stabilnego silnika JavaScript, który obsługuje mnóstwo technologii. Przede wszystkim framework Node.js jest oparty na silniku, który napędza Google Chrome.

Chrome zyskuje dla siebie wszelkiego rodzaju reputację; niektórzy decydują się obwiniać brak bezpieczeństwa i dogłębnych narzędzi. Ale jeśli chodzi o szerszy obraz, wyobrażenie sobie lepszej przeglądarki niż Chrome jest trudne. Szybkość, skalowalność, wydajność i takie rzeczy jak narzędzia dla programistów sprawiają, że zarówno projektanci stron internetowych, jak i programiści stron internetowych trzymają się Chrome w długoterminowej strategii.

Odbyło się wiele dyskusji na temat bezpieczeństwa i prywatności rozszerzeń Google Chrome. Ale sprowadza się to do świadomego wyboru rozszerzeń od godnych zaufania programistów i startupów, które faktycznie chcą dostarczyć społeczności coś dobrego. Rozszerzenie możliwości Chrome zapewniło programistom niezbędne zestawy narzędzi i funkcje do tworzenia rozszerzeń, które mogą pomóc w kultywowaniu większej produktywności i, co ważniejsze, większej dostępności do tworzenia rzeczy w przeglądarce.

Programiści front-end są jednymi z największych zwycięzców korzystania z Chrome, ponieważ zapewnia bardzo płynne środowisko podobne do IDE podczas tworzenia witryn i aplikacji dla przeglądarki i sieci mobilnej. Omówimy piętnaście najlepszych rozszerzeń Google Chrome dla projektantów, z których część programistów może również okazać się przydatna. Lista jest bezstronna i oparta na badaniach, które projektanci udostępnili na niektórych z najpopularniejszych obecnie forów społecznościowych w Internecie.

Przełącznik agenta użytkownika

User-Agent to odcisk palca wysyłany w ramach każdego nowego żądania skierowanego do strony. Strona internetowa może następnie wykryć Twojego User-Agenta i podać Ci odpowiednią wersję strony, zgodnie z możliwościami Twojej przeglądarki. Jest to standardowa technika stosowana w witrynach do określania, czy ktoś przegląda witrynę na komputerze czy urządzeniu mobilnym. Rozszerzenie User-Agent Switcher pozwala zmienić klienta użytkownika na dowolną inną przeglądarkę lub urządzenie mobilne, umożliwiając szybkie eksperymentowanie ze sposobem wyświetlania projektów na tych urządzeniach i w przeglądarce. To małe rozszerzenie, które ma dużą moc, aby pomóc programistom zwiększyć produktywność, oszczędzając im czasu na przełączanie się tam iz powrotem.

Przejdź do pełnej strony

Kiedy pracujesz nad projektem strony internetowej lub chcesz przechwycić pełny ekran witryny, aby zaprezentować swojego klienta, GoFullPage jest dobrym rozwiązaniem. To proste w użyciu rozszerzenie Chrome dla projektantów stron internetowych jest dość oczywiste. Krótko mówiąc, narzędzie przechwytuje w całości bieżącą stronę, którą przeglądasz. Po prostu naciskasz przycisk i to wszystko, nie musisz sprawdzać żadnych innych opcji. Oprócz tego możesz również użyć skrótu klawiaturowego, aby uruchomić GoFullPage.

Zobaczysz, że to rozszerzenie przechwytuje stronę, część po części, a następnie otwiera nową kartę, z której możesz pobrać obraz (PNG, JPG) lub PDF. Oczywiście możesz po prostu przeciągnąć i upuścić go na pulpicie. Niezależnie od tego, czy jest to prosty blog, złożona strona internetowa czy sklep internetowy, GoFullPage rejestruje wszystko bez wysiłku.

Czas Ratowania

Jeśli chodzi o pracę nad projektowaniem stron internetowych, ważny jest czas. W końcu nie chcesz spędzać zbyt wiele czasu na skupianiu się na rozproszeniu, podczas gdy zamiast tego możesz wykonać o wiele więcej dobrej jakości pracy. Dzięki RescueTime, rozszerzeniu do Chrome, możesz śledzić czas spędzony w Chrome przez cały dzień. Czy byłeś produktywny czy nieproduktywny? RescueTime pomoże ci rozgryźć różne rzeczy, dzięki czemu możesz odpowiednio zarządzać swoim czasem.

Nie chodzi tylko o śledzenie czasu każdej witryny, na której spędzasz. RescueTime klasyfikuje również strony jako „bardzo produktywne” i „bardzo rozpraszające”. Co więcej, rozpoznaje nawet, gdy odchodzisz od komputera – w tym przypadku przestaje śledzić. Jeśli kiedykolwiek zastanawiałeś się, co robisz w Chrome każdego dnia, RescueTime pomoże Ci lepiej zorientować się, ile czasu spędzasz w pracy i ile czasu na „po prostu sprawdzanie”.

Wyczyść pamięć podręczną

Chociaż Chrome ma swoją własną funkcję, możesz przyspieszyć czyszczenie pamięci podręcznej za pomocą rozszerzenia Clear Cache. Możesz dodać go do Chrome jednym kliknięciem i od razu zacząć z niego korzystać. Podczas czyszczenia pamięci podręcznej narzędzie nie będzie prosić o dodatkowe potwierdzenia, tworzyć wyskakujące okienka i inne rzeczy. Jeśli jednak chcesz usunąć wszystkie dane globalnie, konieczne jest dodatkowe zezwolenie. W końcu nie chcesz przypadkowo wyczyścić wszystkiego.

Co więcej, możesz łatwo określić, co dokładnie chcesz wyczyścić, na przykład pamięć podręczną aplikacji, pliki cookie, pliki do pobrania, dane formularzy, historię, pamięć lokalną, lista jest długa. Możesz także określić, którą domenę uwzględnić lub wykluczyć podczas czyszczenia danych. Clear Cache obsługuje również okresy. Szybko i prosto, a to jest najważniejsze, gdy usprawnisz swój przepływ pracy.

Linijka

Czy chciałbyś mieć wirtualną linijkę, która pomaga mierzyć elementy na stronach internetowych? Jeśli tak jest, Ruler jest praktycznym rozszerzeniem Chrome, które zrobi magię. Jako projektant stron internetowych, to narzędzie może okazać się bardzo pomocne podczas określania rozmiaru każdego elementu, ponieważ możesz zmierzyć wszystko na każdej stronie, używając wyłącznie swoich umiejętności myszy.

Możesz dodać linijkę do witryny i mierzyć elementy w pikselach. Dodatkowo możesz również użyć kursora myszy jako linijki, która pozwoli ci narysować określone kształty, które chcesz zmierzyć. Wszystkie niezbędne informacje o rozmiarze i wymiarze znajdziesz na samej stronie w pikselach. Po prostu dodaj rozszerzenia i kliknij przycisk, który pojawi się w prawym górnym rogu. To wszystko, masz teraz wirtualną linijkę, która mierzy strony, elementy i komponenty.

Zmiana rozmiaru okna

Dzięki ponad 500 000 aktywnych użytkowników we wszystkich społecznościach technologicznych rozszerzenie Window Resizer pomaga projektantom fałszować różne rodzaje rozdzielczości, aby lepiej zrozumieć, w jaki sposób te rozdzielczości współdziałają z projektami. Niezbędne jest zbudowanie strony internetowej, która działa dla większości populacji. A to rozszerzenie pomaga określić, gdzie mogą wystąpić błędy, dzięki czemu możesz szybko wprowadzić niezbędne zmiany w kodzie. Możesz szybko zmienić szerokość i wysokość okna przeglądarki, pozycję, w której się znajduje, i jest wbudowana funkcja shortcode, która znacznie zwiększy Twoją zdolność do sprawdzania różnych rozdzielczości ekranu podczas kodowania na żywo.

Jaka czcionka?

Przy milionach aktywnych witryn i mnóstwie nowych witryn, które odwiedzamy każdego dnia, zawsze jest coś, co przyciąga naszą uwagę, konkretny widżet lub funkcja dynamiczna albo konkretna czcionka, która wydaje się wyglądać znakomicie, ale nie jesteśmy w stanie wskazać mu nazwę. Dzięki rozszerzeniu WhatFont możesz szybko zbadać czcionki na dowolnej stronie witryny i szybko nauczyć się nazwy czcionki, aby rozpocząć wyszukiwanie. Poza tym WhatFont pomaga również zrozumieć rodzaj usług używanych do obsługi czcionek, w przypadku, gdy pochodzą one z usług premium lub bezpłatnych, takich jak Google Fonts lub Typekit.

Pakowacz kart

Projektanci, a nawet programiści, walczą o utrzymanie porządku i porządku w swoich kartach. Wykonując prace projektowe, nieustannie patrzymy na inne źródła, badania, prace inspiracyjne i przykłady, jak doskonalić nasze projekty, a te karty mają tendencję do nakładania się dość szybko! Dzięki Tab Packager możesz teraz cieszyć się prostym sposobem pakowania wszystkich kart w jeden adres URL, a następnie uzyskiwania do nich dostępu z tego adresu URL. Poprawia to produktywność, ponieważ możemy stale wracać do naszej listy i szybko pobierać to, czego potrzebujemy, zamiast przeglądać karty i zgadywać, z czego składa się każda karta.

CSS-Shack

Photoshop nie jest jedynym narzędziem, które zajmuje się warstwami. W rzeczywistości każdy programista front-end ma do czynienia z warstwami w swoich konfiguracjach CSS. To rozszerzenie Chrome dla projektantów stron internetowych pomaga tworzyć warstwy stylów, a następnie eksportować te warstwy do plików CSS, aby uzyskać łatwiejszy dostęp. Możesz szybko tworzyć projekty, makiety lub proste elementy, takie jak przyciski, za pomocą kilku kliknięć. Niezależnie od tego, czy chodzi o eksperymenty losowe i testowanie w piaskownicy, czy też pełny przewodnik po stylu, który próbujesz zbudować, CSS-Shack oferuje narzędzia, które pomogą Ci w tych działach.

Przewodnik po płaskich kolorach

Tworzysz nowy projekt strony internetowej przy użyciu przewodnika po stylu FLAT, ale nie masz pewności, jakich kolorów użyć? Dzięki prostemu w użyciu rozszerzeniu Flat Colors Guide, zmartwienia szybko znikają. Zainstaluj rozszerzenie i po prostu kliknij przycisk rozszerzeń, aby załadować kolory, które zwykle występują w projektach PŁASKICH.

KolorZilla

ColorZilla ma miliony aktywnych użytkowników w przeglądarce Mozilla. I wreszcie, dostępne jest również rozszerzenie Google Chrome, które zgromadziło już ponad 800 000 aktywnych użytkowników. Dzięki ColorZilla możesz szybko ocenić kolory na dowolnej stronie. Możesz użyć tych kolorów, aby je zoptymalizować i załadować w dowolnym innym narzędziu, którego używasz do tworzenia swoich projektów. Łatwo uzyskaj dostęp do kolorów pojedynczych pikseli na stronie, zapewniając odpowiednią głębię kolorów w każdej sytuacji. Skróty umożliwiają szybszą manipulację kolorami i optymalizację.

Stylebot

Stylebot to narzędzie do edycji na żywo do manipulowania kodem CSS dowolnej witryny i elementu, który aktualnie przeglądasz. Możesz szybko wybierać poszczególne elementy i wprowadzać zmiany wyglądu za pomocą CSS. Zmień wszystko, co chcesz, korzystając z automatycznych wbudowanych narzędzi lub napisz własny CSS. Pomoże Ci to dowiedzieć się więcej o CSS. Daje również wgląd w to, jak działa edycja na żywo i o ile szybciej możesz wprowadzać pożądane zmiany w swoich projektach. Z ponad 150 000 użytkowników jest to rozszerzenie, które każdy projektant stron internetowych powinien mieć w swoim zestawie narzędzi.

Ciesz sięCSS

EnjoyCSS to studio do projektowania stron internetowych bezpośrednio w Twojej przeglądarce! Jest to bezpośredni generator CSS3, który pozwala zarządzać ustawieniami interfejsu użytkownika dowolnego wybranego elementu. Twórz przejścia, przekształcaj elementy, pracuj z gradientami, cieniami i nie tylko. EnjoyCSS posiada również bibliotekę gotowych przekształceń, które możesz bezpośrednio zastosować do swoich elementów.

Emmet LiveStyle

Emmet LiveStyle natychmiast aktualizuje arkusz stylów Twojej strony internetowej, podczas gdy Ty edytujesz plik CSS, LESS lub SCSS w edytorze tekstu. Bez zapisywania plików i ponownego ładowania strony: czyste doświadczenie w czasie rzeczywistym! I jest to pierwsze narzędzie, które przenosi aktualizacje z DevTools z powrotem do kodu źródłowego we właściwy sposób. Wiele recenzji tego rozszerzenia wspomina, że ​​nie wyobrażają sobie pracy w projektowaniu stron internetowych bez tego narzędzia.

Web Developer

Mozilla Firefox ma własne narzędzia programistyczne, podobnie jak Google Chrome. W ostatnich latach wielu użytkowników Firefoksa przeszło na Chrome. Ale nadal wydaje się, że brakuje określonej funkcji lub brakuje jej w określonych działach. Jedną z największych strat dla osób zmieniających się jest utrata narzędzi programistycznych Mozilli. A ponieważ było na to tak duże zapotrzebowanie, kilku programistów zebrało się razem i zbudowało dokładne lustro Firefoksa Dev Tools dla Chrome. Z ponad milionem aktywnych użytkowników, to rozszerzenie jest ogromnym sukcesem zarówno dla uznanych, jak i początkujących projektantów, którzy chcą rozszerzyć zestaw narzędzi przeglądarki do pracy z projektami internetowymi w środowisku na żywo.