5 самых полезных расширений Google Chrome для создателей веб-сайтов WordPress

Оптимизация вашего рабочего процесса имеет решающее значение для успеха проекта. Это экономит время, деньги, улучшает общение с коллегами, клиентами и повышает качество готового сайта WordPress.

В настоящее время всегда есть приложение, плагин или надстройка, которые могут помочь вам сделать вашу задачу более эффективно. В этой статье я хотел показать вам, какие расширения мы используем в браузерах (в частности, Google Chrome) в ProteusThemes для общения, редактирования и анализа многих типов контента.

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

– WhatFont

– Линейка страниц

– ColorZilla

– Потрясающий скриншот

– Стайлбот

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

Все установленные расширения можно увидеть, изменить, активировать или деактивировать, если щелкнуть меню в конце поля URL и выбрать «Дополнительные инструменты» или просто щелкнуть правой кнопкой мыши значок расширения, чтобы выбрать нужный параметр.

Давайте углубимся в детали каждого расширения.

WhatFont

Получить расширение WhatFont

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

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

Расширение показывает следующие характеристики шрифта:

• Вес и стиль шрифта (показывает вес и стиль выделения).

• Семейство шрифтов (показывает полную коллекцию шрифтов, из которых исходит шрифт, чтобы вы могли его отслеживать).

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

• Высота шрифта (это высота от верха заглавной буквы до низа самого нижнего выносного элемента плюс небольшой буфер).

• Цвет шрифта (цветовая модель шрифта HEX. Будьте внимательны при чтении цвета текста ссылок. В некоторых случаях выделение показывает цвет ссылки в режиме наведения).

• Ссылка на Google Fonts, Font Squirrel или TypeKit (в некоторых случаях шрифт подключается к набору интерактивных интерфейсов прикладного программирования, что позволяет вам просматривать и использовать веб-шрифты с их веб-сайта . Найдите тот же шрифт или получите целую гарнитуру) .
• Символы (образец прописных и строчных букв показан выбранным шрифтом).

Также обратите внимание, что при использовании WhatFont вы не сможете взаимодействовать с веб-страницей, активна только прокрутка страницы. Вы можете нажать на несколько шрифтов, чтобы сравнить их, не теряя предыдущее всплывающее окно.

Линейка страниц

Получить расширение линейки страниц

Page Ruler позволяет рисовать линейку на любой странице и отображает ширину и высоту элемента, а также его положение на веб-странице. Вам больше никогда не придется просматривать код или делать скриншоты и измерять их в Photoshop. Инструмент полезен при проверке размера и положения больших элементов на веб-странице. Например, вы можете проверить с его помощью все отступы и поля. Более мелкие элементы или детали также могут быть измерены.

Как использовать линейку страниц

Начните использовать инструмент линейки, щелкнув значок в правом верхнем углу панели инструментов браузера или нажав ALT + P. Всплывает синяя линейка, которая отображает ширину, высоту и положение выделения — слева, сверху, справа, снизу.

Чтобы сделать выбор, просто нажмите, перетащите и отпустите. Данные выбора мгновенно отображаются на синей панели инструментов. Щелкая и перемещая стороны и углы линейки, вы изменяете размер выделения линейки. Вы также можете вручную ввести желаемый размер или положение в поля на синей линейке. Другой вариант — щелкнуть маленькие стрелки в полях, чтобы изменить размер или переместить выделение. Это позволяет вносить точные изменения. Также доступно перемещение выделения путем перетаскивания его из центра.

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

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

Для измерения расстояния между двумя элементами, которые находятся далеко друг от друга, включите параметр «Показать направляющие», чтобы отобразить направляющие, отходящие от краев линейки.

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

Включите «Режим элемента» (щелкните голубые стрелки в левой части панели инструментов), чтобы выделить элементы на странице, когда вы наводите на них указатель мыши. Нажимая на элементы, вы получаете постоянный выбор. Расширение также отображает и позволяет перемещаться между элементами в соответствии с кодом сайта.

Поиск и перемещение между элементами в режиме элементов

