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

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

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

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

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

01. iMacros для Chrome

Расширение 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 подскажет вам, что замедляет показ страницы.

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

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

05. Web Developer

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

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

Это официальная версия расширения Web Developer , разработанного для Firefox .

06. Web Developer checklist

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

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

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

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

07. DevTools Autosave

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

Настоящий клад для всех разработчиков, DevTools Autosave позволяет автоматически сохранять любые изменения, внесенные в CSS- и JS-исходные файлы страницы через среду Chrome Dev Tools . Расширение легко в настройке и использовании, оно сэкономит вам много времени.

08. Instant Wireframe

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

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

09. Ripple Emulator

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

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

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

10. Streak

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

Streak является основным инструментом CRM и поддержки электронной почты Gmail .

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

11. Search Stackoverflow

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

Если вы веб-разработчик, то должны были слышать о Stack Overflow , месте, куда обращаются многие разработчики с разными вопросами, связанными с развитием веб-проектов. Если нет, то вам обязательно нужно познакомиться с ним. Это действительно развитое сообщество, которое охватывает широкий круг вопросов: от C # и Java до PHP и JQuery .

Это фантастическое расширение добавляет окно поиска прямо в ваш браузер и позволяет вам использовать огромные ресурсы Stack Overflow . Обязательное для использования расширение!

12. PHP Ninja Manual

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

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

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

13. PerfectPixel

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

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

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

14. Code Cola

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

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

15. Chrome Sniffer

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

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

16. User Agent Switcher

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

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

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

Вот несколько полезных расширений для Google Chrome.

Расширение Web Developer

Хочу отметить самый удобный и мощный инструмент для веб-разработчика и веб-дизайнера - расширение Web Developer для Google Chrome.

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

Расширение имеет большое количество опций.

Например, многим надо просто узнать цвет элемента на экране монитора в шестнадцатиричном формате. Для этого в плагине есть специальная функция. В разделе Miscellaneous выбрать пункт Display Color Picker .

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



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

Черт, у Firefox даже есть специальная версия браузера, созданного только для веб-разработчиков. Вот насколько сильно Mozilla заботится о веб-дизайнерах и разработчиках.

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

Установите, протестируйте и используйте большинство из этих расширений. В конце концов, все они бесплатны для использования!

  • Что делает: Инспектирует веб-страницы

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

  • Подходит: веб-разработчикам
  • Что делает: клиент для Firefox

FireFTP - это FTP/SFTP-клиент для Firefox, который позволяет вам безопасно загружать и передавать файлы между вашим компьютером и сервером непосредственно из вашего браузера. Благодаря этому дополнению вам никогда больше не придется прыгать между браузером и клиентскими приложениями FTP.

  • Подходит: веб-разработчикам и дизайнерам
  • Что делает: анализ и проверка веб-страниц

Это своеобразное расширение «все в одном», которое добавляет в ваш Firefox ряд полезных инструментов. Некоторые из инструментов, включенные в этот аддон - отображение и редактирование таблиц стилей CSS, отключение стилей, инструменты отладки и т. д.

  • Что делает: инструмент для анализа цвета

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

  • Подходит: веб-разработчикам
  • Что делает: изменение веб-сайтов с настраиваемым кодом

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

  • Подходит: дизайнерам интерфейсов
  • Что делает: регулирует смещение веб-элементов

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

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

  • Подходит: веб-дизайнерам
  • Что делает: загружает все с веб-страницы

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

  • Подходит: дизайнерам интерфейсов
  • Что делает: проверяйте веб-страницы в Internet Explorer

Хотите - верьте, хотите - нет, но есть люди, которые все еще используют старые версии Internet Explorer для выхода в Интернет. Создание сайтов, хорошо работающих в этих старых браузерах, является одной из проблем, с которой веб-дизайнеры по-прежнему борются. Этот плагин упрощает настройку веб-дизайна для более старых браузеров Internet Explorer, создавая новую вкладку в IE.

  • Подходит: веб-дизайнерам и разработчикам
  • Что делает: показывает о технологии, используемые на веб-сайте

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

  • Подходит: веб-разработчикам
  • Что делает: включает или выключает Java

