Jeśli jesteś projektantem i potrzebujesz przydatnych narzędzi do przyspieszenia, współpracy lub audytu projektów tworzenia stron internetowych, rozszerzenie Chrome ma wiele narzędzi.

Ta lista zawiera jedne z najpopularniejszych – a niektórzy twierdzą, że konieczne – narzędzia i rozszerzenia Chrome^{(tools and Chrome extensions)} , które każdy użytkownik wykonujący prace projektowe powinien mieć w swojej torbie.

1. Flagi Dom

DOM Flags to proste w użyciu rozszerzenie Chrome , które zapewnia programistom nowy sposób pracy z narzędziami przeglądarki. Pozwala deweloperom przyspieszyć zadanie stylizacji elementów.

Używając skrótów klawiaturowych dla każdego elementu, możesz dodać zakładkę do nawigacji.

Wszyscy doświadczyliśmy trudności w sprawdzaniu bardzo szczegółowych elementów i łatwo się zgubić.

Flagi DOM^{(DOM Flags)} umożliwiają śledzenie elementów stylizacji, zawierają funkcję automatycznego sprawdzania komponentów z dokładnością. To z kolei pomoże przyspieszyć przepływ pracy i wdrożenie DevTools .

DOM Flags umożliwia śledzenie zmian. I koncentruj się na elementach, z którymi pracujesz.

2. Sizzy

Sizzy daje projektantom i programistom prosty sposób testowania swoich witryn w wielu rzutniach.

Sizzy zapewnia prosty sposób sprawdzania projektu w czasie rzeczywistym. Oferuje interaktywny widok dowolnej liczby urządzeń i rozmiarów ekranu. Możesz nawet symulować klawiaturę urządzenia, a następnie przełączać się między trybami poziomym i pionowym.

Zainstalowanie rozszerzenia Chrome doda przycisk do paska narzędzi, który po kliknięciu otworzy bieżący adres URL^(URL) na platformie Sizzy . Rozszerzenie zablokuje wszystkie nagłówki „ x-frame-options ”, dzięki czemu będziesz mógł zajrzeć do dowolnej witryny online.

Sizzy to projekt typu open source, a cały kod można zobaczyć tutaj^(here) .

3. Robot sprawdzający

Checkbot może przetestować Twoją witrynę pod kątem problemów z bezpieczeństwem, a także przeprowadzić audyt szybkości ładowania strony internetowej. Zapewni projektantom możliwość identyfikacji typowych błędów i zaleci ulepszenia w zakresie bezpieczeństwa witryny, wyszukiwarki i szybkości witryny.

Korzystając z ponad 50 wskaźników najlepszych praktyk, przeprowadzi audyt witryny pod kątem najlepszych praktyk SEO , uszkodzonych linków, zduplikowanych treści i nie tylko. Narzędzie sprawdzi również poprawność CSS , JS i HTML .

Checkbot wykrywa błędy projektanta i kodera w czasie rzeczywistym, oszczędzając Ci kłopotu z koniecznością wielokrotnego cofania się i ponownego sprawdzania swojej pracy.

Jeśli szukasz narzędzia dobrej jakości, które naprawi uszkodzone linki do stron, zapewni unikalną treść i tytuły stron oraz wyeliminuje łańcuchy przekierowań, to narzędzie będzie przydatne.

Projektantom może pomóc zminimalizować CSS i JS, a także dostarczyć zaleceń dotyczących zminimalizowania CSS i wykorzystania pamięci podręcznej przeglądarki.

4. Maszynka do strzyżenia GistBox

GistBox to jedno z najbardziej pomocnych rozszerzeń Chrome dla projektantów stron internetowych.

GistBox może utworzyć GitHub Gist z dowolnego bloku kodu na przeglądanej stronie internetowej.

W prawym górnym rogu dowolnego bloku kodu zobaczysz mały przycisk, którego naciśnięcie spowoduje wyświetlenie wyskakującego okienka umożliwiającego zapisanie kodu w Gist .

