12 полезных дополнений Firefox для Web-разработчиков. Пипетка в браузере

12 полезных дополнений Firefox для Web-разработчиков / Хабрахабр

1. Начнём, конечно же, с прекрасного плагина под названием FireBug

2. Вторым в списке идёт аддон Web Developer

5. На 5 месте FTP-клиент FireFTP

6. Измерялка MeasureIt

7. Эмулятор Internet Explorer'а Coral IE Tab

8. Ближе к концу списка, но не менее важный Greasemonkey

10. Не сильно популярный, но полезный инструмент Aardvark

11. Аддон для упрощения однотипных действий iMacros

12. Последний на сегодня это FoxyProxy

Вот и всё на сегодня. Надеюсь, данная подборка поможет вам в упрощении работы и достижении нужных результатов. :)

Originally posted in

habrahabr.ru

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

Приветствую вас на сайте Impuls-Web!

В данной статье я расскажу вам, как можно определить цвет элемента на сайте.

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

Навигация по статье:

В моем случае, в качестве такого элемента будет выступать кнопка «Отправить заявку»

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

Определение цвета стандартными инструментами браузера

Я буду показывать, как это можно сделать на примере браузера Mozilla Firefox и Google Chrome. Здесь, для того, что бы определить цвет какого-то элемента я могу щелкнуть правой кнопкой мыши по тому элементу, для которого я хочу задать цвет и в раскрывающемся списке выбрать здесь пункт «Исследовать элемент».

При этом, в нижней части экрана откроется окно инспектора, где можно просматривать код страницы, а так же css-свойства, которые задаются для каждого элемента.

Для данной кнопки у меня отображается в качестве фона серый цвет и если щёлкнуть левой кнопкой мышки по кружочку с цветом, то откроется вот такая палитра:

При помощи данной палитры также можно подбирать нужный цвет, но для точного определения цвета нужно:

1. 1.Кликнуть на значок пипетки
2. 2.Навести курсор на тот элемент сайта, цвет которого мы хотим определить. В данном случае это будет меню.

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

    

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

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

Для этого вы можете воспользоваться либо визуальным редактором WordPress, либо какой-то другой программой для редактирования кода.

Изменения нужно вносить в файл:

/wp-content/themes/название вашей темы/style.css

Все изменения вносим в самый конец файла.

Для смены фона данного элемента нужно определить его класс или идентификатор. Как это делать я показывала в этой статье.

Затем, для этого элемента нужно задать свойство background, и вставить значение того цвета, который мы только что определили. После этого нужно сохранить изменения.

В файле style.css это будет выглядеть примерно так:

