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, які можна друкувати або копіювати в буфер обміну. Знімки екрана створюються миттєво, зберігаються локально та не створюють трафіку. Крім того, це розширення може працювати в автономному режимі.