Możesz tworzyć nowe Gist za pomocą prawego przycisku myszy i zapisywać bloki kodu do późniejszej kontroli i użycia.

Integracja z GitHub umożliwia projektantom i programistom zbieranie bloków kodu i manipulowanie nimi lub kategoryzowanie ich do późniejszego wykorzystania. To sprawia, że ​​jest to wygodne i wydajne narzędzie do rozszerzenia Chrome .

5. KolorZilla

ColorZilla to niezwykle przydatne rozszerzenie Chrome do gromadzenia kodów szesnastkowych, które można oznaczać, opisywać i kategoryzować dla indywidualnych projektów projektowania stron internetowych.

Pozwala wybrać narzędzie zakraplacza, które wyodrębni kolor z dowolnej strony internetowej i zapisze go w schowku ColorZilla .

Dzięki niemu możesz szybko opracować palety kolorów do późniejszego wykorzystania oraz jako sposób na zapewnienie spójnego używania kolorów podczas projektowania i tworzenia stron internetowych.

ColorZilla działa również jako analizator kolorów i edytor gradientów CSS , dzięki czemu możesz przekonwertować obraz na CSS .

6. Jaka czcionka?

 To rozszerzenie do przeglądarki Chrome^{(Chrome Extension)} to prawdziwa oszczędność czasu dla tych, którzy chcą wykorzystać swoje ulubione czcionki i włączyć je do własnego projektu projektowania stron internetowych.

Rozszerzenie WhatFont do Chrome^{(WhatFont Chrome)} umożliwia programistom szybkie analizowanie i identyfikowanie prawie każdej czcionki na dowolnej stronie internetowej.

Rozszerzenie jest dobrze opracowane i zamiast otwierać narzędzia kontrolne, rozszerzenie działa po prostu przesuwając mysz nad czcionką.

Nie tylko to, ale rozszerzenie zidentyfikuje również usługę, która jest używana do obsługi czcionki Pages poszedł i będzie obsługiwać Google Font API i Typekit.^{(Google Font API and Typekit.)}

7. Jasny Strzał

LightShot to szybkie narzędzie do wykonywania zrzutów ekranu, które umożliwia przechwycenie całej lub części dowolnej strony i przesłanie jej, pobranie lub wysłanie do miejsca docelowego innej firmy.

Zrzuty ekranu wykonane przez LightShot można wykorzystywać i udostępniać w mediach społecznościowych lub drukować.

Możesz dodawać adnotacje i dodawać tekst, strzałki i inne elementy do wybranej części ekranu. Ale być może jedną z najbardziej błyskotliwych funkcji tego prostego narzędzia dla projektantów stron internetowych jest to, że wybierając obraz, możesz przejść do pełnego wyszukiwania^(Google) podobnych obrazów online w Google.

LightShot można skonfigurować w wielu językach.

Rozszerzenie jest napisane w czystym JavaScript i będzie działać również w systemach Windows^(Windows) , Chromebook , Linux i Mac OS . Może być również dostępny jako aplikacja komputerowa,^{(desktop application)} co czyni go doskonałym wyborem dla projektantów stron internetowych, którzy są zależni od wielu urządzeń.

8. Niesamowity zrzut ekranu

Podobnie jak Lightshot , Awesome Screenshot to rozszerzenie do przechwytywania ekranu i obrazu.

Różni się jednak od Lightshot pod wieloma względami. Awesome Screenshot można skonfigurować tak, aby połączyć wszystkie zrzuty ekranu z dyskiem Google .

Umożliwia wykonanie zrzutu ekranu tych elementów, które są poza twoim widokiem, aby uchwycić całą stronę. Posiada dodatkowe narzędzia do edycji i adnotacji przecinek pozwala na kadrowanie i edycję obrazu w ramach rozszerzenia... lub za pomocą dodatkowych aplikacji Awesome Screenshot