.test-btn{ background:# #2F73B6; }

Только вместо test-btn будет значение класса или идентификатора вашего элемента.

Определение цвета в браузере Google Chrome

В браузере Google Chrome процесс определения цвета будет выглядеть аналогичным образом.

1. 1.Точно так же щелкаем правой кнопкой мышки по интересующему нас элементу.
2. 2.Выбираем пункт «Просмотреть код»
3. 3.Далее, у нас открывается аналогичный инспектор. Единственное, у вас он может быть как в горизонтальном расположении, как у меня, так и в вертикальном, когда панель будет находиться справа.
4. 4.Здесь мы находим панель отображения css-свойств, и нажимаем на значок одного из цветов.= cvet6=
5. 5.Далее, у нас открывается инструмент определения цвета, который, в принципе, похож на тот, который был в Mozilla Firefox. Единственное, что здесь еще можно задавать прозрачность цвета, выбирать цветовую гамму, и так же он может определять цвета не только в шестнадцатеричном формате, но и в формате RGB и RGBA.
6. 6.Для точного определения цвета так же нажимаем на значок пипетки, наводим курсор на тот элемент, цвет которого мы хотим определить, и щелкаем левой кнопкой мыши.

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

   
7. 7.Точно так же, копируем значение этого цвета, и затем вставляем его в наш css-файл.

Как и в Mozilla Firefox, после того как мы выбрали цвет в окне предпросмотра элемент подсветился таким же цветом, который мы выбрали. Однако при обновлении страницы все эти изменения исчезнут, и цвет станет таким же, как он задан в css изначально. То есть, для того, что бы эта кнопка стала такого же цвета, как и меню на сайте, мне нужно внести изменения в css-файл.

Использование пипетки в Mozilla Firefox

Так же, в браузере Mozilla Firefox есть специальный инструмент для определения цвета, который называется «Пипетка».Для того чтобы им воспользоваться нужно:

1. 1.В правом верхнем углу нажимаем на значок меню, затем, выбираем раздел «Разработка», и здесь выбираем инструмент «Пипетка».
2. 2.У нас появляется вот такое увеличительное стекло, при помощи которого мы можем определять цвет.
3. 3.После того, как мы навели курсор на тот элемент, у которого нужно определить цвет, щелкаем левой кнопкой мышки и значение этого цвета автоматически копируется в буфер обмена.
4. 4.Затем, мы просто переходим в css-файл и вставляем это значение.

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

Определение цвета при помощи специальной программы

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

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

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

После того, ка вы выбрали тот цвет, который вам нравится, вы нажимаете сочетание клавиш CTRL+ALT+C, и значение этого цвета попадает в буфер обмена.

Затем, это значение можно также задать в качестве цвета фона, но при этом обращаю ваше внимание, что оно копируется без знака решетки.

Цвет определяется в шестнадцатеричном формате но знак решетки # вам нужно будет дописывать самостоятельно чтобы получилось примерно так: «#2F73B6».

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

Например, я хочу для этой кнопки сделать эффект при наведении, чтобы фон становился более темный или более светлый, но при этом оттенок должен сохранялся. Для этого:

1. 1.Сначала нажимаем CTRL+ALT+C, что бы скопировать значение цвета.
2. 2.Затем, на клавиатуре, нажимаем CTRL+ALT+X, после чего открывается вот такая палитра:
3. 3.В этой палитре можно либо выбирать интересующие оттенки, либо при помощи ползунка справа делать цвет более темным или более светлым. При этом в окне предпросмотра отображается оттенок, который получается в результате этих манипуляций. Здесь значение цвета отображается как в формате RGB, так и в шестнадцатеричном формате.
4. 4.Если значение скопированного цвета не вставилось автоматически, то нужно вставить его в поле «HTML», а уже потом делать его темнее или светлее при помощи ползунка справа.
5. 5.После выбора нужного оттенка копируем шестнадцатеричное значение цвета из поля “HTML”

Для смены цвета фона при наведении нужно приписать к классу или идентификатору элемента псевдокласс hover, а заем задать цвет фона.

Получится примерно так:

.test-btn{ background:#2F73B6; } .test-btn:hover{ background:# 286199; }

Я обычно при верстке или доработке сайтов использую именно эту программку.

Вы можете скачать данную программу к себе на компьютер, нажав на ссылку ниже.

Видеоинструкция

На этом у меня все. Если данная статья была для вас полезна – не забудьте оставить комментарий и подписаться на мою рассылку. Спасибо за то, что посетили мой сайт и до встречи в следующей статье!

С уважением Юлия Гусарь

impuls-web.ru

Интересные расширения Google Chrome для вебмастера

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

Window Resizer 

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

Colorzilla 

Полезный плагин для веб-дизайнеров, который содержит сразу несколько инструментов для работы с цветом: пипетка (Eyedropper), панель выбора цвета (Color Picker), генератор градиентов, а также анализатор цветовой гаммы, который можно задействовать по отношению к любой веб-странице. Скачать дополнение

RDS Bar 

После его установки в браузере Chrome появляется дополнительная панель инструментов, с помощью которой можно провести быстрый анализ основных показателей сайта – индексация страниц в основных поисковых системах, показатели тИЦ, PR и т. д. Скачать дополнение

Firebug Lite 

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

BuiltWith Technology Profiler 

Расширение позволяет проанализировать любой посещаемый вами сайт на предмет используемых на нем веб-технологий, вплоть до интегрированных сервисов, таких как счетчик FeedBurner и виджет Twitter. Например, если сайт работает под управлением WordPress, плагин может даже вывести список названий основных используемых плагинов. Скачать дополнение

MeasureIt!  

Этот плагин для Chrome выполняет всего одну функцию, но в некоторых случаях очень нужную – позволяет измерить расстояние или размер в пикселях любого элемента страницы. Некоторые пользователи отмечают, что для того, чтобы расширение заработало, необходимо перезапустить браузер. Скачать дополнение

Font Editor 

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

CSSViewer 

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

HoverZoom 

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

WordCount 

Небольшое расширение, предназначенное для выполнения одной функции – подсчета количества слов и знаков в выделенном пользователем фрагменте текста. После установки добавляет соответствующий пункт в контекстное меню, появляющееся после клика правой кнопкой мышки. Скачать дополнение

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

www.imagecms.net

25 полезных Chrome-расширений для веб-разработчиков

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

Расширение способно работать с сайтами, реализованными при помощи технологий Java, Flash, Flex, Ajax и Silverlight.

Расширение для тех, кто любит «поиграть со шрифтами» — позволяет экспериментировать со всем спектром шрифтов из библиотеки Google Fonts, не внося изменений в код страницы. Можно менять не только сам шрифт, но и его размер, стиль написания и так далее.

Пригодится, по словам автора материала, для того, чтобы проверить, как выглядит шрифт, перед тем, как вносить фактические изменения в код страницы.

Расширение для Google Chrome, которое позволяет выделять и копировать текст даже с картинок — будет полезным, по мнению Cretive Bloq, всем, кому хоть раз в своей работе приходилось иметь дело со встроенным текстом.

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

YSlow — инструмент, который не только проверяет скорость загрузки той или иной веб-страницы, но и подсказывает разработчику, что её тормозит. Для этого расширение проверяет сайт на соответствие 23 из 34 правил производительности, сформулированных командой компании Yahoo.

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

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

Позволяет в автоматическом режиме сохранять любые изменения, внесённые в код страницы при помощи инструментов Chrome DevTools. Как отмечает автор материала, инструмент помогает разработчикам сэкономить большое количество времени.

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

Ripple Emulator — расширение-эмулятор для Google Chrome, которое позволяет тестировать веб-сайты на различных мобильных платформах с различными разрешениями экрана. Может быть использовано в сочетании с другими расширениями для тестирования и отладки ресурсов.

Streak — расширение, которое позволяет превратить почтовый ящик на Gmail в CRM-систему. Можно отслеживать статус сделок и переговоров, которые ведутся в электронной почте с контрагентами, использовать Streak для обработки запросов пользователей продукта и отслеживания исправлений присланных ошибок и так далее.

Расширение для быстрого поиска по популярному ресурсу для разработчиков Stack Overflow.

Позволяет получить мгновенный доступ к документации по PHP 5.5 из браузера.

PerfectPixel — расширение для Google Chrome. Оно позволяет «наложить» на веб-страницу полупрозрачную сетку и сверять по ней заданные расстояния. Можно накладывать и другие изображения — например, первоначальный макет — чтобы убедиться, что получившаяся страница в точности ему соответствует:

Инструмент для просмотра исходного кода страниц и редактирования CSS-кода.

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

Расширение для браузера, которое определяет, какие JavaScript-библиотеки, фреймворк или CMS используются на ресурсе.

User-Agent Switcher — это расширение, которое позволяет «маскировать» браузер Google Chrome под Internet Explorer, Opera или любой другой браузер.

Встроенный эмулятор Internet Explorer для Chrome.

Простой и бесплатный онлайн-редактор изображений. Позволяет «захватывать» изображения или делать скриншоты браузера — и сразу же редактировать их при помощи расширения для Chrome.

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

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

Расширение, которое проверяет веб-страницу на наличие «битых» или неправильных ссылок.

Расширение, которое помогает не столько в разработке, сколько в поиске вдохновения и хороших фотографий. Показывает на каждой новой вкладке в Google Chrome одно изображение с сервиса Flickr. При нажатии на него пользователь переходит на страницу автора, где может ознакомиться с другими его работами.

Расширение для браузера, похожее на предыдущий плагин в этом списке — только вместо фотографий из Flickr в новой вкладке пользователь видит признанные произведения искусства — например, полотна кисти Ван Гога или Мане.

Официальное расширение от Google для сжатия трафика, которое включает экономию трафика в браузере Google Chrome.

vc.ru

Смотрите также

• 
  Просмотр кэша браузера
• 
  Настроить мобильный браузер
• 
  Браузер тор mac
• 
  Без истории браузер
• 
  Браузеры поддерживающие webgl
• 
  Сохранение настроек браузеров
• 
  888 через браузер
• 
  Печать в браузере
• 
  Презентация в браузере
• 
  Сделать основным браузером
• 
  Браузеры для ipad