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