Możesz rozszerzyć jego funkcje, instalując aplikację Chrome na komputer. Rozszerzenie umożliwia również przechwytywanie i udostępnianie wideo, dzięki czemu możesz współpracować z innymi programistami lub projektantami podczas pracy w dowolnej witrynie.

Możesz dodać dodatkowe obrazy do zrzutu ekranu, a także zaznaczyć na niebiesko lub usunąć elementy, których nie chcesz pokazywać innym.

9. Wyczyść pamięć podręczną

Rozszerzenie Clear Cache do przeglądarki Chrome^{(Cache Chrome Extension)} to szybkie i proste narzędzie, które umożliwia wyczyszczenie plików cookie i pamięci podręcznej przeglądanej strony. Eliminuje potrzebę przechodzenia do strony ustawień przeglądarki w celu wyczyszczenia kilku prostych elementów strony.

Dla projektantów stron internetowych, którzy dokonują wielu zmian i chcą je przeglądać w czasie rzeczywistym, jest to doskonałe narzędzie, które wyeliminuje wiele frustracji związanych z przeglądaniem starych danych.

Czasami trzeba wyczyścić pamięć podręczną i pliki cookie, ale nawigacja do ustawień Chrome jest nużąca. Wyczyść pamięć podręczną^(Cache) umożliwia wyczyszczenie pamięci podręcznej, a także globalnych lub lokalnych plików cookie jednym kliknięciem.

Clear Cache pozwoli Ci skonfigurować, które elementy chcesz usunąć ze strony. Zmienne^(Variables) obejmują Cash , pliki do pobrania, wszystkie systemy, dane formularzy, w Cash , bazę danych indeksów, dane wtyczek, hasła i inne.

10. Rozszerzenie Google Chrome dla programistów internetowych

Rozszerzenie Google Chrome dla programistów witryn internetowych^{(Web Developer Google Chrome Extension)} umożliwia programistom i projektantom łatwe przeprowadzanie audytów, analizowanie i sprawdzanie ich stron internetowych pod kątem wszelkich naruszeń najlepszych praktyk projektowania, kodowania, użyteczności i optymalizacji pod kątem wyszukiwarek.

To świetne narzędzie typu „wszystko w jednym”, które nie obciąża zbytnio przeglądania naszych zasobów, ale zapewnia mnóstwo informacji przydatnych w projektowaniu stron internetowych, jest również odpowiedzialne za elementy optymalizacji pod kątem wyszukiwarek w witrynie lub na stronie.

 Rozszerzenie instaluje pasek narzędzi z wieloma narzędziami dla programistów internetowych.

Narzędzie poda wskazówki dotyczące rozmiaru, szerokości i wymiarów strony, które są sprzeczne z najlepszymi praktykami stosowanymi na wielu urządzeniach. Umożliwia sprawdzenie osadzonego JavaScriptu^(JavaScript) i przeglądanie witryny poprzez symulację różnych urządzeń.

Rozszerzenie działa dobrze w systemach Windows^(Windows) , Linux i Mac OS . Oprócz problemów związanych z kodowaniem i projektowaniem zapewni również wgląd w informacje dotyczące metatagów, nagłówków odpowiedzi, informacji o kolorze i informacji topograficznych.

Możesz przejrzeć główne funkcje narzędzia, a także jego pełne możliwości na stronie programisty Chrisa Pedericksa^{(Chris Pedericks’ website)} .

Bez wątpienia istnieje mnóstwo innych wysokiej jakości i przydatnych rozszerzeń Chrome , z których mogą korzystać projektanci stron internetowych lub programiści.

Ta lista przedstawia kilka najpopularniejszych i najbardziej przydatnych narzędzi. Czy masz jakieś zalecenia dotyczące narzędzi, które Twoim zdaniem są bardziej przydatne lub lepsze niż te z tej listy? Powiadom nas.

Top 10 Chrome Extensions and Tools for Web Designers

If you are designer in neеd of some useful tools to speed up, collaborate or аudit your web development projects, Chrome extension has a multitude of tools.

This list comprises some of the most popular – and some would argue necessary – tools and Chrome extensions that every user doing design work should have in their kit bag.