Это дополнение позволяет вам легко включать или отключать Java в вашем браузере. Он также может отключить на веб-странице Javascript, Cookies, анимированные изображения, Flash и другое. Это полезный плагин не только для разработчиков, но и для обычных пользователей, чтобы повысить безопасность браузера и снизить пропускную способность.

  • Подходит: дизайнерам интерфейсов
  • Что делает: Измеряет элементы в пикселях

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

  • Подходит: веб-дизайнерам
  • Что делает: переключает язык в браузере

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

  • Подходит: дизайнерам интерфейсов
  • Что он делает: генерирует фиктивный текст

Создание фиктивного текста для ваших новых макетов и прототипов веб-сайта - это скучная задача, которая вряд ли способна развлечь хотя бы одного дизайнера. Это расширение сделает этот процесс менее скучным, позволяя вам создавать фиктивный текст «Lorem Ipsum» прямо из Firefox.

  • Подходит: веб-разработчикам
  • Что делает: редактирует и создает cookie

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

  • Подходит: дизайнерам интерфейсов
  • Что делает: выбирает цвета на веб-странице

Простой в использовании инструмент, который позволяет вам выбирать цвета любого пикселя на веб-странице и легко копировать цветовой код RGB или Hex для использования в ваших собственных проектах. Красота и визуальный интерфейс этого инструмента значительно облегчают новичкам изучение цветов на веб-страницах.

  • Подходит: веб-дизайнерам и разработчикам
  • Что делает: дает информацию о программном обеспечении, используемым веб-сайтом

Подобно дополнению BuiltWith, Wappalyzer – это еще одно полезное расширение, которое позволяет вам узнать, какое программное обеспечение используется на веб-сайте. Например, вы можете узнать, какой тип CMS использует сайт, какую операционную систему поддерживает сервер веб-сайта и многое другое.

  • Подходит: веб-разработчикам
  • Что делает: изменяет пользовательский агент браузера

Хотите узнать, как будет выглядеть ваш сайт на разных платформах и операционных системах? Тогда это инструмент, который пригодится вам точно пригодится. User-Agent Switcher позволяет переключаться между различными платформами, такими как Android, Mac, Windows, и выбирать операционные системы для изменения пользовательского агента вашего браузера.

  • Подходит: веб-дизайнерам и разработчикам
  • Что делает: показывает пример использования вкладки памяти браузера

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

  • Подходит: веб-дизайнерам и графическим дизайнерам
  • Что делает: открывает изображения в Photoshop

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

  • Подходит: дизайнерам интерфейсов
  • Что делает: улучшает таблицы HTML

Графики, статистика, сравнения, таблицы - это дополнение может сделать все. Вы можете использовать этот инструмент для создания удобных и красивых HTML-таблиц и схем.

  • Подходит: веб-разработчикам
  • Что делает: клиент SSH для Firefox

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

  • Подходит: дизайнерам интерфейсов
  • Что делает: автоматически обновляет веб-страницы

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

  • Подходит: дизайнерам интерфейсов
  • Что делает: изменяет размер окон Firefox для конкретных разрешений экрана

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

  • Подходит: веб-дизайнерам и разработчикам
  • Что делает: находит информацию о шрифтах страницы и ее элементов

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

  • Подходит: дизайнерам интерфейсов
  • Что делает: проверяет веб-страницы в различных браузерах

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

  • Подходит: веб-дизайнерам и разработчикам
  • Что делает: очищает кэш браузера

Это дополнение моментально очищает кэш браузера Firefox (RAM и DISK), чтобы сократить использование ресурсов компьютера. Расширение позволяет очистить кэш, просто нажав на кнопку или нажав клавишу F9 на клавиатуре. Если вы хотите быстро просмотреть изменения, внесенные на веб-страницу, это дополнение окажется очень полезным.

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

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

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

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

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

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

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

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

Необходимый для всех веб-разработчиков, Speed Tracer помогает выявлять и устранять проблемы, связанные с производительностью веб-сайта и приложений. Speed Tracer распознает проблемы, вызванные в процессе выполнения JavaScript, Layout, обратных запросов XML http, перерасчета стиля CSS и многое другое.

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

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

