What the font расширение для браузера

20 лучших расширений Google Chrome для веб-дизайнеров

Существует огромное количество бесплатных расширений для браузера Google Chrome, которые помогают сделать вашу жизнь проще. Вот 20 из лучших.

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

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

Хотите узнать об этом больше? Ознакомьтесь с нашим списком.

01. iMacros для Chrome

Расширение iMacros для Chrome позволяет записывать действия и сохранять их.

После этого вы можете проверять свои страницы снова и снова, повторяя действия одним нажатием кнопки. Это экономит ценное время и позволит вам сконцентрироваться на более важных вопросах.

02. Font Playground

Font Playground позволяет экспериментировать с локальными шрифтами на активных веб-страницах.

Каждый дизайнер и разработчик найдет для себя много полезного в этом расширении. Font Playground позволяет экспериментировать с локальными шрифтами и всеми библиотеками шрифтов Google на активных веб-страницах, при этом, не внося никаких изменений в сами страницы.

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

03. What Font

Какой шрифт они используют? Расширение Chrome What Font может вам это показать!

Очень полезное расширение для Google Chrome, What Font позволяет разработчикам и дизайнерам определить, какие шрифты используются на веб-странице.

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

04. Yslow

YSlow подскажет вам, что замедляет показ страницы.

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

05. Web Developer

Расширение Chrome Web Developer предоставляет ряд полезных инструментов для девелоперов.

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

06. Web Developer checklist

В нем исправлены проблемы с быстродействием в этом удобном инструменте Chrome.

Этот инструмент позволяет проверить все: соответствуют ли ваши страницы SEO, юзабилити, а также их видимость и производительность (скорость загрузки страницы).

Так что, если, например, вы упустили тэг H1 или если у страницы отсутствует мета-заголовок или мета-описание, расширение Web Developer checklist уведомляет вас об этом.

Чтобы вы могли быстро решить данную проблему. Если вы нажмете ссылку « больше информации и помощь » в нижней части расширения, вы найдете более детальный перечень.

07. DevTools Autosave

Автоматически сохраняет изменения в исходных файлах страницы(CSS и JS).

08. Instant Wireframe

Позволяет просматривать каркас веб-страниц.

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

09. Ripple Emulator

Ripple Emulator помогает проводить отладку веб-страниц, DOM-инспектирование и автоматическое тестирование.

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

Расширение Ripple Emulator может быть использовано в сочетании с существующими средствами разработки для отладки, DOM-инспектирования и автоматического тестирования.

10. Streak

Отслеживание диалогов по электронной почте в одном тикете, назначение задач.

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

11. Search Stackoverflow

Получите быстрые ответы на ваши вопросы с помощью этого обязательного к использованию расширения.

12. PHP Ninja Manual

Вся документация по PHP 5.5, в вашем браузере.

Вам всю документации по PHP 5.5 с конкретными примерами на восьми языках в вашем браузере.

13. PerfectPixel

Это расширение поможет вам обеспечить соответствие каждого пикселя вашего сайта дизайну.

Дизайнеры ненавидят ситуации, когда они создают потрясающий дизайн, но в результате после его перевода в код, что-то не совпадает с первоначальным дизайном. Процессор Perfect Pixel действительно идеальное расширение для веб-разработчиков, которые стремятся создавать сайты, точно соответствующие дизайну.

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

14. Code Cola

Позволяет редактировать CSS веб-страницы на месте.

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

15. Chrome Sniffer

Инспектирование веб-приложений и библиотек JavaScript.

16. User Agent Switcher

Проверьте, как выглядит ваш сайт на различных устройствах.

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

17. IE tab

Тестирование веб-страниц для различных версий IE.

18. PicMonkey

Захват любого изображения с веб-страницы одним нажатием кнопки.

Это простой в использовании бесплатный редактор фото, который позволяет редактировать страницы изображений и скриншотов. Но не в этом его наибольшая полезность.

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

19. Chrome Daltonize

Создание изображений оптимизированных под людей, имеющих проблемы, связанные с распознаванием цветов.

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

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

20. Page ruler

Добавьте линейку на любую страницу с помощью Page ruler.

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

Сергей Бензенко автор-переводчик статьи « The 20 best Google Chrome extensions for web designers »

Как я могу узнать, какие шрифты использует сайт?

Как я могу узнать, какой шрифт или шрифты использует веб-сайт? Существуют ли какие-либо инструменты или расширения для браузера, которые могут облегчить работу?

Вариант 1: использовать расширение для браузера (Easy)

Такие расширения, как WhatFont (доступны для Chrome, Firefox и Safari), позволяют довольно легко обнаруживать семейства шрифтов любого текста на веб-странице. Вам просто нужно установить расширение, активировать его на сайте и нажать на элемент, который вы хотите проверить. Результаты отображаются во всплывающем окне, всегда в выбранном вами контексте.

Вариант 2. Проверка CSS с помощью инспекторов браузера (Дополнительно)

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

Все стили на странице перечислены на вкладке « Стиль », но если вместо этого вы используете вкладку « Вычисленные », вы можете найти свойства, которые активно применяются к выбранному элементу, включая, конечно, семейство шрифтов.

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