WhatsApp

12 дополнений Firefox для разработчиков & Дизайнеры

Anonim

Совсем недавно мы выпустили сообщение о 12 расширениях Google Chrome для разработчиков и дизайнеров, и хотя некоторые из этих расширений доступны в Firefox , я бы не стал здесь ничего повторять.

Таким же образом, некоторые из перечисленных ниже расширений доступны в Chrome, поэтому рассматривайте такие приложения как бонусы для соответствующих браузеров.

1. HTML-валидатор

HTML Validator прогоняет ваш код, чтобы убедиться, что он соответствует стандартному соглашению HTML. Он отображает количество ошибок, которые он видит, на значке на панели инструментов.

HTML Validator Firefox Addon

2. Octotree

Как разработчик, я время от времени просматриваю несколько кодовых страниц на GitHub, чтобы посмотреть, как другие разработчики решили определенные проблемы. . Если вы похожи на меня, вы найдете Octotree полезным.

Octotree отображает код GitHub в формате дерева. Таким образом, вы можете просматривать строки кода, не загружая исходные файлы.

Octotree показывает код GitHub в формате дерева

3. HTTPS везде

HTTPS Everywhere шифрует данные, которыми вы обмениваетесь со всеми основными веб-страницами, даже если они не используют HTTPS.

Так что, если вас перенаправляют на страницы, которые не используют https, вы можете быть уверены, что ваше общение в сети безопасно.

4. Тест производительности страницы

Page Performance Test предоставляет вам статистику по вашим веб-страницам, измеряя их скорость и производительность загрузки. Вы можете сохранить результаты диаграммы, чтобы сравнить их с последующими тестами.

Тест производительности страницы

5. Usersnap

Usersnap позволяет делать скриншоты веб-сайтов и комментировать их, добавляя рисунки разметки и комментарии. Он также поставляется с пиксельной линейкой и может напрямую интегрироваться с различными инструментами управления проектами, включая Slac, Trello и JIRA.

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

Usersnap

6. Отключить JavaScript

Отключить JavaScript, как следует из названия, дает вам возможность отключить JavaScript на веб-сайтах или только на определенных вкладках. Вы можете настроить его так, чтобы JS-состояние по умолчанию включалось/выключалось, а поведение по умолчанию отключалось по домену/вкладке и т. д.

Отключить JavaScript

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

Расширение «Контрольный список веб-разработчика» предоставляет обзор того, насколько удобен ваш сайт в соответствии с передовыми методами проектирования и разработки.

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

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

8. Инструменты разработчика React

С кажущимся бесконечным ростом популярности React разработчики React рождаются почти каждый день, и команда React заботится о них.

Инструменты разработчика React дает вам возможность проверять дерево React вместе с его состоянием, реквизитами, иерархией и т. д. Чтобы активировать его , запустите инструменты разработчика Firefox и перейдите на вкладку React.

Существует также версия для разработчиков Vue в виде инструментов разработки Vue.js.

Инструменты разработчика React

9. ColorZilla

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

Он также содержит пипетку, генератор градиента, обозреватель палитр и историю цветов.

ColorZilla

10. Evernote Web Clipper

Evernote Web Clipper позволяет делать скриншоты веб-страниц и автоматически сохранять их в Evernoteучетная запись, из которой вы можете делать аннотации и делиться ими с членами команды.

Evernote Web Clipper

11. Диспетчер файлов cookie

Cookie Manager – это расширение, обеспечивающее безопасность, которое позволяет вам просматривать, добавлять, редактировать, удалять и искать файлы cookie в любом домен.

Что еще круче в Cookie Manager, так это то, что вы можете экспортировать и импортировать файлы cookie между доменами.

Менеджер файлов cookie

12. Live Editor для CSS и LESS

Live Editor для CSS и LESS позволяет вам писать код CSS/LESS непосредственно в браузере. Ваш код вступает в силу немедленно и будет сохранен на уровне сайта в локальном хранилище вашего браузера.

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

Живой редактор для CSS

Вам нравятся какие-либо из перечисленных расширений или у вас есть список, который мы можем использовать? Раздел комментариев находится ниже.