1. DomFlags

DOM Flags is a simple to use Chrome extension that provides a new way for developers to work with browser tools. It allows developers to speed up the task of styling elements.

Using keyboard shortcuts for each element you can bookmark your navigation.

We’ve all experienced the difficulty in inspecting highly detailed elements, and it’s easy to get lost.

DOM Flags enable you to track styling elements includes a feature to inspect components with accuracy automatically. This, in turn, will help speed up DevTools workflow and implementation.

DOM Flags enables you to track changes. And maintain your focus on the elements you’re working with.

2. Sizzy

Sizzy gives designers and developers a simple way to test their sites in multiple viewports.

Sizzy provides a simple way to check your design in real-time. It offers an interactive view of any number of devices and screen sizes. You can even simulate a device keyboard and then switch between landscape and portrait modes.

Installing a Chrome extension will add a button to your toolbar, which, when clicked is going to open the current URL in the Sizzy platform. The extension will block all “x-frame-options” headers so you will be able to take a look at any website online.

Sizzy is an open source project, and you can see the entire code here.

3. Checkbot

Checkbot can test your site for security issues and also audit your website page loading speed. It will provide designers with a means of identifying typical errors and recommend improvements in site security, search engine, and site speed.

Using more than 50 best practice metrics, it will audit a website for best practice SEO, broken links, duplicate content and more. The tool will also validate CSS, JS, and HTML.

Checkbot picks up on designer and coder errors in real time saving you the trouble of having to go back and recheck your work repeatedly.

If you’re looking for a good quality tool that will fix broken page links, ensure unique content and page titles and eliminate redirect chains this tool would be useful.

For designers, it can help you minimize your CSS and JS as well as provide recommendations on how to minify your CSS and leverage browser caching.

4. GistBox Clipper

GistBox is one of the most helpful Chrome extensions for web designers.

GistBox can create a GitHub Gist from any code block on the webpage you are viewing.

At the top right-hand corner of any code block, you’ll see a small button, which when pressed, will allow a pop-up that enables you to save the code to the Gist.

You can create new Gists with a right mouse click and save blocks of code for later inspection and use.

Integrating with GitHub enables designers and developers to collect code blocks and manipulate them or categorize them for later use. This makes it a convenient and efficient Chrome extension tool.

5. ColorZilla

ColorZilla Is an incredibly useful Chrome extension for gathering hex codes which can be tagged, labeled and categorized for individual web design projects.

It enables you to select an eye-dropper tool that will extract the color from any web page and save it to the ColorZilla clipboard.

With it, you can quickly develop color palettes for later use and as a way of ensuring you are using color consistently in web design and development.

ColorZilla also acts as a color analyzer and CSS gradient editor so that you can convert an image to CSS.

6. WhatFont

 This Chrome Extension is a real time-saver for those wanting to utilize their favorite fonts  And incorporate them into their own web design project.

WhatFont Chrome extension allows developers to quickly analyze and identify almost any font on any web page.

The extension is well developed and rather than having to open up inspection tools the extension works by merely waving the mouse over the font.

Not only that but the extension will also identify the service that’s being used to serve up a Pages went font and will support Google Font API and Typekit.

7. LightShot

LightShot is a quick screenshot tool that enables you to capture the entire, or part of any page and either upload it or download it or send it to a third party destination.

Screenshots taken by LightShot can be used and shared on social media or printed.

You can annotate and add text, arrows and more to the selected portion of the screen. But perhaps one of the most brilliant features of this simple tool for web designers is that by selecting an image you can then proceed to do a full Google image search for similar images online.

LightShot can be configured in multiple languages.

The extension is written in pure JavaScript and will also work for Windows, Chromebook, Linux and Mac OS. It can also be accessed as a desktop application making it an excellent choice for web designers who are dependent on multiple devices.

8. Awesome Screenshot

Like Lightshot, Awesome Screenshot is a screen and image capturing extension.

