19 расширений Chrome для дизайнеров

• 
  Дизайн
• 8 мин на чтение
• 
  16732

Google Chrome, без сомнения, самый популярный браузер в мире. С точки зрения доли пользователей, Google Chrome значительно опережает другие основные браузеры, такие как Mozilla Firefox, Safari, Opera, Microsoft Edge и т. д. Всего за 10 лет Google Chrome удалось завоевать более 65% доли рынка. Одним из ключевых факторов его стремительного роста является огромная библиотека расширений, которая действительно отличает его от остальных, особенно для веб-дизайнеров и разработчиков. Тем не менее, в столь обширной библиотеке расширений становится немного хлопотно выбрать расширения для своих повседневных нужд.

В этой статье выделены 19 лучших расширений Chrome для веб-разработчиков и дизайнеров, чтобы повысить их производительность и сделать их жизнь проще.

ColorZilla является одним из старейших расширений подбора цвета, запущенных более 8 лет назад, и он успешно сохранил свою роль как лучший выбор цвета и расширение пипетки Chrome для разработчиков или дизайнеров даже сегодня. ColorZilla позволит вам получить цвет с любого пикселя в браузере на лету и вставить его в любую другую программу в формате RGB HEX. Как и палитра сайта, ColorZilla также позволяет создавать градиентные цвета и извлекать цветовые палитры с любого веб-сайта. Расширение также поддерживает историю недавно выбранных цветов.

В следующий раз, когда вы столкнетесь с веб-сайтом с красивой и приятной цветовой комбинацией, этот гениальный плагин может помочь вам быстро извлечь и сгенерировать цветовую палитру. Он также позволяет загружать изображения палитры для предварительного просмотра и создавать общедоступные ссылки. Палитра сайта вооружена бесшовной интеграцией с coolers.co и Google Art Pallete.

Font Face Ninja позволяет легко идентифицировать все шрифты, используемые на веб-странице. Font Face Ninja может похвастаться более чем 280 тысячами загрузок и является прямым конкурентом другого популярного расширения под названием WhatFont. Чтобы использовать это расширение Chrome для разработчиков и дизайнеров, вам просто нужно навести курсор на любой текстовый элемент на веб-странице, который вам нужно идентифицировать. Всплывающее окно будет отображать имя шрифта вместе с небольшим окном предварительного просмотра. Вы можете пометить свои любимые шрифты и сохранить их для последующего использования.

Веб-дизайнеры и разработчики могут столкнуться с необходимостью создания моментальных снимков для своих кодов в своих проектах для эстетики или представления целей. Marmoset-это блестящее расширение Chrome, которое позволяет создавать красивые снимки кода за считанные секунды одним щелчком мыши. Это может пригодиться для сообщений в социальных сетях или портфолио веб-сайтов. Это одно из обязательных расширений Chrome для веб-разработчиков и дизайнеров.

LambdaTest придумал расширение Chrome, чтобы помочь пользователю выполнять автоматическое тестирование скриншотов.  Вы можете выполнить тестирование скриншотов на 25 устройствах за один раз. Если вы нашли какую-либо аномалию пользовательского интерфейса, вы можете поделиться ею со своими коллегами в своем предпочтительном инструменте управления проектами. Предоставляя вам возможность выполнять кросс-браузерное тестирование в один миг, Lambdatest Screenshot, безусловно, является одним из лучших расширений Chrome для разработчиков, дизайнеров и, очевидно, тестировщиков по всему миру.

Page Ruler является одним из самых важных и полезных расширений Chrome для разработчиков и дизайнеров в списке, который помогает веб-разработчикам быстро измерять пиксельные размеры и позиционирование любого элемента на странице. Это расширение рисует изображение линейки на экране, которое позволяет вам проверять отдельные элементы и просматривать их показания размеров – ширина высота вместе с позиционированием.

Другое ключевое расширение в этой категории называется Dimensions, которое помогает измерять расстояния между различными элементами на веб-странице. Его функционирование немного отличается от линейки страниц. Размеры измеряет расстояния от указателя мыши вверх/вниз и влево/вправо, пока не достигнет границы. Это делает его идеальным инструментом для измерения расстояний между изображениями, полями ввода, кнопками, видео, GIF, текстом, иконками. Еще одна особенность, которая устанавливает размеры друг от друга является его способность работать с макетами, а также, если ваш дизайнер передал вам макеты дизайна страниц в форматах Jpeg или PNG, поместите их в Chrome, и размеры будут работать без сучка и задоринки. Одна вещь, которую нужно отметить о размерах, заключается в том, что она не всегда может хорошо работать с изображениями.

