SEO, заработок в Интернете, блоггинг, работа в компьютерных программах

Расширение Firebug для Firefox и Chrome

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

Установка Firebug в Firefox
Устанавливается также как и любое другое дополнение Firefox. Вот страница плагина. Нажимаем кнопку «Добавить в Firefox» и радуемся установке такой нужной фичи для любого вебмастера.

Cтраница плагина Firebug

Cтраница плагина Firebug

Установка Firebug в Firefox в браузер Chrome
В браузер Chrome это расширение ставится так же просто. Переходим в «настройки» — «расширения» — «ещё расширения», вбиваем в строку поиска слева вверху слово «firebug» и видим нужный плагин. Осталось только клацнуть по кнопке «установить».

Firebug в Chrome

Firebug в Chrome

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

кнопка

кнопка

Функционал и использование

Firebug позволяет просматривать и редактировать HTML код, Javascript и CSS любой страницы, причём результат редактирования вы будете видеть прямо в браузере в режиме реального времени.

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

Для исследования любого элемента на странице нажимаем указанную на рисунке ниже кнопку инспектирования и наводим её на любой элемент страницы. В левом окне панели видим HTML код данного элемента, а в правом стили CSS. Редактируем то что нам нужно прямо в панели и сразу визуально можем оценить изменения.

Запуск плагина

Запуск плагина


панель

Панель плагина

Пример: Допустим мы решили поменять цвет ссылок на сайте. Запускаем Firebug, нажимаем кнопку инспектирования и наводим на нужный нам элемент (в данном случае любая ссылка). Вокруг ссылки появляется синяя рамка, это значит что элемент инспектируется. В правом окне видим стили ссылок. В данном случае нас интересует «a color», кликаем прямо значению цвета #2486D2 и вписываем на место старого новый цвет.

панель

панель управления плагином

Например вместо #2486D2 вписываем #CC0000. Сразу все ссылки на странице меняют цвет на указанный нами. Мы можем оценить подходит ли нам новый цвет и заменить его на любой другой либо оставить.

меняем цвет ссылок

меняем цвет ссылок

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

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

Подписка на новые статьи. Введите e-mail:

Понравилась статья? Следи за новостями блога по Лента RSS RSS или в Обновления блога на Twitter Twitter !
Вернуться на Главную страницу
Комментарии (5)
  1. Данилкин

    Удобная вещь, надо будет попробовать...

  2. Владимир

    Спасибо! Обязательно опробую.

  3. Антон

    дело хозяйское) я пользуюсь иногда.

  4. Олег

    У меня стоит, но я ним толком т не пользуюсь.

  5. Антон

    да я тоже далеко не каждый день. всё таки не разработчик, но порой бывает очень нужен.

Ваш комментарий