Современные веб-браузеры чрезвычайно универсальны, во многом благодаря широкому спектру сторонних расширений, которые можно использовать для добавления дополнительных функций и возможностей.
Однако расширения предназначены не только для лучшего опыта просмотра конечного пользователя. Дизайнеры и разработчики так же имеют доступ к широкому диапазону расширений для всего, что они могут захотеть сделать.
В этой статье мы рассмотрим небольшую часть некоторых наиболее важных расширений, которые вам нужны, и которые действительно могут реально изменить ситуацию. Скорее всего, вы будете разрабатывать в основном с Chrome или Firefox, поэтому мы сосредоточимся на расширениях, поддерживающих один или оба этих браузера.
01. Lighthouse
Насколько хорошее качество у вашего сайта или веб-приложения? Этот бесплатный инструмент Google расскажет вам о производительности, доступности и лучших практиках. Lighthouse проводит аудит любого URL-адреса, который вы ему даете, и генерирует отчет, в котором объясняется, почему каждый аудит важен, и что вы можете сделать для улучшения любых аспектов, которые не работают. Помимо производительности и доступности, он может проводить аудит на предмет SEO и передовых рекомендаций в области веб-приложений. Вы можете запустить его из Chrome DevTools, из командной строки как модуль Node.
02. Stylus
Если вам не нравится внешний вид конкретного веб-сайта, просто измените его дизайн с помощью Stylus. Это расширение для браузера Chrome и Firefox позволяет устанавливать темы и скины для многих популярных сайтов, а также создавать, редактировать и управлять собственными персонализированными таблицами стилей CSS. Stylus поддерживает установки из популярных онлайн-хранилищ, имеет функцию резервного копирования вашей базы данных установленных стилей и содержит настраиваемый пользовательский интерфейс, включающий тематику, дополнительные макеты, выбор цвета иконок и значков, а также множество других настроек.
03. Web Developer
Разработанный первоначально для Firefox и перенесенный в Chrome (и Opera, если на то пошло), Web Developer является своего рода швейцарским армейским ножом среди расширений для разработчиков, и оно аккуратно дополняет встроенные инструменты разработчика в обоих браузерах.
Расширение добавляет панель инструментов с множеством полезных функций, включая возможность подробно изучать структуру страницы, управлять куки и создавать контент, включать или отключать различные вещи, такие как JavaScript и кеширование, плюс стили CSS и многое другое. Оно также может проверять общие проблемы со страницами, такие как разбитые изображения или нестандартный код.
Одним из особенно полезных элементов является инспектор стиля CSS; это позволяет вам при наведении на любой элемент на странице увидеть стили, применяемые к нему, что поможет быстро разгадать таинственное поведение стиля.
Это расширение действительно вам необходимо.
04. DevTools Autosave
Это расширение немного неудобное в настройке, но оно действительно полезно, когда вы его запускаете в работу. Вы можете внести изменения в Chrome DevTools и сразу увидеть, как они отражаются на странице. Тем не менее, расширение позволяет автоматически сохранять изменения в исходных файлах по мере их создания. Это может быть особенно полезно для CSS-настроек.
В дополнение к установке самого расширения вам необходимо установить и запустить сервер. Инструкции о том, как это сделать, доступны на сайте GitHub, который связан со страницей в магазине Chrome. Как только вы получили все настройки, оно может поддержать любую локальную файловую систему или серверную разработку.
05. IE Tab
По-прежнему существует значительное число людей, использующих Internet Explorer, и в то время как в наши дни Microsoft хорошо взаимодействует с сообществом веб-стандартов, в прошлом, было бы справедливо сказать, что существовало некоторое отклонение от нормы, когда дело дошло до подхода, которым IE отображает страницы.
Если вы хотите проверить свою работу в IE, то IE Tab предоставляет простой способ сделать это. Вы также можете выбрать стандарты, которые хотите визуализировать. Это означает, что вы можете протестировать обратную совместимость с IE7, который на удивление все еще может использоваться в некоторых компаниях вот уже 11 лет.
В прошлом IE Tab также был доступен для Firefox. Однако он не поддерживается в последней версии Firefox, и неясно, получит ли он обновление.
06. HTML Validator
Это так легко для ошибок проникнуть в HTML, и существует ряд доступных онлайн-инструментов, которые могут проверять содержимое вашей страницы. Но если вы обнаружите, что они немного сложные или занимают много времени, то это может быть расширением для вас.
Добавленная кнопка запускает исходный вид текущей страницы, выделяя и перечисляя любые ошибки или предупреждения HTML. Это особенно полезно для поимки таких мелочей, как пропущенные теги, устаревшие функции и общий плохой опыт. Вы также можете выбирать между алгоритмами проверки в соответствии с вашими потребностями.
Даже если вы опытный веб-разработчик, может быть полезным запустить ваш HTML на проверку, так как вещи всегда могут проскользнуть через сеть. Конечно, прохождение проверки не является гарантией хорошего HTML, но это помогает!
07. User-Agent Switcher
Это склонно вызывать некоторые споры. В идеальном мире ваши страницы не должны проверяться для агента пользователя (причудливый способ сказать версию браузера, операционную систему и движок). Лучше использовать функцию обнаружения (то есть проверять, поддерживает ли браузер пользователя функцию HTML «X»?).
Тем не менее, независимо от того, унаследовали ли вы какой-либо существующий код или имеете законную необходимость проверять агент пользователя в своем собственном коде, это расширение обеспечивает быстрый и простой способ переключения между ними без необходимости загрузки другого браузера или включения другого устройства.
08. Google PageSpeed Insights
Стоит потратить некоторое время на оптимизацию производительности вашей страницы, так как это может сделать едва различимое, но существенное различие в том, как она будет воспринята пользователями.
Возможно, вы уже знакомы с программой PageSpeed Insights, онлайн-службой от Google, которая будет оценивать производительность вашего сайта, и составлять набор очень полезных рекомендаций о том, как оптимизировать его. PageSpeed Insights также выделит шаги в оптимизации, которые вы уже сделали (иногда непреднамеренно!).
Это действительно удобное расширение, которое предоставляет ссылку на страницу PageSpeed Insights, чтобы вы могли протестировать свою страницу одним щелчком мыши. Это та же услуга, которую вы получаете онлайн, но без необходимости открывать новую вкладку и переходить к ней. Само расширение также обеспечивает оценку производительности до того, как вы перейдете по ссылке, но на самом деле это полезная ссылка для подробного анализа.
09. BuiltWith Technology Profiler
Вы когда-нибудь задавались вопросом «Как они это сделали?», просматривая сайт в Интернете? Существует множество причин, по которым может быть полезно понять технологии и стандарты, используемые веб-сайтами, когда вы их посещаете. Расширение BuiltWith дает вам возможность в один клик увидеть все, что находится под «капотом» просматриваемой страницы.
Инструмент даст вам представление об используемых библиотеках JavaScript, платформах аналитики, веб-стандартах, инфраструктурах и т.д. Вся информация предоставляется очень удобно читаемым образом, с прямыми объяснениями для чего каждая технология или стандарт предназначены, чтобы вам не пришлось изучать их на стороне.
Взгляд на то, что некоторые из самых популярных и современных сайтов используют, может стать отличным источником вдохновения, поскольку вы стараетесь идти в ногу с постоянно меняющимися стандартами.
10. SEOquake
Вполне вероятно, SEO станет одним из важных факторов для вас при разработке сайта, и есть множество доступных инструментов, которые помогут вам максимизировать ваши шансы. SEOquake — один из множества таких инструментов. Расширение предоставляет очень подробную разбивку статистики трафика и ранжирования статистических данных.
Также полезная функция, даже для небольших сайтов — это возможность открыть собственную онлайн-диагностическую службу SEOquake, которая предоставит ряд полезных рекомендаций, чтобы обеспечить, что ваша страница будет найдена. Оно также будет изучать внутренние и внешние ссылки, и сравнивать домены и URL-адреса.
По умолчанию расширение накладывает информацию SEO на результаты поисковой системы. Тем не менее, расширение очень настраиваемое, поэтому, если это вас беспокоит, вы можете отключить функцию в настройках.
11. Emmet Re:view
Отзывчивый дизайн, вероятно, всегда находится на первом плане, когда вы работаете, но тестирование не всегда является самым легким этапом развития. Это может оказаться реальной проблемой, попытка увидеть сайт в действии на множестве экранов и устройств, на которых сайт может быть просмотрен.
К счастью, Emmet Re: view дает вам возможность быстро проверять вашу страницу на нескольких размерах экрана рядом друг с другом. Вы можете выбрать между «просмотром точек прерывания», который отображает представление для каждой точки CSS на странице и «стеной устройств», которая имитирует популярные мобильные и планшетные устройства. Стена устройства конфигурируется, и в ней имеется большой список устройств, доступных для имитации.
Что особенно приятно, так это то, что вы можете продолжать взаимодействовать со страницами, пока они отображаются в Emmet Re:view. Это дает вам возможность проверять форму отправки, нажатия кнопок и многое другое, и увидеть результат в нескольких обзорах.
12. PerfectPixel
PerfectPixel позволяет вам накладывать статическую картинку на веб-страницу в браузере с определенной степенью прозрачности, чтобы основная страница отображалась под низом. Также возможно добавить несколько наложений, если это необходимо.
Это может быть полезно на этапе разработки, так как расширение позволяет точно сопоставить реализацию с вайрфреймом или шаблоном, даже единственное отклонение пикселя станет очевидным, отсюда и такое название. Расширение также может быть особенно полезно для командных проектов, когда между дизайнером и разработчиком происходит передача файлов.
После добавления наложения расширение может масштабировать и перемещать его. Поскольку это только статическое изображение, оно, конечно, не будет реагировать на изменения размера экрана, поэтому вы можете использовать несколько накладок для тестирования адаптивных дизайнов.
13. FireShot
Доступный для широкого круга браузеров, несмотря на имя, FireShot выполняет одну очень простую функцию — он позволяет делать полностраничные скриншоты веб-страниц без каких-либо проблемных прокруток, обрезки или попытки сшить различные куски скриншота с помощью Photoshop.
В какой-то момент вам наверняка потребуется или уже требовалось сделать это, и почти странно, что не было простого способа для решения данной проблемы. И хотя это чрезвычайно простое расширение, есть определенная гибкость — вы можете выбрать, следует ли захватывать всю страницу, только видимую часть или просто выбранный вами участок.
После того, как изображение будет захвачено, вы можете выбрать, сохранять ли его как обычное изображение или в формате PDF, вы также можете отправить его по электронной почте, скопировать в буфер обмена или даже напечатать. FireShot — отличный пример простого расширения, делающего то, что он должен делать очень хорошо.
14. Code Cola
Code Cola предлагает очень интуитивно понятный интерфейс для изменения стиля страницы в браузере. Вы можете выбрать любой элемент на странице и настроить стиль, применяемый к нему, например, перетащив ползунок для непрозрачности или выбрав шрифт из раскрывающегося списка.
Инструмент очень мощный, но в то же время предлагает гораздо лучшую читабельность, чем DevTools. По сути, это позволяет вам использовать подход WYSIWYG к стилю, который, если честно, может быть очень полезным с CSS. Когда вы играете со стилями, чтобы увидеть, что работает визуально, расширение также дает вам возможность копировать изменения кода, чтобы вы могли модифицировать их в свой CSS.
В качестве альтернативы для дополнительной мощности вы можете объединить его с DevSools Autosave и автоматически сохранить изменения в исходных файлах. Только будьте осторожны, и не увлекаетесь экспериментированием!
15. iMacros
Расширение для браузера iMacros является бесплатным, урезанным для коммерческого продукта, но, тем не менее, предлагает некоторые ценные функции. Как и следовало ожидать от названия, iMacros позволяет записывать и воспроизводить макросы (скриптовые взаимодействия) в браузере. Это очень легко сделать: просто нажмите «Запись», а затем взаимодействуйте с сайтом, как обычно. Когда вы воспроизводите макрос, он будет выполнять те же действия, что и в случае подключения.
Хотя инструмент будет полезен для выполнения повторяющихся задач, реальной силой для разработчиков является инструмент тестирования. Он позволяет вам очень быстро и интуитивно настраивать автоматические тесты, которые вы можете запускать каждый раз, когда вы вносите изменения. Это может сэкономить огромные усилия при регрессионном тестировании страниц вручную без необходимости разработки полноценного набора тестов автоматизации с использованием чего-то вроде Selenium.
16. Check My Links
Check My Links просканирует каждую ссылку, как внутреннюю, так и внешнюю, на вашей странице и проверит, работает ли она. Он генерирует отчет по мере его появления, показывая результат, а цветные коды — хорошие и плохие ссылки на странице. Это особенно полезно, если у вас есть сайт с большим количеством ссылок на внешний контент, так как может быть очень сложно узнать, битые ли они, не нажимая на каждую.
Существует ряд параметров конфигурации, доступных для изменения типа HTTP-запроса, управления использованием кеширования и т.д. Стоит отметить, что существует ряд подобных расширений, которые предлагают аналогичные функциональные возможности для Firefox.
17. UX Check
Пользовательский опыт всегда должен стоять на первом плане. Не существует замены тестирования с реальными пользователями, но также может быть полезным провести экспертную «эвристическую» оценку UX на вашем сайте. Расширение UX Check предназначено для того, чтобы сделать эту задачу простой.
С помощью UX Check UX-дизайнер или тестировщик может добавлять аннотации к сайту, выделяя проблемы UX, а затем упаковывать эти аннотации вместе со скриншотами (которые делаются автоматически) для отправки дизайнеру или разработчику, работающим над сайтом. Это позволяет избежать длительного процесса сшивания вместе скриншотов и комментариев.
Расширение UX Check поддерживает классификацию обратной связи по десяти различным категориям на основе «10 эвристик дизайна пользовательского интерфейса» известного практикующего UX-специалиста Якоба Нильсена, хотя вы можете настроить эти категории на свое усмотрение, если хотите.
18. JSONView
Если вы работаете с HTTP-запросами, возвращающими данные в формате JSON, как многие разработчики делают в эти дни, то вы можете быть разочарованы отсутствием форматирования и подсветки синтаксиса, когда Chrome и Firefox представляют JSON вам. К счастью, JSONView приходит на помощь. После установки расширение будет применять подсветку стилей и синтаксиса к вашему документу JSON, а также добавит контекстное меню для захвата отдельных значений. Это улучшает читаемость и может значительно облегчить поиск данных, которые вы ищете, или даже ошибки.
Вы также можете настроить форматирование со встроенным редактором стилей, который использует CSS для определения применяемых цветов и форматирования.
Если вы когда-либо работали с JSON в браузере, то нет никакой веской причины не устанавливать данное расширение или любое другое из нескольких подобных расширений.
19. ColorZilla
ColorZilla чрезвычайно популярен, и у него миллионы пользователей по значимой причине. Все очень просто, расширение дает вам массу информации о цветах, используемых на странице, что может быть полезно, если вы черпаете вдохновение с другого сайта, который вы видели, или выбираете свой собственный цвет из палитры.
Расширение включает в себя не только хорошо продуманный инструмент «пипетку», но также возможность анализировать и выделять все цвета, используемые на странице, а еще набор цветовых палитр широко используемых цветов. Оно также дает ссылку на удобный генератор CSS градиентов того же автора, который может быстро дать вам код, необходимый для градиентных фонов. Попробуйте ColorZilla в сочетании с DevTools Autosave, чтобы экспериментировать с цветами на вашей странице визуально и «на лету».
20. AXЕ
Доступность – гарантия того, что сайты будут одинаково полезны и для людей с ограниченными возможностями – очень важна в Интернете. Тем не менее, к сожалению, для разработчиков это далеко не всегда приоритетная задача, и поэтому инструменты тестирования, которые помогают обеспечить правильный фокус, могут быть чрезвычайно ценными.
Расширение АХЕ добавляет функциональные возможности к инструментам разработчика, которые позволяют автоматически проверять проблемы доступности. Это не только дает вам преимущество быстрого и автоматизированного тестирования, но еще является одной из сильных сторон расширения, которая заключается в том, чтобы избежать ложных плюсов.
Обратите внимание, что тоже самое не верно в обратном направлении, однако — просто потому, что расширение не находит ничего, что не гарантирует доступность страницы, поэтому нет ничего лучше для передовой практики и тестирования, чтобы получить правильный результат.
21. Page Ruler
Page Ruler добавляет экранную линейку в браузер, что позволяет получать пиксельные размеры и позиционирование любых элементов на странице.
Хотя это может показаться тривиальным, но это имеет огромное значение, когда вы работаете с CSS. Хотите добавить новый элемент на страницу, потратив при этом кучу времени на пробы и ошибки в размерах и позиционировании? Тогда используйте линейку, чтобы получить все размеры с первого раза.
Инструмент довольно прост в использовании и имеет несколько различных способов, которыми вы можете использовать линейку. Вы можете щелкнуть и перетащить свободную форму, чтобы наметить область для измерения, или если вам нужно работать с уже существующим контентом на странице, вы можете включить «Режим элемента» в левой части панели инструментов линейки, которая будет выделять отдельные элементы на странице по мере прохождения мыши над ними. После этого измерения появятся на панели инструментов в верхней части страницы.
22. Open Graph Preview
Расшаривание в социальных сетях является основным источником трафика, но знаете ли вы, что можете контролировать, как отображается ваш сайт, когда им делятся на Facebook или на других сайтах социальных сетей? Протокол Open Graph Preview — это стандарт метаданных, который определяет свойства чтения и отображения в социальных сетях. Например, <meta property=«og:title» content=«My Page»/> управляет заголовком, который Facebook дает вашей расшареной странице.
Расширение Open Graph Preview позволяет вам увидеть, как будет отображаться ваша страница, если вы будете делиться ею на Facebook и Twitter (плюс несколько других социальных платформ). После того, как ваш сайт будет запущен, вы также можете использовать это расширение, чтобы узнать, сколько раз вашей страницей поделились в каждой из социальных сетей, что будет отображаться ниже соответствующего значка.
Всем успешной работы и творчества!
0 комментариев