Check My Links, возможно, является самым мощным и надежным broken link checker расширением Chrome для разработчиков и дизайнеров в библиотеке Chrome.  Он просматривает всю веб-страницу и проверяет каждую отдельную ссылку и сообщает, является ли она действительной или нет. Расширение дает вам возможность скопировать каждую сломанную ссылку в буфер обмена, только в один клик. Идентификация и исправление неработающих ссылок имеет решающее значение для любого веб-сайта для эффективного SEO на странице и избежания штрафов от искателей сайтов Google.

Clear Cache extension помогает очистить ваш кэш вместе с данными просмотра одним щелчком мыши, не тратя время на всплывающие окна, диалоговые окна или окно настроек Chrome. Кроме того, вы даже можете настроить, сколько данных вы хотите очистить в настройках опции расширения – App Cache, Cache, Cookies, загрузки, файловые системы, данные формы, история, индексированная БД, локальное хранилище, данные плагина, пароли и WebSQL. Вы можете удалить файлы cookie глобально или для определенных доменов. Один из самых удобных расширений Chrome для разработчиков, дизайнеров и всех остальных тоже.

Одним из самых больших препятствий, с которыми сталкиваются разработчики, сталкиваясь с впечатляющим лицом веб – сайта, является интригующий вопрос-Какие технологии были использованы для создания этого веб-сайта? В этом случае Wappalyzer приходит на помощь. Это удивительное расширение является кросс-платформенным инструментом, созданным Elbert Alias в 2009 году, который раскрывает технологии, используемых для создания конкретного веб-сайта. Он автоматически обнаруживает более 1000 технологий, таких как генераторы сайтов, фреймворки, библиотеки, Плагины, CMS, базы данных, серверное программное обеспечение, виджеты, инструменты аналитики и т. д. Вы можете использовать веб-сайт Wappalyzer или использовать расширение для быстрого использования. Это расширение Chrome для разработчиков и дизайнеров стали настоящим спасательным кругом для создания привлекательных веб-сайтов.

Ghostery-это расширение конфиденциальности со встроенным блокировщиком рекламы для устранения раздражающих рекламных объявлений с веб-сайта, защиты от отслеживания, защиты ваших данных и блокировки стороннего веб-сайта от отслеживания вместе с ускорителем скорости страницы и оптимизатором, чтобы сделать ваш опыт просмотра лаконичным и приятным. Он также поставляется с пользовательской панелью мониторинга внутри, которую можно настроить для просмотра соответствующей информации.

Если вы активно работаете с API, особенно RestFul API или что-то, что включает в себя тонну данных JSON, этот визуально потрясающий JSON highlighter служит отличной целью в качестве расширения Chrome для разработчиков. Вместо просмотра огромных данных файла JSON в неуклюжем нечитаемом формате в вашем браузере, JSON viewer помогает организовать данные JSON в визуально привлекательном формате дерева, который можно просматривать непосредственно в окне браузера.

Это расширение является спасителем для адаптивного кодирования дизайна. Хотя большинство разработчиков удовлетворены функцией изменения размера инструментов Chrome по умолчанию, это расширение Chrome для разработчиков и дизайнеров может имитировать любой размер экрана и разрешение всех популярных устройств, таких как iPhones, iPad и т. д. Это очень полезно для разработчиков, чтобы проверить свои макеты на разных устройствах размера экрана и проверить, работает ли их адаптивное кодирование запросов мультимедиа по назначению или нет.

Еще один из самых полезных расширений Chrome для разработчиков и дизайнеров. Вместо использования обычных стандартных генераторов lorem ipsum для создания текста-заполнителя в ваших веб-макетах, почему бы не попробовать использовать этот интеллектуальный инструмент, который генерирует интеллектуальный текст, а не содержимое тарабарщины. Корпоративное расширение Ipsum-это особый вид генератора lorem ipsum, который создает макет текста бизнес-контента. Это сделает ваши макеты более визуально привлекательными и презентабельными для клиентов.

Google Chrome печально известен во всем мире своим огромным аппетитом к использованию оперативной памяти, а разработчики с более медленными системами постоянно сталкиваются с зависаниями экрана и сбоями при работе с несколькими вкладками. Вот почему эффективное управление вкладками является незаменимым, особенно когда вы теряете след вкладок, которые вы открыли в поисках вдохновения для дизайна или хэширования решения на StackOverflow. Идеальный инструмент для этой гигантской проблемы-это Sessions Buddy! Sessions Buddy является самым мощным расширением Chrome для разработчиков и дизайнеров, чтобы помочь им с управлением вкладками браузера. Он также предлагает менеджер закладок с простым и красивым интерфейсом. Это поможет вам сохранить сеансы и восстановить их позже, когда вы откроете их на лету. Поэтому, избегая беспорядка и сохраняя память свободной. Он позволяет управлять всеми вкладками на одной странице, организовывать их по темам, а также предлагает быстрый поиск для поиска конкретной вкладки. Кроме того, вам не нужно беспокоиться о потере сеанса, если вы случайно закроете окно браузера или ваша система потерпит крах.

