Лучшие расширения Chrome для разработчиков

1-) Изменение размера окна

Измените размер окна браузера, чтобы эмулировать различные разрешения экрана.

2-) Форматировщик JSON

Делает JSON легко читаемым. Открытый источник.

3-) ВисБаг

Инструменты отладки веб-дизайна с открытым исходным кодом, созданные с помощью JavaScript: FireBug для дизайнеров.

– Наведите, щелкните и поработайте
– Редактируйте или стилизуйте любую страницу в любом состоянии, как будто это монтажная область
– Проверяйте стили, интервалы, расстояние, доступность и выравнивание
– Придирчиво проверяйте макеты и содержимое в реальной конечной среде на любом размере устройства
– Используйте навыки работы с Adobe/sketch
– Редактируйте текст , замените изображения
– Проектируйте в хаосе: используйте готовые прототипы и нечетные состояния, которые они создают, в качестве монтажных областей и возможностей дизайна
– Проектируйте, пока DevTools моделирует задержку, i18n, медиа-запросы, ограничения платформы, ЦП, размер экрана и т. д.
– Принимайте больше решений о внешнем интерфейсе вашего сайта/приложения (a11y, адаптивный, пограничный и т. д.)
– Не нужно ждать, пока разработчики представят свои лего, просто перейдите прямо и отредактируйте конечное состояние (независимо от фреймворка) и выполнение/тестирование идеи

4-) CSS для попутного ветра

Автоматически преобразовывать CSS веб-сайта в классы TailwindCSS. Отсутствующие стили добавляются как произвольные значения.

5-) Контрольный список веб-разработчика

Анализирует любую веб-страницу на наличие нарушений лучших практик

6-) Автоматическое удаление файлов cookie

Автоматически удалять файлы cookie при закрытии вкладки или браузера!

7-) Что работает

Узнайте, что запускает веб-сайт. Фреймворки, инструменты аналитики, плагины Wordpress, шрифты — вы называете это.

Расширение WhatRuns позволяет одним щелчком мыши найти технологии, используемые на любом веб-сайте, который вы посещаете. От инструментов разработчика и рекламных сетей до плагинов и тем Wordpress — мы обнаруживаем даже новые и будущие инструменты и услуги.

8-) Поддельный наполнитель

Заполнитель формы, который заполняет все входные данные на странице поддельными/фиктивными данными.

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

9-) Поиск шрифтов

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

10-) Пользовательский JavaScript и CSS

Пользовательский JavaScript и CSS на любом сайте

Пользовательские сценарии и пользовательские стили — простое расширение для внедрения собственных правил JavaScript или CSS на любую страницу.

11-) Палитра сайта

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

- Доступен БЕСПЛАТНЫЙ API Site Palette!
- Поддерживается несколько генераторов палитр
- Созданы общие ссылки
- Предварительное изображение палитры доступно для скачивания
- Автоматическая загрузка - сгенерированный шаблон Sketch
- Добавлена поддержка Adobe Swatch
- Поэкспериментируйте с палитрами на сайте coolors.co (мы с ними не связаны)
- Настройте палитры в Google Art Palette< br /> - Добавлены стили печати: распечатывайте или сохраняйте палитры в PDF

12-) Контрольный список

Простой аддон контрольного списка для отслеживания вещей.

Бонус: плавающий плеер — режим «картинка в картинке».

Это потрясающий плавающий видеоплеер для вас (режим «картинка в картинке»). Помещайте видео поверх любых других веб-сайтов или приложений во время просмотра веб-страниц (всегда поверх других окон). Продолжайте делать свою работу и смотрите фильм во всплывающем окне! Вы даже можете изменить размер всплывающего окна с видео и многое другое ...