Очень важный инструмент для веб- и SEO-разработчиков, Alexa Traffic Rank включает вас в панель трафика Alexa и дает детальное представление о всех сайтах, которые вы посещаете, не прерывая просмотра.

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

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

С момента своего появления отличился хорошей скоростью работы, простотой и удобством, чем с первых дней завоевал массу поклонников. В то же время, на Хром обрушилось много «критики» от людей которые привыкли к удобным плагинам на Firefox — плагины были одним из факторов, которые не позволяли использовать Google Chrome в качестве привычного рабочего инструмента. В их числе были веб-дизайнеры, веб-мастера, разработчики и др.

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

Web Developer

Web Developer - это не один, а целый набор инструментов для дизайнера и веб-разработчика. С помощью этого расширения вы можете получить информацию о том или ином элементе страницы, стилях, изображения и прочее. Лично я использую Web Developer но только под Firefox, чаще всего с его помощью просматриваю страницы в размере 1024*768 для корректного отображения в меньших мониторах, тестирую и правлю CSS на лету, использую для валидации, можно удалить Cookies и еще много чего.

Firebug Lite

Firebug Lite - облегченная версия популярного плагина Firebug (известного так же на Firefox). Расширение представляет из себя инспектор элементов и удобный инструмент отладки. В Lite-версии отсутствует Net-панель и JavaScript debugger. Для опытных разработчиков, думаю, нет смысла рассказать в чем преимущества Firebug.

CSSViewer

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

Window Resizer

Window Resizer позволяет вам посмотреть как ваша страница будет выглядеть при различных разрешениях экрана. Имеется предустановленные форматы мониторов, ноутбуков и мобильных устройств, что выгодно отличает это расширение Google Chrome от того же Web Developer, где (насколько я знаю в Firefox) нужно самому создавать размеры для проверки.

HTML Validator

Согласитесь, каждый раз заходить на сайта W3C чтобы проверить валидность кода не очень удобно? Расширение HTML Validator делает процесс удобным и практически молниеносным. В одной из прошлый статей Tod’s Blog я рассматривал вопрос валидности HTML в том числе с использованием noindex. После обсуждений пришел к выводу, что она хоть и не является обязательным на 100% условием успешного сайта, но поможет выявить ошибки верстки, которые (по возможности) лучше всего исправить. Кстати, если сравнивать с тем же Web Developer, при валидации в нем вас перебрасывает на сайт W3C где можно посмотреть ошибки, но нет просмотра в текущем окне как это показано для Google Chrome на картинке выше.

PHP Consol

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

ColorPicker

ColorPicker - это «пипетка» для Google Chrome. С помощью этого расширения вы можете определить значение цвета в любой области страницы. Основные особенности плагина:

  • — Регулируемая область пипетки - от 1 до 101 пикселя (вы можете определить значение цвета определенного пикселя или области);
  • — Проверка на совместимость (соответствие) с WCAG 2.

Одним словом — архиважный и очень удобный инструмент для дизайнера.

Chrome Palette

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

Font Editor

Расширение Font Editor позволит вам посмотреть как будут выглядеть те или иные шрифты (включая гарнитуру, начертание, размер шрифта и прочее) на любом сайте:

Chrome Page Extended

Chrome Page Extended нельзя назвать чисто «дизайнерским» плагином, зато он поможет вам управлять (в том числе и с помощью горячих клавиш) всеми имеющимися (установленными) расширениями. Надеюсь эти 10 расширений для Google Chrome повысят вашу производительности и эффективность в этом, безусловно, очень перспективном браузере! И если раньше одним из немногих останавливающих факторов от его использования был недостаток расширений Google Chrome, то сегодня этой преграды нет.

P.S. Если вы новичок в интернете и пока еще не знаете как создать свой блог можете попробовать бесплатный и полезный видеокурс по вордпресс.
Компания СпецСервис Логистика поможет с сертифицировать продукцию для которой держспоживстандарт требует наличие специальных сертификатов.
Хотите установить интересный статус посмотрите готовые статусы о любви в контакте которые можно использовать для своих персональных страниц соц.сети.