Вместо того, чтобы тратить время на поиск свойств CSS элемента в окне инспектора или исходного кода, расширение CSS Viewer извлекает все ценные свойства CSS и показывает их организованным образом внутри плавающего окна. Просто наведите указатель мыши на любой элемент на веб – странице, которую вы хотите проверить, и плавающее окно CSS viewer отобразит все ключевые свойства CSS.

EditThisCookie является самым популярным расширением-менеджером cookie в библиотеке Chrome с более чем 2,7 миллиона пользователей, что делает его бесспорным королем, когда дело доходит до куки. Этот инструмент позволяет добавлять, удалять, искать, редактировать, блокировать и защищать (только для чтения) файлы cookie. Кроме того, вы также можете импортировать файлы cookie в JSON или cookies.форматы txt. Это расширение Chrome является одним из самых полезных расширений Chrome для разработчиков и дизайнеров.

Checkbot-это удостоенное наград расширение позволяет вам одновременно проверять более 250 URL-адресов на сайте, чтобы проверить SEO/скорость веб-сайта/проблемы безопасности, такие как сломанные ссылки, перенаправления, недопустимый HTML/CSS/JS, небезопасная форма пароля, минимизировать файлы, дублировать контент и т. д. Checkbot запускает тесты на основе 50 + лучших методов SEO и безопасности, основанных на рекомендациях от Google, Mozilla и W3C. использование расширения Checkbot поможет вам создать идеально оптимизированные и безопасные веб-сайты, которые убьют рейтинги Google SERP. SERP рейтинг имеет решающее значение для каждого бизнеса в интернете, как разработчик, вы стремитесь обеспечить красивый сайт, но что хорошего было бы, если бы он не имел надлежащего внимания, которого он заслуживает?

Незаменимое расширение для Chrome для разработчиков и дизайнеров, это расширение добавляет панель инструментов с полным набором веб-разработки в браузере. Инструменты, предлагаемые этим расширением, разделены на 10 отдельных вкладок – Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize и Tools.

Эти инструменты включают в себя отключение javascript / плагинов / всплывающих окон / уведомлений, менеджер файлов cookie, средство просмотра и редактирования свойств CSS, манипуляции с формами и изображениями, изменение размера окна, управление кешем, линейку страниц, инспектор свойств и т. д.

Источник: LambdaTest

• #Chrome
• #бесплатно
• #веб разработка
• #инструменты
• #ко
• #расширения

• 
  
• 
  1
• 
  

5 полезных расширений Chrome, которые должен попробовать каждый веб-дизайнер – Сей-Хай

Если вы пользуетесь Google Chrome, то наверняка сталкивались с расширениями для этого браузера. Точнее, с огромным количеством расширений. Выбрать что-то крутое в этом бесконечном списке очень сложно. Конечно, если вам не посоветуют что-то действительно крутое.

Для этого мы здесь. В нашей подборке вы найдете инструменты, которые помогут вам изменить подход к работе! Проверка сайта на юзабилити, определение шрифтов и многое другое – будьте готовы вывести эффективность на новый уровень.

UX Check работает как юзабилити-тест, только без привлечения пользователей. Расширение сравнивает любой участок сайта на основе десяти эвристик юзабилити Нильсена – списка общих принципов создания удобных интерфейсов.

Этот инструмент – идеальное решение для команд, у которых нет времени или денег на тест с пользователями. Более того, вы можете экспортировать результаты в документ, чтобы поделиться им с другими членами команды!

Вы любите копаться в Интернете, находить новые шрифты и детали, а потом использовать их в своем дизайне? Что же, тогда Fontface Ninja – идеальный выбор. Просто наведите курсор на текст – и расширение Chrome покажет вам шрифт, его размер, межстрочный интервал, межбуквенный интервал и даже код цвета.

Кроме того, в открывшемся окне расширения вы можете протестировать шрифт на своем тексте. Если вам понравится шрифт, вы легко можете скачать или купить его.

Page Ruler Redux – это цифровая линейка для веб-дизайнеров и девелоперов. Используйте расширение, чтобы получить точное, до пикселя измерение любого элемента веб-страницы на экране.

