Если вы дизайнер и нуждаетесь в некоторых полезных инструментах для ускорения, совместной работы или аудита ваших проектов веб-разработки^{(web development)} , у расширения Chrome есть множество инструментов.

Этот список включает в себя некоторые из самых популярных и, по мнению некоторых, необходимых инструментов и расширений Chrome , которые каждый пользователь, работающий над дизайном^{(design work)} , должен иметь в своем наборе инструментов^{(kit bag)} .

1. ДомФлаги

DOM Flags — это простое в использовании расширение Chrome,^{(Chrome extension)} которое предоставляет разработчикам новый способ работы с инструментами браузера. Это позволяет разработчикам ускорить задачу стилизации элементов.

Используя сочетания клавиш для каждого элемента, вы можете добавить в закладки свою навигацию.

Мы все сталкивались с трудностями при проверке очень подробных элементов, и легко заблудиться.

Флаги DOM^{(DOM Flags)} позволяют отслеживать элементы стиля, включая функцию автоматической проверки компонентов с точностью. Это, в свою очередь, поможет ускорить рабочий процесс и реализацию DevTools^{(DevTools workflow and implementation)} .

Флаги DOM^{(DOM Flags)} позволяют отслеживать изменения. И сосредоточьтесь на элементах, с которыми вы работаете.

2. Сиззи

Sizzy предоставляет дизайнерам и разработчикам простой способ протестировать свои сайты в нескольких окнах просмотра.

Sizzy предоставляет простой способ проверить ваш дизайн в режиме реального времени. Он предлагает интерактивный просмотр любого количества устройств и размеров экрана. Вы даже можете имитировать клавиатуру устройства,^{(device keyboard)} а затем переключаться между ландшафтным и портретным режимами^{(landscape and portrait modes)} .

Установка расширения Chrome^{(Chrome extension)} добавит кнопку на панель инструментов, при нажатии на которую открывается текущий URL -адрес на платформе Sizzy^{(Sizzy platform)} . Расширение заблокирует все заголовки « x-frame-options », чтобы вы могли просматривать любой веб-сайт в Интернете.

Sizzy — это проект с открытым исходным кодом^{(source project)} , и вы можете увидеть весь код здесь^(here) .

3. Чекбот

Checkbot может проверить ваш сайт на наличие проблем с безопасностью, а также проверить скорость загрузки страницы вашего сайта. Он предоставит разработчикам средства выявления типичных ошибок и рекомендации по улучшению безопасности сайта^{(site security)} , поисковой системы^{(search engine)} и скорости сайта^{(site speed)} .

Используя более 50 метрик передового опыта, он проверит веб-сайт на наличие передового SEO , неработающих ссылок, дублированного контента^{(duplicate content)} и многого другого. Инструмент также будет проверять CSS , JS и HTML .

Checkbot выявляет ошибки дизайнера и^{(designer and coder errors)} программиста в режиме реального времени, избавляя вас от необходимости возвращаться и перепроверять свою работу несколько раз.

Если вы ищете качественный инструмент^{(quality tool)} , который исправит неработающие ссылки на страницы, обеспечит уникальность контента и заголовков страниц^{(content and page titles)} и устранит цепочки перенаправлений, этот инструмент будет вам полезен.

Для дизайнеров это может помочь вам свести к минимуму ваш CSS и JS^{(CSS and JS)} , а также предоставить рекомендации о том, как минимизировать ваш CSS и использовать кеширование браузера.

4. Машинка для стрижки GistBox

GistBox — одно из самых полезных расширений Chrome для веб-дизайнеров.

GistBox может создать GitHub Gist из любого блока кода^{(code block)} на просматриваемой веб-странице.

В правом верхнем углу^{(right-hand corner)} любого блока кода вы увидите небольшую кнопку, при нажатии которой открывается всплывающее окно, позволяющее сохранить код в Gist .

Вы можете создавать новые Gists, щелкнув правой кнопкой мыши, и сохранять блоки кода для последующего изучения и использования^{(inspection and use)} .