It does differ from Lightshot, however, in a number of ways. Awesome Screenshot can be configured to connect all your screenshots with your Google drive.

It allows you to screenshot those elements which are beyond your view in order to capture the entire page. It has additional editing and annotation tools comma allows for cropping and image editing all within the extension.. or with the use of additional Awesome Screenshot applications

You can extend its features by installing the Chrome application for desktop as well. The extension also allows for video capturing and sharing so that you can collaborate with other developers or designers when working on any site.

You can add additional images to a screenshot as well as blue or erase elements that you would rather not show to others.

9. Clear Cache

The Clear Cache Chrome Extension Is a fast and simple tool that enables you to clear cookies and cache of the page you’re looking at. It removes the need to navigate to the settings page of your browser in order to clear a few simple page elements.

For web designers who are making multiple edits and want to view them in real time, this is an excellent tool that will eliminate much of the frustration of looking at old data.

There are times you need to clear your cache and cookies, but navigating to Chrome settings is tedious. Clear Cache lets you erase your cache as well as global or local cookies at the click of a button.

Clear Cache will allow you to configure which elements you want to clear from the page. Variables include Cash, downloads, all systems, form-data, at Cash, index database, plugin data, passwords and more.

10. Web Developer Google Chrome Extension

The Web Developer Google Chrome Extension allows developers and designers to easily audit, analyze and check their web pages for any violations of best practice design, coding, usability, and search engine optimization.

It’s a great all-in-one tool that is not heavy on browse our resources yet provides a ton of information useful to web design is also responsible for search engine optimization elements within a website or page.

 The extension installs the toolbar with multiple web developer tools.

The tool will give you indications on page size, width, and dimensions which make conflict with best practice use on multiple devices. It allows you to check embedded JavaScript and view your website through a simulation of various devices.

The extension functions well on Windows, Linux and Mac OS. In addition to coding and design issues, it will also provide insights into meta tag information, response headers, color information, and topographic information.

You can review the main features of the tool as well as it’s full capabilities on developer Chris Pedericks’ website.

No doubt there are a plethora of other high quality and useful Chrome extensions that are web designer or developer could use.

This list showcases a few of the most popular and useful tools. Do you have any recommendations for tools which you think I’m more useful or superior to the ones in this list? Let us know.

Related posts

• 8 najlepszych serwisów społecznościowych dla grafików do prezentacji swoich portfolio

• Spotify Web Player: jak uzyskać dostęp i korzystać z niego

• 7 najlepszych narzędzi i aplikacji do tworzenia własnych memów za darmo

• Dlaczego warto nadal używać Bing do wyszukiwania w sieci

• 8 narzędzi do tworzenia obrazów o idealnej wielkości dla serwisów społecznościowych

• 10 najlepszych witryn do sprawdzania faktów do walki z dezinformacją

• 7 witryn, w których można znaleźć nagrania z domeny publicznej do Twoich projektów wideo

• 10 najlepszych darmowych witryn do hostingu obrazów w 2022 r.

• 12 najbardziej bezsensownych stron internetowych, które zabijają czas i dobrze się bawią

• 5 najlepszych witryn do zdalnej naprawy komputerów, aby uzyskać pomoc teraz

• 3 najlepsze narzędzia OCR online do wyodrębniania tekstu z obrazów

• 5 najlepszych alternatyw Afterpay do kupowania teraz i płatności później

• Rozpocznij dziennik online z tymi 6 najlepszymi witrynami i aplikacjami

• 8 najlepszych alternatyw dla mediów społecznościowych dla Facebooka i Twittera

• 54 najlepsze alternatywy dla Amazon dla zakupów online

• 7 najlepszych aplikacji i stron internetowych Deepfake

• 5 najlepszych witryn do testowania częstotliwości odświeżania monitora

• 5 najlepszych stron i aplikacji do nauki gry na gitarze

• 10 niezbędnych narzędzi dla cyfrowego nomada

• 10 zasobów edukacyjnych za darmo Materiały edukacyjne i pomoce w formacie PDF