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

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

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

WhatFont

Учитывая тысячи и даже миллионы сайтов, которые мы просматриваем ежедневно, всегда найдется что-то, что привлечет внимание дизайнера - виджет, динамичная функция или восхитительный шрифт, который вы хотели бы использовать в своем очередном проекте, но понятия не имеете, как он называется. Это та ситуация, когда расширение WhatFont придет на помощь. С ним вы сможете изучить все шрифты на странице и быстро определить их названия, чтобы приступить к их поиску. Кроме того, расширение предоставляет возможность определить относится ли шрифт к категории бесплатных или премиум-шрифтов, а также находится ли он в базе Google Fonts или Typekit.

Font Playground

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

User-Agent Switcher

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

Yslow

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

Web Developer checklist

Работа веб-дизайнера заключается не только в создании красивого дизайна, но и в том, чтобы сделать сайт, который будет идеально функционировать и отвечать всем необходимым параметрам. С расширением Web Developer checklist вы сможете легко и быстро проверить ваши страницы на соответствие SEO, скорость загрузки, видимость и юзабилити. Если в процессе работы вы, к примеру, забыли проставить мета-заголовок, то расширение тут же уведомит вас о данной проблеме. Если же вы хотите более тщательно проверить веб-страницу, то для этого имеется раздел «Больше информации в помощь», который находится в нижней части страницы и предоставляющий более детальный список для проверки.

Responsive Web Design Tester

Все больше пользователей предпочитают выходить в Интернет через свои мобильные устройства, что означает, при создании очередного сайта веб-дизайнер должен уделить особое внимание тому, как он будет выглядеть на этих самых устройствах. А если учитывать, что с каждым годом появляется все больше разных моделей, дизайнерам становится труднее соответствовать им. Однако расширение Responsive Web Design Tester поможет вам справиться с этой задачей значительно быстрее. С его помощью вы сможете протестировать свой дизайн на различных устройствах и расширениях экрана, чтобы убедиться, что он одинаково хорошо выглядит на каждом из них и является действительно отзывчивым.

Instant Wireframe

Есть проекты, которые требуют гораздо больше времени для того, чтобы их усовершенствовать и завершить. Бывают моменты, когда вы просматриваете какие-то сайты и думаете о том, насколько великолепную работу проделали дизайнеры и разработчики, чтобы результат получился именно таким, а сам веб-сайт выглядел идеально и сбалансированно. С расширением Instant Wireframe вы сможете включить каркасный просмотр страницы, что позволит вам подробно изучить страницу (уже опубликованную или локальную), просмотреть ее структуру, а затем возможно реализовать подобное в своих будущих проектах.

PerfectPixel

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

Chrome Palette

Как часто у вас случаются ситуации, когда вы находите идеальное изображение для вашего дизайна, но не уверены в том, какую цветовую схему лучше использовать, чтобы оно гармонично вписалось в дизайн? Стоит отметить, что это частая проблема для многих дизайнеров. Однако с Chrome Palette вы решите данную незадачу в два счета. Расширение создаст для вас 64 цветовые палитры для выбранного изображения, которые вы сможете использовать в качестве вдохновения для вашего проекта.

Page Ruler

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

Успехов в работе и отличных дизайнов!

Есть куча бесплатных расширений Chrome для упрощения вашей жизни – мы выбрали лучшие.

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

Радикально ускорить процессы стилизации элементов с DomFlags - действительно грандиозным расширением, которое позволяет создавать сочетания клавиш для элементов DOM! Это как закладки для навигации по DOM и это изменит способ работы с DevTools.

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

Booom делает Dribbble лучше, показывая больше кадров в списках, добавив к ним кнопки Like и Add to Bucket, а также создавая автозапуск GIF-файлов и делая прокрутку бесконечной.

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

Это блестящее расширение возьмет ваш код и выведет снимки для демо и макетов. Вы также можете добавить темы и эффекты для создания изображений для ваших промо и онлайн-портфолио.

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

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

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

Если вам когда-нибудь придется работать с макетом изображения со встроенным текстом, это расширение может спасти вас от небольшого раздражения. проект Лигроин может спасти вас в мир легкого раздражения. Благодаря искусным трюкам OCR, расширение позволяет выделять, копировать и вставлять текст из любого изображения и даже может перевести его для вас.

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

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

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

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

Этот инструмент позволит вам проверить, если ваши веб-страницы следуют лучшей практике, когда дело доходит до SEO, юзабилити, доступности и производительности (скорость загрузки). Так, например, если у вас отсутствует тег H1 на странице или она без мета-тегов, то расширение уведомляет вас об этом, так что вы сможете быстро устранить эту проблему. Если вы щелкните на ссылку «подробнее и помощь» в нижней части расширения, то найдете более углубленный список.

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

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

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

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

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

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

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

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

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

Один из самых популярных и полезных эмуляторов IE. Он позволяет веб-разработчикам тестировать веб-страницы в различных версиях IE непосредственно в браузере Chrome.

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

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

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

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

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

Как и в случае с предыдущим расширением, в каждой новой вкладке вы будете видеть шедевры от таких великих художников как Ван Гог и Моне. Если вам понравилось изображение, нажмите на него, и вы попадете на веб-сайт Google Cultural Institute, который полон информации о работе и ее создателе.

Итак, ваш последний счет от мобильного провайдера за Интернет был внушительным? Не паникуйте. Вам просто нужно это расширение: оно уменьшает объем данных, используемых при просмотре веб-страниц. При включении Chrome будет использовать серверы Google, чтобы сжимать страницы перед их загрузкой. Есть только один нюанс: не будет включен SSL и режим инкогнито.

