FirebugУрок №51

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

Для чего нужен Firebug

Данное приложение позволяет нам просматривать html и CSS коды открытой страницы, а так же отдельные её элементы и блоки. Но самое главное достоинство FireBug в том, что он позволяет нам редактировать коды страницы, без реальных изменений в сайте.

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

Установка FireBug

Приложение является абсолютно бесплатным и делает его доступным для всех. Устанавливать его я рекомендую как и все другие приложения на Mozilla Firefox.

Устанавливаем приложение FireBug с официального сайта

Установка приложенияПосле установки проверяем активировано ли приложение. Затем закрываем и открываем заново браузер, дабы изменения вступили в силу.

Как работать с FireBug

Работать с приложением очень просто. Рассмотрим на примере. Проверим как выглядит код заголовка статьи  и попытаемся изменить его размер.

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

  1. жмёте на значок FireBug.
  2. щёлкаем по элементу на панели.
  3. выбираем блок который будим анализировать.
  4. находим его отображение в низу на панели.
  5. нажимаем на редактирование.

Как работать с FireBug

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

Отображение кода

Теперь внесём изменения, я пропишу новое название статьи и изменю размер. Для этого я заменю название и оберну код в h3. Вот что получилось:

Редактирование кода

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

Повторюсь, всё это видите только вы. как только вы закроете FireBug и обновите страницу. Все вернётся в исходный вид.

Это только одна из полезных функций данного приложения. В дальнейшем мы будим ещё не раз прибегать к помощи FireBug.

Комментариев: 5

  1. Storky

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *