Мои любимые расширения для веб-разработки

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

• Октотри
• Ваппалайзер
• Переключатели функций CSS
• Воркона
• ЛастПасс
• Кодовая строка ежедневно
• Кодопен
• Ключевые слова везде
• Заблокируйте себя от аналитики
• Всегда очищайте загрузки 2
• Грамматика для Chrome
• Иди на работу
• Буфер
• Пабло
• Клавиатура с эмодзи

Octotree или «GitHub на стероидах» — это расширение, которое добавляет несколько дополнительных функций на страницы GitHub. Самая грозная фича — боковая панель с деревом кода, как в IDE. Это удобно, когда вы пытаетесь найти файл в репозитории.

Вот предварительный просмотр боковой панели Octotree для репозитория моего сайта.

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

Например, вы могли видеть, что мой сайт использует Matomo для аналитики, Netlify в качестве веб-сервера и CDN и Hexo для создания статического веб-сайта.

Тестирование веб-сайтов на разных устройствах может быть довольно утомительной, но необходимой задачей. Хотя Интернет движется в правильном направлении, мы должны знать о неподдерживаемых функциях CSS, таких как CSS Grid или CSS-переменные. Прежде чем прикладывать усилия к тестированию своего сайта в разных браузерах, вы можете сэкономить время, сначала переключив функции CSS в Chrome. Расширение CSS Feature Toggle позволяет вам делать именно это — отключать функции CSS.

Поддерживаемые функции:

• функции макета, такие как CSS Grid, Flex и свойство нескольких столбцов;
• функции визуального рендеринга, такие как переходы, анимация и маскирование;
• размерные особенности — нравится shape-inside а также object-fit характеристики;
• другие функции, такие как переменные CSS или calc() поддерживать.

Workona — единственное расширение, без которого я больше не могу представить свой рабочий день. Это как менеджер проектов прямо в вашем браузере, где вы можете управлять всей своей работой в облаке. Это означает, что я могу открывать свои вкладки на другом устройстве в любое время. Я использую его для организации своих рабочих мест для чтения статей, просмотра вебинаров, обучения и работы над отдельными проектами.

Вы могли видеть часть моей панели инструментов Workona. Чтобы открыть вкладки для конкретной рабочей области, все, что мне нужно сделать, это выполнить один щелчок.

LastPass — менеджер паролей. Он может хранить пароли и автоматически заполнять поля для входа. При работе с большим количеством клиентов это может сэкономить ваше время и рассудок. Я также использую его на своем мобильном телефоне. Работает как часы.

LastPass также может сэкономить вам много времени при тестировании форм. Вы можете создать профиль с фиктивными данными, а затем использовать опцию «Заполнить», чтобы заполнить форму. Я использую эту функцию для регистрационных форм довольно часто.

Забавный факт: у меня более 20 входов в Slack. 😵

Кодовая строка ежедневно это побочный проект, над которым я работал в течение последнего месяца или около того. Это было представлен на Product Hunt ранее в этом месяце.

Один из подписчиков предположил, что его можно использовать в качестве плагина для браузера. На этой неделе Code Line Daily доступен как расширение в Интернет-магазине Chrome.

Почетные упоминания

Эти расширения установлены в моем Chrome, но я не так часто им пользуюсь или не уделяю ему особого внимания:

• Кодопен. Расширение, которое показывает, позволяет просматривать фрагменты кода Codepen в отдельном окне для упрощения отладки в вашем любимом инструменте. Забавный факт: муж Сары Драснер сделал это расширение в качестве подарка для нее.
• Ключевые слова везде. Расширение, используемое для SEO-исследований. Он показывает ключевые слова на сайтах, таких как Google Search, Google Search Console и Google Analytics. Это полезно для фундаментальных исследований.
• Заблокируйте себя от аналитики. Это предотвращает запись вашего посещения Google Analytics. Это полезно при работе с сайтами с низкой посещаемостью.
• Всегда очищайте загрузки 2. Он автоматически очищает список загрузок после завершения и, самое главное, закрывает полосу загрузок.
• Грамматика для Chrome. Это обязательное расширение для всех. Я использую платную версию, но она предлагает множество привлекательных функций на бесплатном уровне.
• Иди на работу. Он показывает мотивационные сообщения в довольно грубой форме, когда вы посещаете сайты, которые вы определили как расточительные. Это заставляло возвращаться к работе не раз.
• Буфер. Это важный инструмент для планирования социальных акций. Я использую его каждый день.
• Пабло. Он создает привлекательные изображения для социальных сетей с переливом текста и пользовательскими эффектами.
• Клавиатура с эмодзи. Иногда вам просто нужно найти смайлик, чтобы выразить себя. Он показывает смайлики по категориям и имеет мощный поиск.