Интеграция с GitHub позволяет дизайнерам и разработчикам собирать блоки кода и управлять ими или классифицировать их для последующего использования. Это делает его удобным и эффективным^{(convenient and efficient)} инструментом расширения Chrome .^{(Chrome extension)}

5. ЦветЗилла

ColorZilla — невероятно полезное расширение Chrome для сбора шестнадцатеричных кодов, которые можно помечать, маркировать и классифицировать для отдельных проектов веб-дизайна^{(web design)} .

Это позволяет вам выбрать инструмент пипетки, который извлечет цвет с любой веб-страницы и сохранит его в буфер обмена ColorZilla.

С его помощью вы можете быстро разработать цветовые палитры для последующего использования и как способ убедиться, что вы последовательно используете цвет в веб- дизайне и разработке^{(design and development)} .

ColorZilla также действует как анализатор цвета и редактор градиентов ^{(gradient editor)}CSS , так что вы можете конвертировать изображение в CSS .

6. Какой шрифт

 Это расширение Chrome^{(Chrome Extension)} реально экономит время для тех, кто хочет использовать свои любимые шрифты и включить их в свой собственный проект веб-дизайна^{(web design project)} .

Расширение WhatFont для Chrome^{(WhatFont Chrome extension)} позволяет разработчикам быстро анализировать и идентифицировать практически любой шрифт на любой веб-странице.

Расширение хорошо разработано, и вместо того, чтобы открывать инструменты проверки, расширение работает, просто проводя мышью по шрифту.

Кроме того, расширение также будет определять службу, которая используется для обслуживания шрифта Pages go , и будет поддерживать Google Font API и Typekit.^{(Google Font API and Typekit.)}

7. Световой выстрел

LightShot — это инструмент для создания быстрых снимков экрана,^{(screenshot tool)} который позволяет вам захватывать всю или часть любой страницы и либо загружать ее, либо загружать, либо отправлять стороннему получателю^{(party destination)} .

Скриншоты, сделанные с помощью LightShot^(LightShot) , можно использовать и публиковать в социальных сетях или распечатывать.

Вы можете аннотировать и добавлять текст, стрелки и многое другое в выбранную часть экрана. Но, возможно, одна из самых замечательных функций этого простого инструмента для веб-дизайнеров заключается в том, что, выбрав изображение, вы можете приступить к полному поиску похожих изображений в Интернете в Google .^{(Google image)}

LightShot можно настроить на нескольких языках.

Расширение написано на чистом JavaScript и также будет работать для Windows , Chromebook , Linux и Mac OS^{(Linux and Mac OS)} . К нему также можно получить доступ как к настольному приложению^{(desktop application)} , что делает его отличным выбором для веб-дизайнеров, которые зависят от нескольких устройств.

8. Потрясающий скриншот

Как и Lightshot , Awesome Screenshot — это расширение для захвата экрана и изображений.

Однако он отличается от Lightshot во многих отношениях. Awesome Screenshot можно настроить для подключения всех ваших скриншотов к вашему диску Google^{(Google drive)} .

Это позволяет вам делать снимки экрана тех элементов, которые находятся за пределами вашего поля зрения, чтобы захватить всю страницу. Он имеет дополнительные инструменты редактирования и аннотации^{(editing and annotation tools)} . Запятая позволяет кадрировать и редактировать изображения в расширении ... или с использованием дополнительных приложений Awesome Screenshot.

Вы также можете расширить его возможности, установив приложение Chrome^{(Chrome application)} для рабочего стола. Расширение также позволяет записывать видео и делиться ими, чтобы вы могли сотрудничать с другими разработчиками или дизайнерами при работе над любым сайтом.

Вы можете добавлять на скриншот дополнительные изображения, а также выделять синим цветом или стирать элементы^{(blue or erase elements)} , которые не хотите показывать другим.

9. Очистить кеш

Расширение Clear Cache для Chrome^{(Cache Chrome Extension)} — это быстрый и простой инструмент, который позволяет очищать файлы cookie и кеш просматриваемой страницы. Это избавляет от необходимости переходить на страницу настроек вашего браузера, чтобы очистить несколько простых элементов страницы.