Независимо от того, что вы слышали о 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 на клавиатуре. Если вы хотите быстро просмотреть изменения, внесенные на веб-страницу, это дополнение окажется очень полезным.

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

Всем привет! Меня зовут Александр Изора. Я занимаюсь веб-разработкой, кодингом, и я предприниматель.

Мой браузер – мое оружие. Я пользуюсь им ежедневно, и 90% своих задач решаю с его помощью. Моя жизнь не была бы такой гладкой без этих прекрасных расширений. И я с радостью поделюсь ими с вами.

Similar Web

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

Vimium

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

Ключевой особенностью Vimium являются его режимы работы. К примеру, если вы нажмете клавишу ‘f’, то вы включите режим ссылок. Теперь каждая ссылка на странице будет иметь свой собственный ID. Нажатие по этому ID вызовет ссылку. Ниже приведен скриншот работы этого мода. При нажатии на ‘D’ откроется в новой вкладке вкладка ‘About’.

Чертовски быстро!

Но несмотря на это, Vimium не идеален. Некоторые веб-сайты на AJAX не работают с данным расширением. Однако еще слишком много, чтобы откладывать свою мышку.

Grammarly

Grammarly убедится, что ваши сообщения, документы и посты в социальных сетях абсолютно понятны, в них отсутствуют ошибки и они убедительны. Расширение имеет понятный UI и UX.

Мне также нравится, что Grammarly вдохновляет людей на покупку pro-версии этого расширения. Вы должны заплатить, чтобы решать сложные задачи. Отлично!

Image Size Info

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

Так как Chrome не настолько гик-ориентированный браузер как FireFox, то нам необходимо данное небольшое расширение.

Google Analytics Debugger

Отображает полезную информацию в JavaScript консоли. Я пользуюсь этим расширением, когда мне необходимо отлаживать кастомные события от Google Analytics.

Tabstop

Tabstop предотвращает загрузку вкладок при запуске Chrome. Для загрузки заблокированной вкладки просо нажмите на нее, и страница автоматически перезагрузится.

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

Session Buddy

Session Buddy это расширение, которое должны быть у каждого, кто не хочет просто закрывать все вкладки. Данное расширение позволяет сохранять сессии, просто назовите сессию как вам нужно и в дальнейшем просто найдите её по этому имени. Вещь из разряда «Must have»!

Octotree

Это расширение показывает древовидную структуру репозитория на GitHub и GitLab. Намного проще перемещаться по репозиторию если его структура представлена в виде дерева.

Ratings Preview for YouTube™

Еще одно расширение из разряда: «Почему они не сделали это сами?!». Оно показывает небольшой рейтинг-бар под каждой миниатюрой к видео. С этим расширением вы заранее будете знать хорошее это видео или нет.

The Great Suspender

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

Papier

Лично мне необходимо просто ну очень много места, куда я смогу складывать свои мысли. Evernote для структурированных данных, Telegram для всех мыслей, которые приходят на ходу, Notion для взаимодействий, стикеры, и просто белая доска для работы маркерами. Данное расширение является еще одним местом куда я складываю свои мысли. Papier – это простой текстовый редактор, который открывается, когда вы открываете новую вкладку.

Fontface Ninja

Никогда не задавались вопросом: «Какой шрифт используется на этом сайте?». Если у вас возникал такой вопрос, то тогда вам понравится данное расширение.

Marmoset

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

Прекрасно подходит для тех, кто часто пишет обучающие статьи.

Lighthouse

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

Заключение

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

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

Расширений множество, их предельно просто установить. Все что вам нужно — просто зайти в Chrome Web Store и нажать кнопку install. Всё. Приложение автоматически окажется в вашем браузере.

Но сегодня мы хотим рассказать о расширениях, которые пригодятся веб-дизайнеру.

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

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

CSS-Shack — расширение, которое позволяет вам создать стили слоя и экспортировать их в отдельные CSS/файлы. Принцип работы как в графических редакторах.

CSS Shapes Editor
CSS shapes editor — расширение для редактирования в реальном времени объектов CSS. Этот редактор прост в использовании и пригодится вам в работе.

Web Developer Checklist
Это расширение нужно каждому веб-дизайнеру. Web developer checklist проверяет любую страницу на наличие ошибок.

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

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

Responsive Web Design Tester
Responsive web design tester — простое расширение для Сhrome, которое проверяет является ли ваш сайт полностью адаптивным.

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

Instant Wireframe
При помощи этого расширения вы можете просмотреть макет в виде таблицы любой интересующей вас страницы.

SnappySnippet — расширение, которое извлекает CSS & HTML из выбранного DOM-элемента. Это позволит вам высылать код на CodePen, jsFiddle или JS Bin одним кликом.

CSS3 Generator
CSS3 generator автоматически генерирует нужный вам код CSS. Это удобный инструмент для всех веб-дизайнеров.

WordPress Style Editor
WordPress style editor позволяет исследовать таблицу стилей вашего WordPress и сделать исправления прямо в CSS. Вы можете вносить изменения в таблицу стилей без FTP-программ.

Perfmap — полезное расширение, которое создаст тепловую карту вашего сайта, проверяя элементы по необходимому времени загрузки в браузере.

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

ColorZilla
ColorZilla добавляет в ваш браузер инструменты по работе с цветом. У вас появится пипетка, цветоподборщик, палитра и генератор градиента.