Единственный недостаток плагина: если вам нужно получить размер элемента в мобильном представлении, вам придется использовать Page Ruler одновременно с другим плагином для изменения размера Chrome (например, Window Resizer), потому что Page Ruler не работает, когда вы на веб-странице в режиме разработчика.

ColorZilla

Получить расширение ColorZilla

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

Этот инструмент обеспечивает чтение цветов в формате RGB и шестнадцатеричном формате. Нажмите на значок пипетки ColorZilla, чтобы открыть меню со многими параметрами.

Как использовать ColorZilla

Чаще всего ColorZilla используется для чтения цвета элемента. Нажав на «Выбрать цвет со страницы», вы можете выбрать любой цвет на отображаемой в данный момент странице. Он открывает панель инструментов в верхней части веб-страницы, которая показывает образец цвета, цветовой формат RGB и HEX, а также размер и код цветного элемента. Панель инструментов также предоставляет опции для выбора больших участков цвета для расчета среднего цвета.

Вы выбираете и копируете HEX-формат цвета, щелкая по нему. Вставьте код цвета HEX с помощью кнопок CTRL + V или CMD + V. Для одноразового копирования в другом формате вы можете открыть раскрывающееся меню, выбрать «Копировать в буфер обмена» и выбрать нужный формат.

Формат можно изменить для всех следующих выбранных цветов в опциях. Там можно отключить формат # (66CAA6) и сделать HEX-код строчными (66caa6). Не забудьте сохранить изменения.

Последний выбранный вами цвет сохраняется в раскрывающемся меню значка ColorZilla в разделе «Палитра цветов». Палитра цветов хранит историю выбранных цветов, имеет возможность редактировать цвет, и вы можете скопировать его отсюда.

«Анализатор цвета веб-страницы» считывает все цвета CSS, используемые на вашей текущей веб-странице. Щелчок по цвету выделяет каждый элемент этим цветом и показывает цвета в форматах RGB и HEX.

Встроенный браузер палитры позволяет выбирать цвета из уже существующих наборов цветов. Одним из параметров, связанных с цветом, также является «Генератор градиента CSS», расширенный параметр для создания градиентов.

Потрясающий скриншот

Получите расширение Awesome Screenshot

Это расширение позволяет легко делать скриншоты и записывать веб-страницы. Также можно импортировать локальные изображения, редактировать их и экспортировать. В ProteusThemes мы используем его каждый день для внутреннего общения, а также для поддержки WordPress, которую мы предлагаем. Инструмент очень полезен, если вы работаете удаленно. Да, есть много других расширений, которые могут выполнять ту же работу, но нам нравится Awesome Screenshot, потому что он простой и мощный.

Как использовать потрясающий скриншот

Это расширение позволяет:

– для захвата видимой части веб-страницы (опция для отложенной подписи),

– для захвата выбранной области (выберите область, которую вы хотите использовать в качестве изображения),

– для захвата всей веб-страницы,

– сделать скриншот рабочего стола,

– импортировать и редактировать локальное изображение и

– для записи видео с экрана.

Чтобы выбрать один из способов сделать скриншот веб-страницы, щелкните значок объектива камеры на панели инструментов браузера. Обратите внимание, что все действия, кроме отложенного захвата потрясающего снимка экрана, будут выполнены мгновенно. Скриншоты, которые вы сделаете, будут сохранены в формате PNG или JPEG. Желаемый формат изображения можно выбрать в настройках расширения, где у вас также есть другие настройки, такие как время отложенного захвата, короткие коды и папка, в которой вы хотите, чтобы изображения автоматически сохранялись.

Если вы хотите просмотреть веб-страницу на мобильных устройствах или сделать снимок экрана вашей веб-страницы WordPress в другом разрешении, вы можете перейти в режим разработчика, чтобы изменить его или сначала активировать любое другое расширение для изменения размера (например, изменение размера веб-сайта).

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

Панель инструментов и параметры редактирования снимков экрана с помощью Awesome Screenshot

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