Просто протащите линейку через нужный вам нужный раздел – и получите высоту и ширину выбранного элемента. Кроме того, вы можете настроить цвет линейки, чтобы обеспечить достаточный контраст в зависимости от фона веб-сайта!

Это не просто инструмент выбора цвета или пипетка. Кроме определения цветового кода, Color by Fardos обладает другими полезными функциями: определение оттенков цвета, получение рекомендаций по сопряжению цветов на основе теории цвета, а также захват CSS для любого градиента прямо из браузера.

Это великолепное расширение Chrome позволяет изменить размер окна браузера. Казалось бы, зачем это нужно? Но это идеальное решение для того, что бы быстро протестировать адаптивность веб-дизайна.

Благодаря Window Resizer вы можете просматривать макеты в разных разрешениях браузера – и убедиться, что ваш дизайн выглядит первоклассно на всех устройствах. Как видно на изображении выше, в инструменты прописаны несколько вариантов разрешения. Но есть и поле для свободного ввода, что позволяет экспериментировать с вариантами для непопулярных устройств.

Источник: Dribbble

Читайте также:

10 мобильных приложений, которые научат вас кодить

5 подкастов, которые помогут вам начать фриланс-карьеру

10 лучших документалок Netflix для дизайнеров

15 обязательных расширений Chrome для дизайнеров

Работа дизайнера очень интересна и полна творчества. Тем не менее, каждая работа в определенной степени связана с хлопотами и скучным ручным трудом. Чтобы сделать вашу жизнь немного проще, мы перечислили 15 наших любимых расширений Chrome, которые повышают эффективность, расширяют творческие возможности или делают работу более увлекательной. По общему признанию, три инструмента внизу на самом деле не являются расширениями Chrome. Однако они нам настолько понравились, что мы все же включили их в этот список.

1. Colorzilla

Никому не нравятся проблемы с шестнадцатеричным кодом. Вы захотите создать медийную рекламу с теми же фирменными цветами, что и на веб-сайте. Брендбук не всегда под рукой. По крайней мере, для цветов вам не нужно, если у вас установлен Colorzilla. С помощью ColorZilla вы можете получить показания цвета из любой точки вашего браузера, быстро настроить этот цвет и вставить его в другую программу. Он также имеет множество других отличных функций, что делает его наиболее полным доступным средством выбора цвета.

2. Палитра сайта

Если вам нужны все цвета с веб-сайта, тогда вам подойдет палитра сайта. Site Palette генерирует цветовые палитры на основе кодировки веб-сайта. Он также позволяет создавать общие ссылки и загружать автоматически сгенерированные шаблоны Sketch.

3. WhatFont

Вы когда-нибудь пытались выяснить, какой шрифт используется на веб-сайте, который вам действительно нравится? И как часто вы появлялись с пустыми руками? WhatFont распознает шрифт, используемый для любой копии, с которой вы сталкиваетесь в своем браузере, наведя на нее курсор. Довольно полезно, когда вы работаете в агентстве, и ваш клиент забыл название шрифта, который он хочет использовать в своей медийной рекламе…

4. Загрузчик изображений

Если вам когда-либо понадобится массово загружать изображения с веб-страницы, Image Downloader — это расширение для вас. Это особенно полезный инструмент для агентств и издателей, которые создают большой объем медийной рекламы для клиентов малого и среднего бизнеса, не располагающих слишком большими ресурсами. Image Downloader имеет некоторые дополнительные функции, которые позволяют фильтровать изображения на странице по ширине, высоте и URL-адресу или настраивать ширину отображения изображения, столбцы, размер границы и цвет.

5. Pageruler

С помощью Pageruler ваши дизайны будут идеальными. Этот удобный инструмент позволяет рисовать линейку, чтобы получить размеры в пикселях, а также позиционировать и измерять элементы на любой веб-странице.

6. Линейка дизайнеров

Линейка дизайнеров — это простая экранная линейка, позволяющая дизайнерам измерять что-либо в Интернете. Действительно простой, хотя он включает в себя несколько очень полезных опций, таких как раскрывающееся наложение и размер шрифта.

7. Corporate Ipsum

Не уверен, что мы решаем здесь настоящую проблему, но Corporate Ipsum генерирует случайную корпоративную чепуху, которая отличается от обычных текстов lorem ipsum. Что особенно полезно в этом инструменте, так это то, что он генерирует контент-заполнитель по словам или абзацам. Определенная экономия времени!

8. Изменение размера окна

