Здравствуйте, уважаемые читатели. Речь пойдет об очень важном инструменте разработчика — Firebug. Далее я расскажу как его установить и использовать.
Не могу не сказать о том, что данный инструмент напрямую связан с основополагающими кирпичиками сайтостроения — языком разметки HTML и каскадными таблицами стилей CSS. Кто еще не решил, стоит ли тратить время на их изучение, скажу однозначно — стоит! Без этих знаний Вам будет намного сложнее разобраться в коде страницы и понять, как правильно вносить изменения в верстку макета.
htmlbook.ru — это замечательный ресурс о HTML и CSS. На нем Вы найдете исчерпывающую информацию, самоучители и, что очень важно, примеры использования всех тегов и стилей. Рекомендую добавить в закладки и регулярно им пользоваться.
Furebug является дополнением к браузеру Firefox. Используется для нахождения и корректировки определенного места в коде, т.е. с его помощью Вы можете редактировать HTML и CSS код и сразу после внесенных изменений видеть последствия этих изменений в браузере. Согласитесь, очень удобно!
Шаг 1
Устанавливаем последнюю версию браузера Firefox
Шаг 2
Скачиваем Firebug, скачать можно здесь
Шаг 3
Нажмите на зеленую кнопку «Добавить в Firefox».
Далее Firefox предложит перезагрузить браузер для активации плагина.
Шаг 4
После перезагрузки в нижнем правом или верхнем правом углу окна браузера появится значок в виде жука.
Теперь давайте посмотрим как им пользоваться.
Шаг 5
Жмем на значок с жуком. Внизу окна браузера появилось окно плагина. Нажмите на стрелку, затем наведите курсором на нужный элемент страницы и Firebug покажет массу информации о выбранном объекте. Вы увидите, как располагается выбранный элемент в HTML коде, отображая все вложенные слои. Также узнаете, какие CSS стили относятся к данному элементу. Выбранный элемент будет в синей рамочке, на примере это один из пунктов меню «Главная», Рис. 1
На рис.2 показаны CSS стили относящиеся к пункту меню «Главная», так же мы можем видеть, что в файле стилей style.css в строке 73 прописан рассматриваемый нами код.
Можете менять значения HTML и CSS, результат изменений увидите сразу же на открытой странице браузера. Если полученный результат не устраивает, вносите изменения дальше или перезагружаете страницу и находите нужный объект снова по той же схеме. Помните, после перезагрузки страницы, страница загрузится в ее естественном виде, ведь изменения вносились лишь визуально, мы ведь не сохраняли их в файле стилей style.css. Если внешний вид изменений устраивает, тогда в файле стилей находите нужную строку (на примере это строка 73) и, внеся изменения, сохраняете их. Теперь окончательный вариант правок сохранен, и Вы можете любоваться им при каждой загрузке страницы.
Шаг 6
Плагин так же позволяет посмотреть скорость загрузки объектов страницы в миллисекундах. Нажмите «Сеть» и обновите страницу. Результат показан на рисунке ниже в столбце «Временная линия».
Поработав с данным плагином, Вы очень быстро убедитесь в его удобстве и незаменимости для разработчика.
Пишите Ваши комментарии и не забывайте нажать на кнопочку — этим вы очень поможете нам.