Лучшие расширения для Chrome
Если вы разработчик, у вас, скорее всего, уже есть коллекция любимых расширений Chrome, которые вы используете ежедневно. Расширения, которые облегчают жизнь, повышают продуктивность или выполняют важную задачу лучше, чем специальный инструмент. Этот список может основываться на этой коллекции.
Поскольку большинство из нас использует Chrome , имеет смысл рассмотреть расширения Chrome. Доступны и другие браузеры, но Chrome используют 62,6% интернет-пользователей .
Лучшие расширения Chrome для веб-разработчиков
Мы опросили нашу команду и попросили всех знакомых разработчиков составить список расширений для разработчиков Chrome, которые они используют регулярно или могут предложить. Далее следует тщательно подобранный список лучших расширений Chrome для разработчиков на данный момент.
Здесь обязательно найдется что-нибудь, что можно использовать!
Githunt
Githunt полезен, если вы проводите много времени на GitHub в поисках новых проектов для работы. Это расширение разработчика Chrome выводит его на передний план, вместо того, чтобы зависеть от потока трендовых проектов GitHub, выделяя все трендовые проекты в новой области вкладки в вашем браузере.
Вы можете искать проекты на разных языках, читать краткое описание проекта и количество текущих открытых вопросов. Затем вы можете просто выбрать проект на вкладке, чтобы перейти к проекту и продолжить изучение. Это очень полезное небольшое расширение, если вам нравится участвовать в новых проектах.
4000+ пользователей
Оценка: 3/5 за ответ на потребность в узкой нише
WhatFont
WhatFont — очень полезное расширение Chrome для разработчиков, которым необходимо определять шрифты, используемые на веб-страницах . Это быстро, эффективно и определяет отдельные шрифты на странице за секунды. Он также идентифицирует семью, размер, вес и цвет. Все это в небольшом всплывающем окне браузера.
WhatFont идеально подходит для веб-разработчиков, которые любят собирать примеры отличных страниц, которым они могут захотеть подражать в будущем. Он небольшой, не требует много ресурсов и его стоит использовать. Он давно не обновлялся, но все еще отлично работает.
1000000+ пользователей
Оценка: 3,5 / 5 за удобство использования
Fonts Ninja
Fonts Ninja работает аналогично WhatFont для идентификации шрифтов на веб-странице. Это полезная альтернатива, если WhatFont не работает для вас по какой-либо причине. Он работает примерно так же, но имеет меньший интерфейс. В остальном оба расширения выглядят очень похоже.
Установите расширение, и вы увидите маленький зеленый значок ниндзя на панели инструментов. Откройте веб-страницу в Chrome, выберите значок и наведите курсор на шрифт, который хотите идентифицировать. Вы должны увидеть всплывающее окно с обзором страницы и отдельное всплывающее окно над выделенным шрифтом. Просто, но очень эффективно.
300000+ пользователей
Оценка: 3,5 / 5 за удобство использования
ColorPick Eyedropper
ColorPick Eyedropper — это очень удобный селектор для веб-страниц с увеличенным масштабом. Это полезное расширение для разработчиков Chrome, потому что оно может быстро определять любой цвет на любой веб-странице и увеличивать масштаб, так что вы даже можете выбрать рамку шириной 1 пиксель. Хотя вы можете не использовать его каждый день, это отличный инструмент, который нужно держать под рукой.
После установки ColorPick Eyedropper вы просто выбираете значок цветового круга, чтобы активировать его. Ваш курсор изменится на перекрестие, выделите раздел, который вы хотите идентифицировать, и вы должны увидеть значения RGB и шестигранник в правой части экрана.
1000000+ пользователей
Оценка: 3,5 / 5 за удобство использования, ноль за дизайн UX
Window Resizer
Window Resizer — невероятно полезное расширение Chrome для веб-разработчиков. Это просто, но очень эффективно, особенно при работе с адаптивным дизайном или приложениями. Он устанавливается в Chrome и изменяет размер любого экрана, над которым вы работаете, до ряда популярных размеров экрана.
Охватываются самые распространенные размеры, мобильный телефон, планшет, компьютер, и эмуляция кажется очень точной. Ребята здесь много используют Window Resizer и высоко оценивают его. Для нас этого достаточно!
600000+ пользователей
Оценка: 4.5 / 5 за удобство использования и простоту
BrowserStack
BrowserStack — еще одно исключительно полезное расширение Chrome для веб-разработчиков. Как и Window Resizer, это расширение позволяет тестировать вашу работу на отзывчивость. Это расширение позволяет использовать не разные размеры экрана, а разные браузеры.
Установите расширение, откройте свою страницу в Chrome, выберите BrowserStack и выберите вариант устройства на вкладке. Затем страница будет отображаться с использованием эмуляции браузера на этом устройстве. Просто, но очень эффективно. Однако для правильной работы вам понадобится учетная запись BrowserStack.
100000+ пользователей
Оценка: 3/5 юзабилити — это высокий показатель, требования к учетной записи — явный знак против этого.
CSS Viewer
CSS Viewer — еще одно простое, но очень эффективное расширение Chrome для веб-разработчиков. Как следует из названия, это дополнение показывает вам свойства CSS данной страницы, куда бы вы ни наводили указатель мыши. Появится небольшое всплывающее окно, показывающее данные CSS, составляющие элемент, на который вы указываете.
Это очень умное расширение, которое быстро определяет ключевые свойства CSS в любом месте, куда вы наводите указатель мыши.
100000+ пользователей
Оценка: 4/5 за простоту и удобство использования
Lorem Ipsum Generator
Lorem Ipsum Generator — одно из лучших расширений Chrome. Он делает то, что предполагает его название. Он генерирует текст-заполнитель для демонстрационных веб-сайтов и делает это хорошо.
Просто установите расширение, выберите его на странице, укажите, сколько копий Lorem Ipsum вы хотите создать, и скопируйте его из окна. Вставьте его на свою страницу, и все готово.
20000+ пользователей
Рейтинг 4/5 за простоту использования
Corporate Ipsum
Corporate Ipsum — популярная альтернатива генератору Lorem Ipsum. Если ваш клиент более требователен к тексту-заполнителю или вы хотите добавить ощущения к бизнес-сайту , вам сюда. Это расширение для разработчиков Chrome генерирует lorem ipsum, но с корпоративным уклоном.
Он также работает так же, как и генератор Lorem Ipsum. Установите расширение, откройте свою страницу, выберите значок и укажите, сколько копий нужно сгенерировать. Скопируйте и разместите его на месте и переходите к следующему. Это быстрый и простой способ создания текста-заполнителя, более ориентированного на бизнес.
10000+ пользователей
Рейтинг 4/5 за простоту использования и удовлетворение конкретных потребностей
Ghostery
Chrome — отличный браузер для многих вещей, но конфиденциальность к ним не относится. Ghostery стремится помочь в этом. Это расширение конфиденциальности, предназначенное для блокировки навязчивой рекламы, остановки отслеживания, предотвращения сбора данных и блокировки всех тех элементов страницы, которые замедляют вашу работу.
Хотя Ghostery не предоставляет никаких полезных инструментов для веб-разработки, он сохраняет просмотр сайтов без рекламы и делает их быстрее. Каждый пользователь Chrome может установить Ghostery.
2000000+ пользователей
Рейтинг 5/5 за эффективность
Wappalyzer
Wappalyzer — очень эффективный инструмент для определения технологий, лежащих в основе веб-страниц. Он быстро определяет веб-службы, тип CMS, инструменты аналитики, плагины, библиотеки JavaScript и целый ряд других приложений. Если вы хотите узнать секреты страницы, это один из способов узнать.
Просто установите расширение, выберите его на странице, и появится всплывающее окно, в котором будут выделены все идентифицируемые приложения, запущенные на этой странице.
1000000+ пользователей
Оценка 4/5 за полезность и понятный интерфейс
Clear Cache
Сколько раз вы изменяли настройку и задавались вопросом, почему это изменение не отражалось на экране? Вы не одиноки, поэтому Clear Cache — такое полезное расширение для разработчиков Chrome.
Установите расширение и выберите в браузере небольшой значок корзины, чтобы очистить кеш браузера . Нет никаких подтверждений и никаких дополнительных диалогов, с которыми нужно бороться. Этот инструмент просто делает то, что должен делать.
800000+ пользователей
Оценка: 4.5 / 5 за простоту
HTML Validator
HTML Validator — это быстрый инструмент для проверки вашего HTML в браузере. Существуют сотни инструментов HTML, и, скорее всего, они у вас их уже есть. Но HTML Validator действительно полезен для быстрой проверки разметки в браузере.
Установите расширение, откройте окно разработчика на странице и перейдите на вкладку HTML Validator. Все ваши качества HTML отображаются внутри с ошибками вверху.
30 000+ пользователей
Оценка: 4/5 за удобство использования, но есть большая конкуренция
Keyframes
Keyframes — одно из лучших расширений Chrome для веб-разработчиков, которые хотят создавать анимацию CSS в браузере. Несмотря на то, что существует множество инструментов для анимации, это расширение позволяет быстро создавать базовые анимации в простом всплывающем окне.
Просто установите ключевые кадры, откройте страницу, выберите красный и синий значок и выделите элемент CSS, который вы хотите анимировать. Отредактируйте этот элемент в боковом поле, чтобы добавить на страницу свой собственный фрагмент анимации. Просто и без усилий!
20000+ пользователей
Оценка: 3,5 / 5 за то, что действительно полезно, если инструмент CSS-анимации ограничен.
React Developer Tools
Инструменты разработчика React предназначены специально для библиотеки React JavaScript с открытым исходным кодом. Если вы работаете с React, это расширение поможет вам проверить библиотеку по мере необходимости.
Установите расширение, и вы должны увидеть два значка на панели инструментов Chrome. Один предназначен для компонентов, а другой — для профилировщика. Компоненты показывают, что React использует на странице, а Profiler показывает данные о производительности. Если вы работаете с React, это незаменимый инструмент!
2000000+ пользователей
Оценка: 4/5 за простоту использования для нишевой библиотеки
JSON Viewer
JSON Viewer является альтернативой JSONView и помогает управлять данными JSON в легко узнаваемом виде иерархии в окне браузера. Работать с необработанными данными JSON можно, когда у вас есть время, но использование этого дополнения упрощает быстрое усвоение и использование кода.
Это небольшое расширение для разработчиков Chrome, но его стоит попробовать. С более чем 800000 пользователей и яркими отзывами это расширение определенно стоит попробовать.
800000+ пользователей
Оценка 4/5 за надежность и простоту использования.
ColorZilla
ColorZilla — превосходное расширение для разработчиков Chrome для выбора цвета. Он включает в себя селектор цвета, инструмент истории цвета, анализатор градиента CSS и анализатор страницы, который оценивает цвета на веб-странице.
Если вы натолкнулись на веб-сайт, палитра которого находит отклик, этот инструмент поможет вам определить комбинации или отдельные цвета за секунды. Это важное расширение для всех, кто имеет дело с цветом в Интернете.
2000000+ пользователей
Оценка: 4/5 за удобство использования и производительность
Dimensions
Dimensions — это динамический показатель, использующий вашу мышь. Это очень полезное расширение для разработчиков Chrome, если вы хотите измерить расстояние, размеры, промежутки между элементами страницы и все остальное, что вы видите на странице.
После установки вы увидите небольшой значок в виде перекрестия на панели инструментов. Откройте страницу в Chrome, выберите значок, и вы увидите перекрестие на экране. Переместите его туда, где вы хотите измерить, и вы увидите, что точные размеры отображаются у крестика. Просто, но очень эффективно.
100000+ пользователей
Оценка: 4/5 за удобство использования и производительность
Page Ruler
Это расширение для динамических измерений. Хотя «Dimension» могут измерять высоту и ширину элементов, это более полезно для измерения между ними. Page Rule очень точно измеряет эти элементы.
Если вам нужно что-то измерить, выберите значок линейки, чтобы он стал оранжевым. Страница тускнеет, позволяя нарисовать элемент, который нужно измерить. После этого расширение представит точные размеры элемента в небольшом всплывающем окне рядом с ним.
10000+ пользователей
Оценка: 3/5 просто, но нужно немного времени, чтобы понять, как им пользоваться
UX Check
UX Check — это анализатор удобства использования, который оценивает страницу с помощью 10 эвристик Нильсена . Он может быстро выявить потенциальные проблемы с удобством использования и позволяет добавлять заметки, делать снимки экрана и экспортировать результаты, готовые для совместного использования в команде.
UX Check — очень эффективный способ выполнить легкое пользовательское тестирование, не вдаваясь в подробности. Идеально подходит в качестве первого прохода перед сдачей проекта на полное тестирование.
30 000+ пользователей
Оценка: 4/5 за производительность и простоту использования
Check My Links
Check My Links делает именно то, что написано. Это очень простой способ проверить неработающие ссылки. Он также может проверять действительные ссылки и перенаправленные ссылки, а также неработающие. Хотя технически это расширение разработчика Chrome может быть полезно для SEO и других специальностей.
После установки в Chrome вы должны увидеть небольшой значок галочки на панели инструментов. Загрузите свою страницу, выберите значок, и появится всплывающее окно со всеми оцененными ссылками. В зависимости от размера страницы это может занять несколько секунд, но работает безупречно.
200000+ пользователей
Оценка: 4,5 / 5 за удобство использования в различных веб-дисциплинах
Web Developer Checklist
Контрольный список веб-разработчика — это расширение для разработчиков Chrome, которое дает вам контрольный список всего, что необходимо выполнить на странице перед публикацией. Это очень полезное дополнение для занятых разработчиков.
Установите расширение, и на панели инструментов появится значок кода. Выберите его на странице, и появится всплывающее окно с рекомендациями, которые необходимо выполнить перед публикацией. Они включают SEO, мобильные устройства, удобство использования, доступность, социальные сети, производительность и другие выбираемые параметры.
Настоящая палочка-выручалочка.
40 000+ пользователей
Оценка: 4/5 за простоту использования и полезность
Checkbot
Checkbot похож на контрольный список веб-разработчика в том, что он проверяет страницу на наличие ссылок, ошибок, безопасности, производительности , SEO и ряда других параметров. Это очень полезный инструмент, который пополняет вашу коллекцию и может быть полезен на последнем этапе перед публикацией.
Checkbot устанавливается так же, как и все расширения. После этого нажмите синий значок, чтобы открыть боковую панель. Используйте меню, чтобы выбрать тип теста, который вы хотите выполнить, и результаты будут отображаться на странице.
30 000+ пользователей
Оценка: 4/5 за покрытие основных инструментов и добавление базовых проверок безопасности
Web Developer
Web Developer — это набор инструментов, содержащихся в одном расширении Chrome. Названный «Веб-разработчик», мы думаем, что этот инструмент подходит и для обычных разработчиков, поскольку он содержит ряд полезных инструментов, которые может использовать любой разработчик.
После установки Web Developer доступен с помощью небольшого значка шестеренки на панели инструментов. После выбора вы должны увидеть небольшое раскрывающееся окно с рядом опций, организованных в вкладки. Выберите вкладку для доступа к инструментам внутри. Здесь много чего происходит, но каждый инструмент действительно полезен.
1000000+ пользователей
Оценка: 4/5 за наличие такого количества инструментов для такого количества задач
EditThisCookie
EditThisCookie — исключительно полезное расширение Chrome для разработчиков. Он позволяет вам редактировать, удалять, создавать и защищать файлы cookie для каждой страницы. Он также позволяет вам экспортировать их для анализа, блокировать, импортировать в JSON и, как правило, делать с файлом cookie все, что вам может понадобиться.
Самый полезный инструмент — это возможность искать и читать файлы cookie. Разработчики найдут большинство инструментов полезными в тот или иной момент.
2000000+ пользователей
Оценка: 3,5 / 5 за огромное количество вещей, которые вы можете делать с файлами cookie.
Lightshot
Lightshot — еще одно из тех расширений разработчика Chrome, которые могут быть полезны для самых разных людей. Хотя разработчики, скорее всего, будут его часто использовать, UX-тестеры. пользовательские тестировщики, инструкторы, графические дизайнеры и другие пользователи сделают отличные снимки экрана с помощью этого инструмента.
После установки откройте страницу, снимок экрана которой вы хотите сделать, и выберите значок пера. Перетащите курсор через область, которую хотите захватить. Выберите из появившегося всплывающего меню и сохраните снимок.
1000000+ пользователей
Оценка: 4/5 за простоту, но высокую эффективность
Session Buddy
Session Buddy — еще один универсальный инструмент, полезный для разработчиков и любого типа веб-пользователей. Это инструмент «сохранить на потом», который может сохранять все открытые вкладки в одном сеансе для последующего доступа. Это полезно, когда вы сталкиваетесь с чем-то, что хотите прочитать позже, или для защиты производительности, если вы используете несколько вкладок.
После установки Session buddy выберите маленький значок на панели инструментов, чтобы увидеть все открытые вкладки. Вы можете выбрать значок после сбоя браузера, чтобы восстановить все вкладки и сохранить сеанс для загрузки позже. Очень полезный инструмент для любого пользователя сети!
1000000+ пользователей
Оценка: 4/5 за защиту мира от сбоев браузера
Daily.dev
daily.dev сам по себе не является инструментом повышения производительности, но он делает нашу жизнь намного проще. Это агрегатор новостей, специализирующийся на новостях разработки. Он демонстрирует страницу, полную новостей, сообщений в блогах и полезных страниц по выбранной нами теме.
Daily действует как стартовая страница и агрегатор новостей. Выберите элемент на странице, чтобы посетить эту страницу. Открывается в новой вкладке и представляет собой смесь новостей, обзоров, советов, практических рекомендаций и всего полезного, что помогает нам расти как разработчикам . Это отличное расширение, если вы хотите быть в курсе событий.
40 000+ пользователей
Оценка: 4.5 / 5 за то, что все наши новости собраны в одном месте
Вывод
Этот список лучших расширений Chrome для разработчиков, мягко говоря, разнообразен. В нем есть инструменты, которые полезны для любого типа разработчиков, а также некоторые специализированные, подходящие для более узких ниш.
Мы надеемся, что вы извлечете из этой статьи пару новых инструментов для разработчиков, которые упростят вам жизнь. Будь то повышение производительности, решение проблем или оптимизация процесса, здесь есть инструменты, которые делают все это и многое другое.