Цифровые дизайнеры хотят знать, подходят ли их проекты для различных разрешений экрана. Window Resizer позволяет вам эмулировать разрешение экрана или браузера, чтобы вы могли тестировать свои проекты в любом из них. Отличный инструмент для окончательной проверки вашего дизайна.

9. Dark Reader 

Это расширение для защиты зрения позволяет создавать темные темы для веб-сайтов в ночном режиме на лету. Dark Reader инвертирует яркие цвета, делая их высококонтрастными и удобными для чтения ночью. Вы можете настроить яркость, контрастность, фильтр сепии, темный режим, настройки шрифта и список игнорирования. Перед установкой отключите подобные расширения.

10. Расширение Pexels для Chrome

Каждый ценит время от времени немного вдохновения. Расширение Pexels для Chrome показывает вам красивую фотографию каждый раз, когда вы открываете новую вкладку браузера. Это расширение заставит вас удивляться пару раз в день. Pexels — один из многих отличных поставщиков стоковых фотографий, который предлагает множество бесплатных материалов.

11. Easy Screen Capture

Этот инструмент для захвата экрана является отличной альтернативой большинству решений, поскольку он часто обновляется и позволяет сохранять скриншоты в формате PNG. PDF-файлы или поделиться ими напрямую. Easy Screen Capture также позволяет вам определить папку по умолчанию для ваших снимков экрана, а расширение предлагает некоторые базовые инструменты редактирования, так что вам не придется открывать, редактировать и сохранять файл.

12. RescueTime для Google Chrome™

Вы заняты весь день, почти все дни недели. Однако к концу недели трудно вспомнить, что именно вы делали. Не говоря уже о конце месяца. Звучит знакомо? RescueTime помогает получить представление о проделанной работе. Например, если вы тратите свое время на создание медийной рекламы для клиентов, вы сможете увидеть, сколько часов вы потратили на какие проекты для каких клиентов.

В основном он используется для соблюдения ограничений рекламных сетей на размер файлов или просто для того, чтобы сделать ваш веб-сайт быстрее и интереснее с лучшим сжатием. Если по какой-либо причине изображения, которые вы хотите использовать для своих медийных объявлений, довольно тяжелые, TinyPNG — это то, что вам нужно.

14. Fontsquirrel

Не все файлы шрифтов очень стабильны в Интернете. По этой причине Bannerwise принимает только файлы шрифтов .ttf. Если у вас нет файла .ttf вашего шрифта, вы можете преобразовать его с помощью генератора веб-шрифтов Fontsquirrel. Обратите внимание, что ваши шрифты должны иметь законное право на веб-встраивание. Это означает, что в определенной степени вы должны владеть авторскими правами на шрифт, который используете.

15. Coolors.co

Если вам нужно немного цветового вдохновения для ваших креативов, Coolors.co поможет вам создать цветовую схему. Coolors.co также создает цветовые схемы на основе изображений и позволяет настраивать и уточнять такие свойства, как температура, оттенок и насыщенность. Coolors.co предлагает удобные форматы экспорта и позволяет хранить все в облаке.

И последнее, но не менее важное: мы хотели бы отметить, что наша платформа, Bannerwise, также является довольно изящным инструментом. Это поможет вам создать красивые персонализированные медийные объявления в один миг.

Ознакомьтесь с некоторыми примерами или узнайте больше, связавшись с нами!

Как включить просмотр линеек в Chrome DevTools?

Задавать вопрос

спросил
4 года 9 месяцев назад

Изменено
3 месяца назад

Просмотрено
111 тысяч раз

Chrome DevTools ранее предлагал параметр для отображения линеек при проверке элементов. У него была пиксельная линейка по бокам представления и граничные линии для каждого элемента, расширяющие полное представление страницы.

Раньше его можно было найти (насколько я помню) в «Настройки DevTools/Общие». Раздела «Общие» больше нет, и я не вижу его в «Настройки/Внешний вид DevTools». Это перенесли или удалили? Я не нахожу документацию или обсуждение этого.

• гугл-хром
• google-chrome-devtools

1

Вы можете включить его в настройках DevTools > «Настройки» в разделе «Элементы».

Обновление:
Большинство из них могут запутаться в том, как его использовать. Чтобы использовать, откройте консоль и наведите указатель мыши на элемент, чтобы просмотреть линейку. Спасибо @Brandito за упоминание в комментарии.

8

1. Нажмите Переключить панель инструментов устройства , которая находится в левом верхнем углу окна DevTools.

2. Щелкните Дополнительные параметры и выберите Показать линейки .

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

5

Нажмите на настройку Chrome, затем:

1. В разделе «Настройки» включите DevTools и включите Ruler.