В этом расширении также есть возможность бесплатно записывать 30-секундное видео с экрана. Вы можете сделать вкладку или окно видео. Видео можно сохранить в формате WebM, перенести на Google Диск или напрямую загрузить на YouTube. Ваши записи можно найти в раскрывающемся меню «Удивительный снимок экрана» в разделе «Мои записи».

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

Забавный факт: большинство скриншотов и видео, которые вы смотрите в этой статье, были сделаны с помощью Awesome Screenshot.

Стайлбот

Получить расширение Stylebot

Stylebot позволяет вам редактировать и манипулировать CSS веб-сайта только для вашего просмотра. Вам понадобятся некоторые знания CSS, чтобы вносить точные и долгосрочные изменения в CSS веб-сайта . Если вам это нужно только для более быстрого предварительного просмотра изменений на вашей странице WordPress, продвинутые знания CSS не требуются. Этот инструмент используется для изменения всех возможных элементов, добавления новых, удаления их и создания другого макета веб-сайта, чтобы вы могли сделать идеальный снимок экрана, исправить нежелательные ошибки или сохранить этот CSS-код веб-сайта, поэтому изменения также будут увидеть в следующий приезд. Стиль созданного вами веб-сайта можно импортировать или экспортировать и делиться с другими.

Для более сложного редактирования Stylebot используется в сочетании с режимом разработчика для идентификации элементов на странице.

Как использовать Стайлбот

Чтобы открыть Stylebot, щелкните значок CSS на панели инструментов браузера или нажмите ALT + M. Если у вас нет особых навыков программирования, я предлагаю вам выбрать режим Basic внизу открывшейся колонки.

Расширенный режим открывает текстовое поле, в котором вы пишете код CSS для выбранного элемента. Здесь проще работать в сочетании с режимом разработчика, чтобы найти имя элемента, который вы хотите изменить, из вложенных элементов и продолжить редактирование в Stylebot. Если вы хотите использовать несколько режимов редактирования одновременно, вы можете это сделать. Простые правки будут преобразованы в код, видимый в режиме Advance или Edit CSS.

Опция «Редактировать CSS» открывает поле для кода CSS, который будет применен ко всему веб-сайту и может быть сохранен, передан и использован при следующем посещении веб-сайта. Все внесенные вами изменения будут видны. Обратите внимание, что все внесенные вами изменения останутся, если вы обновите веб-сайт. Чтобы удалить стиль, щелкните значок Stylebot и выберите «Удалить стиль».
Базовый режим имеет простые разделы для более быстрого и удобного редактирования сайта. Иногда мы используем его как инструмент быстрого предварительного просмотра (например, чтобы проверить, как будет выглядеть большой заголовок, чтобы изменить цвет фона и т. д.). Новички могут легко использовать его с самого начала.

Здесь вы можете изменить:

– текст,

– цвета, фоны,

– границы,

– макет и видимость.

Вы вручную выбираете элемент на сайте (выделенный зеленой рамкой) с помощью курсора. Имя элемента будет отображаться в верхней части столбца Stylebot. Для нового выбора просто нажмите на верхний левый значок в столбце. Стрелка раскрывающегося списка в заголовке элемента предоставляет вам ранее выбранные разделы. Когда выбран правильный элемент, вы можете начать изменять веб-сайт, введя значения и выбрав предварительно стилизованные параметры. Возможности редактирования в базовом режиме ограничены. Вы можете изменить размер шрифта, цвет текста, отступы и поля и т. д.

Чтобы сделать редактирование или просмотр Stylebot более приятным, щелкните значок Stylebot и выберите «Параметры». Здесь вы можете создавать персонализированные ярлыки, выбирать предпочтительный режим редактирования, включать и отключать стили, применяемые на разных веб-сайтах, импортировать и экспортировать стили и т. д.

Итак, вот только 5 наиболее важных и мощных расширений, которые мы ежедневно используем в ProteusThemes и которые также могут упростить ваш рабочий процесс. Вы думаете иначе? Не могли бы вы порекомендовать лучшие альтернативы? Оставить комментарий.