Подборка расширений для тестировщиков

Полезные инструменты для разработки и тестирования фронтенда

JSON Formatter: визуализация JSON-файлов
🔎 Chrome

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

Wappalyzer: профайлер технологического стека
🔎 Chrome 🔎 Firefox

Wappalyzer позволяет изучить техническую начинку любого сайта — от фреймворков и библиотек до серверного ПО и прочих инструментов. Такой анализ может помочь при планировании собственного проекта. Например, перед созданием интернет-магазина вы можете исследовать решения конкурентов и узнать, какие CMS и системы аналитики они используют.

Lighthouse: инспектор веб-страниц
🔎 Chrome 🔎 Firefox

Lighthouse — это инструмент для проверки качества сайтов. Он позволяет проверить скорость загрузки, удобство использования, поисковую оптимизацию и соответствие ресурса стандартам PWA. После проверки вы получаете отчёт с рекомендациями по улучшению. Например, Lighthouse подскажет, если изображения на странице слишком медленно загружаются.

CSS Peeper: анализ стилей
🔎 Chrome

С помощью CSS Peeper вы можете просматривать CSS-параметры любых элементов на странице: цвета, размеры, шрифты и другие свойства. Например, вы можете узнать точный цвет кнопки или размер заголовка на сайте — достаточно просто навести курсор на нужный элемент интерфейса.

ColorZilla: пипетка для работы с цветами
🔎 Chrome 🔎 Firefox

ColorZilla помогает определять точный цвет элементов на сайте и создавать цветовые палитры. Чтобы узнать цвет фона, достаточно навести на него курсор — код отобразится в формате HEX или RGB. Инструмент также позволяет составлять градиенты (например, от красного #FF0000 к зелёному #00FF00) и хранит историю использованных цветов.

Toucan: изучение иностранных языков
🔎 Chrome

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