Для веб-дизайнеров, которые вносят несколько правок и хотят просматривать их в режиме реального времени, это отличный инструмент, который избавит от многих неудобств, связанных с просмотром старых данных.

Иногда вам нужно очистить кеш и файлы cookie, но переход к настройкам Chrome утомителен. Clear Cache позволяет стереть кеш, а также глобальные или локальные файлы cookie одним нажатием кнопки.

Clear Cache позволит вам настроить, какие элементы вы хотите удалить со страницы. Переменные^(Variables) включают Cash , загрузки, все системы, данные форм, at Cash , базу данных индексов^{(index database)} , данные плагинов, пароли и многое другое.

10. Расширение Google Chrome для веб-разработчиков

Расширение Google Chrome для веб-разработчиков^{(Web Developer Google Chrome Extension)} позволяет разработчикам и дизайнерам легко проверять, анализировать и проверять свои веб-страницы на предмет любых нарушений передового опыта проектирования^{(practice design)} , кодирования, удобства использования и поисковой оптимизации.

Это отличный универсальный инструмент, который не требует больших усилий при просмотре наших ресурсов, но предоставляет массу информации, полезной для веб-дизайна, а также отвечает за элементы поисковой оптимизации^{(search engine optimization)} на веб-сайте или странице.

 Расширение устанавливает панель инструментов с несколькими инструментами веб-разработчика.

Инструмент покажет вам размер страницы, ширину и размеры, которые противоречат рекомендациям по использованию^{(practice use)} на нескольких устройствах. Это позволяет вам проверять встроенный JavaScript и просматривать ваш веб-сайт через симуляцию различных устройств.

Расширение хорошо работает на Windows , Linux и Mac OS. Помимо проблем с кодированием и дизайном^{(coding and design issues)} , он также предоставит информацию о метатегах ,^{(tag information)} заголовках ответов, информации о цвете^{(color information)} и топографической информации.

Вы можете просмотреть основные функции инструмента, а также его полные возможности на веб-сайте разработчика Криса Педерикса^{(Chris Pedericks’ website)} .

Без сомнения, существует множество других высококачественных и полезных расширений Chrome , которые могут использовать веб- ^(Chrome)дизайнеры или разработчики^{(designer or developer)} .

В этом списке представлены некоторые из наиболее популярных и полезных инструментов. Есть ли у вас какие-либо рекомендации относительно инструментов, которые, по вашему мнению, более полезны или превосходят инструменты в этом списке? Дайте нам знать.

Top 10 Chrome Extensions and Tools for Web Designers

If you are designer in need of sоme useful tools to speed up, collaborate or audit your wеb development projects, Chrome extension has a multitυde 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 Best Social Networking Sites для Graphic Designers для демонстрации своих портфелей

• Spotify Web Player: как Access and Use это

• 7 Best Tools and Apps для создания собственного Meme для Free

• Почему все еще стоит использовать Bing для поиска в Интернете

• 8 инструментов для создания изображений идеального размера для сайтов социальных сетей

• Лучшие сайты знакомств и Apps для Everyone в 2021 году

• 6 бесплатных онлайн-инструментов для демонстрации экрана

• Где Vegan Food возле меня? 6 лучших сайтов для поиска Your Area

• 10 образовательных ресурсов для Free PDF Teaching Materials and Aids

• 3 инструмента отслеживания цен Amazon для рабочего стола или браузера

• 10 Best Sites для проверки скорости набора текста

• 16 Best Sites до Find Free Audiobooks Online

• 5 Best Remote Computer Repair сайты, чтобы получить Help сейчас

• 8 Best YouTube Channels для Photography and Videography Lessons

• 10 Best Sites для просмотра Cartoons Online для Free

• 54 лучшие альтернативы Amazon для Online Shopping

• 10 Best бесплатные сайты Image Hosting в 2022 году

• Как Edit YouTube Videos: 5 лучших практик

• 10 лучших сайтов проверки фактов на Fight Misinformation

• 5 лучших альтернатив после повторного периода Shop сейчас и Pay Later