10 полезных расширений Google Chrome для фронтенд-разработчиков

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

Своим подбором полезных расширений поделилась Front-End Developer (React JS) Руслана Подсадюк в LinkedIn, а ее коллеги дополнили список в комментариях.

Grammarly

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

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

Есть два варианта расширения: бесплатное с проверкой грамматики, орфографии, пунктуации, детектором тона и автоцитированием, а также премиум с дополнительными предложениями.

React Developer Tools

Расширение Chrome DevTools для библиотеки React JavaScript с открытым кодом. Он позволяет следить за происходящим в React части аппликации, видеть вложенность и названия соответствующих компонентов.

После установки расширения вы получите две новые вкладки в Chrome DevTools: Components и Profiler. Первая показывает вам корневые компоненты React, которые были отрендерированы на странице, а также подкомпоненты, которые они в конечном итоге отразили. А еще с ее помощью может проверить и отредактировать текущие свойства компонента и состояние панели справа. Вторая вкладка позволяет записывать информацию о производительности.

Redux DevTools

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

View Rendered Source

Легкое расширение Chrome, которое показывает, как браузер отобразил оригинальный HTML-код страницы в функциональный DOM, включая изменения, внесенные JavaScript.

Важный инструмент для разработчиков, использующих фреймворки Angular, ReactJS и Vue.js. Инструмент позволяет понять, как поисковые системы видят ваши страницы. Здесь есть три раздела:

• Raw: исходный код, отправленный с сервера в браузер перед рендерингом DOM;
• Rendered: отображаемая страница после того, как источник был интерпретирован в DOM;
• Difference: разница между воспроизводимым источником и исходным кодом.

Color Picker

А этот инструмент больше подходит для дизайнеров, хотя разработчикам также приносит пользу: он позволяет выбирать цвета из любых веб-страниц. Просто скопируйте цветовой код и пользуйтесь. Здесь доступны три формата цветов: RGB, CSS и HSL.

JSON Formatter

Обеспечивает удобное форматирование отображения JSON. Особенности расширения:

• быстрая работа даже на очень длинных страницах JSON;
• подсветка синтаксиса;
• интерактивные URL-адреса;
• незначительное влияние на производительность страниц, не являющихся JSON (менее одной миллисекунды);
• работает на любой действительной странице JSON – URL не имеет значения;
• есть кнопки для переключения между необработанным и разобранным JSON.

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

Loom

Популярный инструмент для записи экрана – можно сохранять видеопрезентации или звонки в Zoom в разных режимах.

Ключевые особенности:

• записывает экран, камеру, микрофон и внутренний звук;
• автоматически сохраняет видео в облаке – можно делиться им с помощью ссылки;
• посылает уведомления, когда кто-то просматривает, реагирует или комментирует ваше видео;
• можно управлять своей библиотекой видео Loom на разных устройствах;
• можно ограничить просмотр видео с помощью средств безопасности и контроля доступа.

Redirect URL, Modify Headers & Mock APIs

Да, это одно расширение, а не три 🙂 А именно прокси-сервер веб-отладки для перехвата и изменения запросов HTTPs.

Вот несколько основных функций:

• настройка перенаправления для API, Javascript (переключение среды, например Prod на Staging);
• изменение ответа API;
• изменение заголовка HTTP;
• возможность делиться сеансами отладки с видео, журналами консоли, сетевыми журналами и деталями env с коллегами;
• встроенный макетный сервер;
• возможность вставить внешний JavaScript и CSS на любой веб-сайт.

Moesif Origin & CORS Changer

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

Предостережения: некоторые рабочие веб-сайты, такие как Google Docs или Facebook, могут жаловаться, если обнаружат что-то неожиданное. Чтобы избежать проблем с безопасностью, рекомендуется отключить плагин после отладки.

FireShot

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

Скриншоты хранятся в файлах PDF (со ссылками)/JPEG/PNG, которые можно печатать или копировать в буфер обмена. Снимки экрана создаются мгновенно, сохраняются локально и не создают трафик. Кроме того, это расширение может работать в автономном режиме.