Firebug — как пользоваться лучшим плагином для вебмастеров


Содержание материала:

Плагин Firebug — как пользоваться firebug при создании сайта

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

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

А точнее не сам браузер, а дополнение к нему.

Итак, встречайте, сегодня я Вам расскажу о таком незаменимом плагине для Mozilla Firefox, как Firebug .

И первый вопрос: Что же такое Firebug?

Firebug — это расширение для браузера Mozilla Firefox, которое является консолью для отладки и выявления ошибок, возникающих при разработке сайта.

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

Как установить Firebug?

Установка Firebug довольно проста. Для начала запускаем Mozilla Firefox (Firebug устанавливается только на этот браузер) и переходим по ссылке: firebug.ru. Находим там кнопку «Установить Firebug». Нажимаем на нее и попадаем на станицу установки дополнений для Firefox.

Нажимаем на кнопку «Добавить в Firefox». Происходит загрузка плагина и появляется окно:

Нажимаем «Установить сейчас». Все. Установка завершена.

Для того, чтобы плагин заработал, нужно перезагрузить браузер Firefox. После перезагрузки в панели браузера появится кнопка включения расширения Firebug.

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

Способов использования Firebug довольно много, так как он содержит множество инструментов. Все их описывать я не буду. Расскажу только про некоторые основные.

Во-первых, Firebug позволяет быстро находить нужные фрагменты кода и определять для них правильные селекторы, чтобы назначать им css-стили. А также показывает в каком файле и в какой строке прописаны стили для выделенного фрагмента кода или селектора.

Во-вторых, Firebug дает возможность подбирать параметры атрибутов в режиме реального времени без перезагрузки страницы и необходимости править какие-либо файлы.

В-третьих, Firebug позволяет отследить иерархию контейнерной модели, подсвечивая в окне браузера параметры выбранного блока разными цветами (отступы margin, pading, границы). Также в Firebug есть удобный инструмент для анализа макета блока и изменения атрибутов «на лету».

В-четвертых, Firebug содержит удобные инструменты для анализа скорости загрузки страницы и много еще чего интересного.

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

А я приготовил Вам небольшое видео. Несколько примеров использования Firebug. Смотрите:

На этом заканчиваю статью. Очень рекомендую всем пользоваться данным дополнением, а также получать новые статьи на e-mail, чтобы не пропустить новые интересные и полезные статьи.

Как пользоваться Firebug

В этой статье вы узнаете все об использовании Firebug в Firefox. Файрбаг это плагин, который будет полезен всем блоггерам, оптимизаторам, верстальщикам и вебмастерам. Он расширяет возможности браузера Mozilla для тех людей, кто работает над сайтами.

Что умеет Firebug

Плагин Firebug имеет следующие возможности:

  1. инспектирование и редактирование HTML, JavaScript кода, DOM
  2. отладка и логирование JavaScript кода
  3. выполнение JS напрямую через командную строку
  4. автоматический поиск ошибок в JavaScript, XML, CSS
  5. инспектирование и редактирование CSS-стилей
  6. отображение CSS-метрик
  7. отображение сетевых запросов при загрузке сайта

Пользователи Google Chrome могут обратить внимание, что это стандартные функции встроенные в Хром (доступные по нажатию F12), но выбор браузера — щепетильное и личное дело, поэтому кому-то удобнее пользоваться Firefox с плагином Firebug.

Ссылка для скачивания плагина Firebug (актуальная версия 2.0.17): https://addons.mozilla.org/ru/firefox/addon/firebug/

Успешная установка ознаменуется появившимся значком в виде жука.

Читайте и другие полезные статьи:

  • Как ускорить загрузку сайта на WordPress и Joomla: https://7bloggers.ru/kak-uskorit-zagruzku-sajta/
  • Подборка трех десятков плагинов для Mozilla Firefox (Мозилла Фаерфокс)
  • Как создать кошелек WebMoney быстро и бесплатно: подробная иструкция тут.

Использование Firebug в верстке

Для того чтобы быстро посмотреть участок кода сайта (свойства CSS-стилей и пр.), нажмите правой кнопкой по элементу, затем нажмите «Анализировать элемент» («Inspect», F12, Ctrl+F12 — для открытия в новом окне). Плагин покажет вам и участок кода, и какие css-стили формируют его внешний вид, при этом сам html-код будет подсвечиваться синим.

После этого, мы можем отредактировать HTML «на лету». Для чего это нужно? Чтобы быстро посмотреть, как будет смотреться измененный код на сайте — для того чтобы не пересохранять по 10 раз исходные файлы на сервере, а сделать это лишь добившись необходимого результата при помощи плагина. И потом уже вносить изменения.

Также неоспоримым плюсом подобного «редактирования в браузере» является тот факт, что изменения происходят локально — их видите только вы. Особенно актуально это для высокопосещаемых вебсайтов, где мы не можем позволить себе внедрять HTMS+CSS код не проверив его на ошибки (искажение сайта).

Есть два варианта использования Firebug для поиска нужного куска кода. Первый — водить мышкой по сайту и тогда в окне плагина будет подсвечиваться соответствующий HTML код. Второй — водить мышкой по HTML коду в окне плагина и тогда будут подсвечиваться элементы на сайте, соответствующие коду, на который указывает мышь. Все это работает мгновенно и динамически, что позволяет быстро разобраться, сориентироваться в коде своего или чужого сайта.

Только не забудьте нажать кнопку для включения этой функции:

Затем, найдя нужный элемент, щелкните по нему левой кнопкой и перейдите к окну Firebug чтобы работать над кодом.

При этом элементы можно сворачивать и разворачивать — для компактного вида они сворачиваются по тегам: div, p, link и пр.

Как пользоваться Firebug для редактирования CSS

Очень просто. Если в левом окне у нас HTML код, то в правом — CSS-стили, которые можно на лету редактировать и наблюдать за изменениями в оформлении сайта.

Использование плагина firebug для работы с CSS предусматривает следующие сценарии:

1. Отключение CSS-стилей по клику (нажмите на кружочек, чтобы выключить какое-нибудь свойство)
2. Поиск файла .css из которого подгружаются стили к определенному элементу (а также поиск конкретной строки в этом файле, чтобы было удобно вносить изменения и редактировать таблицы каскадных стилей):

Как использовать плагин Firebug чтобы измерить скорость загрузки вашего сайта

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

И в этом нам тоже поможет чудесный плагин. Как это посмотреть? Перейдите на вкладку «Сеть» в плагине и обновите страницу на которой находитесь. После этого вы получите раскладку — какие элементы сколько грузятся, в каком порядке и какой ответ дает сервер при запросах к элементам. Эта информация позволит оптимизировать сайт и работать над ускорением загрузки.

Вот и все, теперь вы знаете как использовать и работать с плагином файрбаг, используя его как визуальный редактор сайта. Зачем? Задачи разные: поправить форму поиска или подписки, поиграться со шрифтами и размерами текста и заголовков, найти HTML-код элемента чтобы удалить его и многие другие бытовые задачи, стоящие перед вебмастерами и блоггерами.

Firebug для Firefox! Как пользоваться расширением Firebug?

Сегодня я расскажу вам об одном очень полезном расширении для браузеров Firebug! Плагин Firebug или в переводе с английского языка «огненный жук», является настоящим прорывом эволюции в мире интернета и заслуживает особого внимания!

Возможно, для рядовых пользователей всемирной паутины плагин не принесет никакой пользы. Но, если вы являетесь веб мастером, и имеете в наличии свой собственный ресурс, firebug вам придется по вкусу! А если вы еще и начинающий верстальщик, то он для вас окажется просто незаменимым помощником. Итак, чем же так хорош этот огненный жук?

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

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

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

Со всем этим и не только вам поможет справиться плагин Firebug. И это я перечислил только основные рабочие моменты, с которыми приходится частенько сталкиваться веб мастерам. На самом деле плагин имеет еще массу других возможностей, но о них я не буду рассказывать в рамках данной статьи. Быть может, как-нибудь позже, но не сегодня.

Конечно же, сделать все то, что я перечислил, можно и без плагина. Например, если вам нужно отыскать участок кода, отвечающий за вывод времени и даты, можно нажать на соответствующей странице браузера правую кнопку мышки и выбрать из выпадающего списка пункт «Исходный код страницы» или воспользоваться горячей клавишей Ctrl + U.

Но в этом случае перед вами предстанет HTML — код всего содержимого открытой страницы, а вам нужен только участок, отвечающий за вывод времени и даты. Так как же тогда поступить? Придется внимательно просматривать весь код в поисках нужного. А если вы вообще не разбираетесь в HTML, то поиск будет бесполезен. Что же в этом случае предлагает нам огненный жук?

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

Firebug вам ту же выведет интересующий вас участок кода, подсветив его синим цветом:

Но и это еще не все. Вы тут же можете внести необходимые изменения в код, не боясь напортачить! Дело в том, что плагин позволяет редактировать HTML и CSS коды, наблюдая в реальном времени за всеми происходящими изменениями. И самый большой плюс, что их будете видеть только вы.

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

Каждый пользователь сети интернет отдает предпочтение одному из понравившихся браузеров. Браузер — это программное обеспечение для запроса и просмотра веб-страниц. В наше время наиболее распространенными из них являются Mozilla Firefox и Google Chrome.

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

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

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

Firebug для Firefox


Скачать firebug для firefox можно на этой странице . На данный момент последней версией плагина является 1.12.6. Как вы уже, наверное, догадались, установка должна производиться из браузера Mozilla Firefox. Для скачивания плагина достаточно нажать на кнопку «+ Добавить в Firefox» и в появившемся окне «Установить сейчас»:

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

Если вдруг он по каким-то причинам у вас не появился, то запустить расширение можно с помощью «горячей клавиши» (F12).

Firebug для Chrome

Если вы пользуетесь браузером Google Chrome, то в этом варианте установки, открыт, должен быть именно он. Скачать firebug для chrome можно перейдя по этой ссылке . Далее, кликаем по кнопке «+ Бесплатно» и в появившемся меню жмем «Добавить»:

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

Как пользоваться Firebug

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

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

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

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

Как видно из скриншота ниже, я навел курсор мышки на участок кода

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

В этом примере я навел курсор мышки на все то же основное меню блога и плагин подсветил мне участок кода, отвечающий за его вывод:

Что еще хочется сказать? Вы должны знать, что любая современная верстка сайта осуществляется при помощи блоков, заключенных в так называемые контейнеры div (блочная верстка). Вы их можете наблюдать на скриншоте выше.

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

Как редактировать HTML — код с помощью плагина Firebug

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

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

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

Дело в том, что все шаблоны написаны на языке программирования, который носит название php. А при открытии страницы в браузере она преобразуется в HTML — код. И если вам понравится реализованное вами изменение, то для его воплощения придется копаться в файлах шаблона, чтобы отыскать нужный код для редактирования.

Как поступить в этом случае? Для начала, вам необходимо знать, какой из файлов шаблона отвечает за отображение того или иного элемента на блоге. Со структурой шаблона вам поможет разобраться моя прошлая статья, там все подробно расписано.

После того, как нужный файл будет найден, вам потребуется зацепиться за один из классов или id (идентификаторов). Если брать все тот же пример с меню, я бы рассуждал так:

    За верхнюю часть ресурса (шапка блога) отвечает файл шаблона header.php. А далее смотрю на код в панели плагина Firebug и вижу, что все меню заключено в контейнер с классом Menu ( >Здесь дела обстоят намного проще, нежели в предыдущем пункте. Все свойства CSS отображаются в правом окне плагина firebug и отвечаю за выделенные фрагменты HTML — кода правого окна. Как я уже сказал, CSS свойства необходимы для корректного отображения внешнего вида дизайна вашего ресурса.

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

Как видно из примера ниже, я отключил позиционирование основного меню блога (выключил position: absolute;) и меню уехало в верхнюю часть страницы:

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

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

Я запущу Firebug в Firefox и найду нужный мне участок кода, вы уже знаете, как это сделать. За синий цвет ссылки на моем блоге отвечает строчка color: #1821B5 (#1821B5 — это код цвета). Мне нужно изменить 1821B5 (синий цвет) на 2d8324 (зеленый цвет). В итоге я увижу нужные мне изменения:

Если цвет меня полностью устраивает, то я перехожу в файл шаблона style.css и меняю значение старого цвета, на новое. Но как отыскать нужный участок кода в файле style.css, отвечающий именно за цвет строчки «Читать запись полностью >>»?

Все очень просто! Если вы внимательно посмотрите на приведенный выше скриншот, то увидите что плагин firebug дает нам подсказку, которую я выделил красным контуром. В данном примере он нам говорит, что нужный участок кода находится в файле style.css (строка 18).

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

На этом пост про плагин firebug для firefox я буду завершать! Надеюсь, он вам принесет много пользы, и теперь вы с легкостью сможете отредактировать несложные элементы на своем блоге с помощью замечательного инструмента Firebug. Я же с вами прощаюсь и жду вас в следующих статьях! Всем пока!

—>Подписаться на обновления блога

Как вам статья? А вы используете расширение firebug? Жду ваши комментарии!

Firebug — как пользоваться лучшим плагином для вебмастеров

Удобно, когда изменять оформление сайта и находить ошибки в его работе можно прямо в браузере в процессе работы с сайтом. Для этого у различных браузеров предусмотрен свой функционал. Например, Средства разработчика в Internet Explorer или Dragonfly в Opera. У браузера Mozilla Firefox для этих целей есть целое меню «Веб-разработка» и замечательное расширение Firebug , которое сделает жизнь любого вебмастера чуть-чуть легче. О возможностях Firebug мы и расскажем в сегодняшней статье, узнаем как пользоваться этим полезнейшим расширением.

Firebug устанавливается как стандартное расширение для Mozilla Firefox и совместимо с последней 8-ой версией этого замечательного браузера. Чтобы добавить Firebug в Firefox достаточно зайти на страничку расширения https://addons.mozilla.org/ru/firefox/addon/firebug/ или официальный сайт Firebug http://getfirebug.com и запустить его установку.

После перезапуска браузера в правом нижнем углу Firefox появится иконка симпатичного жучка. Кликните по ней, чтобы открыть окно Firebug.

Firebug, прежде всего, используется для редактирования CSS и HTML в режиме реального времени, отладки JavaScript и оптимизации загрузки страниц. Для этих целей в Firebug имеется 6 режимов отладки веб-страниц. Каждый режим представлен отдельной панелью в окне Firebug. Рассмотрим их подробнее.

Консоль. Данная панель позволяет просматривать ошибки на сайте и выполнять различные команды. Типы ошибок, которые будет отлавливать Firebug, можно выбрать из списка, кликнув по значку со стрелкой. Как видите, перечень ошибок и предупреждений довольно внушителен.

Как правило, здесь выбирают только те ошибки, которые требуется выявить в данный момент. Затем, после их обнаружения и исправления, можно выбрать все пункты и еще раз «прогнать» сайт, произведя финальное тестирование.

Если ошибка связана со сценарием JavaScript, то одним кликом по ней можно перейти в режим отладки сценариев.

Отладка JavaScript производится на панели Сценарии. Здесь можно добавлять точки останова, запускать скрипты, отслеживать стек вызовов. Данный функционал незаменим при создании сайтов на Ajax.

Если ошибка на сайте связана с разметкой страницы, то кликнув по ней в консоли, вы попадете на панель HTML. Здесь отображается код страницы, загруженной в данный момент в браузер. Панель позволяет не только просматривать, но и редактировать HTML-код страницы. Для этого дважды кликните по нужному параметру либо кликните правой кнопкой мыши по выделенному коду и в контекстном меню выберите команду «Редактировать HTML».

Для обнаружения ошибок в HTML-коде сайта удобно использовать инструмент «Инспектировать». Нажмите кнопку со стрелкой и подведите курсор мыши к проблемному месту страницы.

Вы увидите код подсвеченного на странице элемента, а чуть правее – стили CSS, применяемые к данному элементу.

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

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

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

Редактирование CSS происходит в двух режимах:

Правка кода – правка исходного кода CSS в том виде, в котором он загружен браузером;

Живая правка — правка исходного кода CSS в том виде, в котором он извлечен из браузера.

Второй режим целесообразно использовать, если CSS формируется «на лету», например в результате выполнения сценариев.

DOM – Document Object Model или Объектная Модель Документа. Данная панель содержит иерархию объектов на открытой в браузере веб-странице. Как вы, вероятно, знаете самый главный объект в этой системе – объект window (окно). Далее объекты располагаются по мере вложенности — иерархии. При необходимости можно просматривать свойства того или иного объекта, и даже изменять их по клику мыши, тотчас видя результаты внесенных изменений на экране.

И, наконец, панель Сеть. Она показывает загрузку всех файлов на веб-странице, будь то каскадные таблицы стилей, запросы, сценарии JavaScript или обычный HTML. Здесь же можно оценить время загрузки тех или иных файлов, которое отображается в виде индикатора и измеряется в миллисекундах и секундах.

При наведении мыши на индикатор вы увидите точную раскладку по количеству потраченного на загрузку времени.

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

Как видите, расширение Firebug для браузера Mozilla Firefox предоставляет вебмастеру удобные и функциональные инструменты не только для решения проблем, но и проведения экспериментов с веб-страницами в реальном времени. Например, изменению стилей CSS и HTML-кода сайта. Мы узнали как пользоваться Firebug для Moziila Firefox. Ждем вопросы на форуме.

Как пользоваться FireBug для FireFox

Здравствуйте, уважаемые читатели! Сегодня речь пойдет об очень важном инструменте верстальщика — бесплатном дополнении Firebug для FireFox. Лозунг на сайте разработчиков гласит — «Эволюция web-разработки». Не верьте этому! Firebug -это настоящая революция web-разработки. После знакомства с Firebug вы будете недоумевать, как обходились без него раньше.

До того, как я связался с web технологиями, моим любимым браузером была Opera. Быстрая, легкая, удобная. И все-то меня в ней устраивало, но чем дальше я погружался в изучение html и css, тем чаще встречал упоминания о бесплатном дополнении Firebug для FireFox. «Подумаешь, какое-то дополнение! Неужели ради него стоит менять браузер?!» — думал я тогда. Практика показала, что стоит. Попробовав один раз в действии Firebug, я уже не мог работать без него. Это действительно очень важный инструмент веб-мастера. Без него, как без рук. Скоро Вы в этом сами убедитесь.

Аналоги FireBug есть и в других браузерах, но они не идут ни в какое сравнение с оригиналом. Быть может я просто очень привык к оригинальному FireBug и все иное мне кажется чуждым и неудобным.

Как установить FireBug в FireFox

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

Устанавливается FireBug очень просто и быстро. Откройте браузер FireFox и зайдите на страницу, посвященную данному дополнению.

На момент написания этих строк дополнением FireBug уже пользуются более 3 миллионов человек. Давайте присоединимся к ним. Нажимаем на кнопку «Добавить в FireFox».

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

Как пользоваться FireBug


Включить панель FireBug можно нажатием кнопки F12. По умолчанию она появляется в нижней части экрана. Положение панели можно изменить. Для этого зайдите в опции (иконка жука в левом углу панели) и выберете пункт Положение окна.

Основной закладкой является «HTML». Именно в ней предстоит нам работать большую часть времени. Окно разбито на две части:

  • Слева представлен исходный код страницы;
  • Справа — стили css.

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

  • голубой цвет показывает ширину элемента;
  • темно синий — поля (padding);
  • светло желтый — отступы (margin).

Картинка ниже кликабельна.

При выборе тэга, нажатием левой клавиши мыши, в правом окне отобразятся его css стили. В самом верху будут указаны стили именно этого html тега, ниже пойдут унаследованные стили. Если какой-то атрибут зачеркнут, значит он не работает (переопределен). Кроме этого, указывается файл css и номер строки в нем, где тот или иной стиль определен.

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

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

FireBug — это большая песочница для экспериментов. Когда вы нашли правильный вариант, просто перенесите его в ручную в файлы html и css.

Что еще есть интересного:

  • На закладке «Консоль» можно посмотреть ошибки JavaScript, HTML и CSS — полезная информация для отладки.
  • На вкладке «Сеть» имеется информация по запросом: статус, размер, удаленный IP и время исполнения.
  • Вкладка «Page Speed» позволяет протестировать скорость загрузки страницы. Оценка ставится по 100 бальной шкале. Кроме этого, даются полезные совету, которые позволят улучшить данную характеристику.

Пример практического использования FireBug

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

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

Ко мне время от времени обращаются люди за помощью. Благодаря FireBug найти злосчастный элемент и его стили несложно.

Последний раз я интегрировал форум в тему Sento . Рассмотрим порядок действий.

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

Как видите, сайдбар исчез, но осталось пустое место. Его то и следует убрать.

2. Включаем наш инструмент нажатием кнопки F12.

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

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

В данном случае я нашел тэг div с классом span-16. Заметьте, что стили прописаны не в стандартном файле style.css, который находится в корневом каталоге темы, а в файле screen.css, расположенном в папке css. Так что будьте внимательнее, чтобы не пришлось искать стили там, где их нет.

5. Открыть файл screen.css, найти класс span-16 и поменять параметр width легко, но это будет ошибкой. Другие страницы WP тоже используют div с классом span-16, так что они после таких изменений просто расползутся. Следует открыть шаблон pageforum.php и переименовать класс span-16. Дайте ему новое, нигде не задействованное имя. Для этого нового класса пропишите параметр width в файле со стилями. Таким образом, изменения будут внесены только в страницу для форума.

Вот так быстро и просто FireBug позволяет находить нужные html тэги и их стили.

Напоследок хочу сказать, что FireBug становится абсолютно бесполезным в том случае, если вы не знаете хотя бы основ html и css. Изучить их несложно, нужно только захотеть. Если вы ведете блог или сайт, то рано или поздно эти знания вам понадобятся. Лично я получил их из бесплатного мануала «Самоучитель HTML и CSS» за авторством Влада Мержевича. Конечно, этот мануал не сделает из вас профессионального верстальщика, но базовые знания вы точно получите.

На этом на сегодня все. Спасибо а внимание и до новых встреч.

Лучший способ выразить благодарность автору — поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

Эти статьи Вам могут быть интересны:

Добрый вечер Дмитрий . У себя на сайте подшаманил все супер вышло благодаря надстройке FireBug на базе Mozilla Firefox. Но возникли некоторые вопрос, как в самом форуме при реестрации встроить капчу . Помогите разобратся в следуещей своей стате, буду очень признателен . И еще небольшой дополнительный вопросик к Вам лично как отличному Seo-шнику , почему Вы невнесли свой сайт в каталог Dmoz или хотябы Я.Каталог от етого Ваш сайт только бы прибавел в масе посетителей и рейтенге . что несомнено сказалось на Вашых доходах .

Топ-пост этого месяца:  Модуль оформления заказа для OpenCart. Часть 2

Доброе утро, Олег! Я смотрю, уже включил капчу от Captcha Code. Я как раз ее хотел посоветовать.

Что касается каталогов. В Dmoz дважды подавал заявку, но пока никак не берут. А в ЯК прорваться бесплатно по моей тематики не реально. Только за деньги, а это почти 15 000. Для меня это многовато.

Очень удобное расширение постоянно им пользуюсь. С помощью пейдж спид получилось на много ускорить блог))

Да, очень полезная вещь PageSpeed . Забыл о ней рассказать в этом посте.

Дмитрий добрый вечер . Операция у малой прошла нормально, остается денюшки искать ))) без них никуда. А относительно этой стати хочу посоветовать дополнение СSS Usage 0.3.0 это надстройка к FireBug нажатием одной кнопки можно выяснить какие CSS правила не используются и дают возможность их почистить, это круто Дмитрий

Доброе утро, Олег! Рад, что у тебя все хорошо! Надо будет попробовать этот СSS Usage 0.3.0 в действии.

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

Осторожно, данное расширение вызывает привыкание.

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

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

Никак не могу установить последнюю версию firebug , пишет не совместим с версией firefox 56.0??

Thanx for sharing such useful post keep it up

Pretty helpful material, much thanks for this article

by visiting this site I found cool stuff here keep it up.

only professional writers can make this kind of material, cheers

Руководство по FireBug для веб-мастеров

Дата публикации 28 Апрель 2015 . Опубликовано в Полезные программы

Firebug – бесплатный плагин для браузера Mozilla Firefox, одной из функций которого является работа с исходным кодом веб-страницы. С помощью расширения FireBug можно просматривать код страницы, редактировать или удалять элементы и атрибуты «на лету», при этом Вы можете просматривать результаты изменений на веб-странице в реальном времени. Т.е. при внесении изменения в код, страница браузера немедленно обновляется, отображая эти изменения в окне браузера. Бывает, что вам понравилось то или иное решение веб-мастера на чужом ресурсе, FireBug вам поможет подсмотреть как это работает и реализовать эти стили на своем сайте.

Установка расширения FireBug

Щелкните левой клавишей мышки в браузере Mozilla Firefox значок «Инструменты» и в выпадающем окне выберите «Дополнения», затем в поисковом окошке введите «FireBug» и нажмите клавишу «Enter». Найдите в появившемся списке расширений плагин Firebug и кликните большую зеленую кнопку «Add to Firefox».
После установки плагина Firebug в верхнем углу браузера Mozilla Firefox появится значок в виде жучка, а это значит, что данное дополнение успешно установилось.

Как запустить Firebug

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

Код интересующего нас элемента будет виден в открывшемся внизу страницы окне, при этом участок кода, который отвечает за выбранный элемент веб-страницы, будет подсвечен синим цветом.
Запустить Firebug можно также с помощью комбинации клавиш «Ctrl» + «F12» либо щелкнув по жучку в правом верхнем углу экрана. А если нажать клавишу «F12», то Firebug откроется в новом окне браузера.

Редактирование HTML- кода в FireBug

В левой половине окна плагина FireBug отображаются HTML — теги открытой в браузере веб-страницы. Здесь можно просматривать вложенность друг в друга тех или иных контейнеров, д ля открытия содержимого контейнера нужно нажать на плюсик рядом с ним, а также можно свернуть его, щёлкнув ещё раз. Для удобства перемещения по элементам можно использовать стрелки навигации на клавиатуре (смещает синее выделение элемента).

Если Вы подведете мышку к div- контейнеру в левой части окна Firebug, то сможете видеть, какие элементы открытой веб-страницы входят в этот div-контейнер.

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

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

Хочу обратить Ваше внимание на то, что когда Вы кликаете мышкой по элементу в панели HTML-кода, то во второй строке сверху панели плагина отображается порядок вложения элементов HTML. По этой строке можно прослеживать наследование CSS-свойств.

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

Но если вы решили окончательно внести изменения в Html- код, то окажется, что отыскивать тот файл, который генерирует данный участок Html- кода не так-то просто.

Внимание! Firebug выводит в панель HTML не только тот код, который хранится у Вас на сайте в HTML — файлах, но также и сгенерированный php-код.


Дело в том, что в отличие от обычного исходного HTML- кода, плагин Firebug учитывает все изменения в коде после его преобразования через JavaScript. Вероятнее всего, искомый Вами файл будет иметь расширение «php», и этот участок в нем может выглядеть совсем не так, как в исходном коде веб-страницы. Как же найти в каком файле формируется нужный нам фрагмент веб-страницы? Внимательно изучив нужный участок веб-страницы с помощью плагина Firebug, подищите какой-нибудь ID или CSS-класс, которые прописаны в контейнере с требуемым элементом веб-страницы. А далее с помощью программы Total commander осуществите поиск тех файлов, в которых присутствует данный класс или ID. Возможно Вам сразу не удастся найти нужный участок HTML- кода, тогда повторите поиск взяв за основу какой-нибудь другой маячок для поиска.

Редактирование стилей CSS

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

CSS-свойство одного и того же элемента может быть прописано несколько раз с разными значениями, тогда браузер учитывает только CSS-свойство с более высоким приоритетом – !important. . Если какая-то строка зачёркнута, значит у данного селектора специфичность ниже, чем у селектора с более высоким приоритетом. На рисунке видно, что у селектора .uk-article-title приоритет выше, чем у селекторов h1, .uk-h1 и h1, .uk-h1, поэтому свойства font-size:40px и color: #444444 не применяются.
Любое CSS-свойство отключается и включается вновь простым щелчком по пустому полю перед свойством. Вы можете подвести курсор мыши к стилевому правилу, рядом с этим свойством появится красный перечеркнутый кружочек. Щелкнув по нему мышью можно отключить это CSS- свойство и посмотреть на веб-страницу без него. Отключенные свойства отображаются серым цветом, рядом с ними выводится серый перечеркнутый кружочек.

Все значения и названия свойств можно легко изменять. Для этого достаточно щёлкнуть по свойству, и оно станет редактируемым. Очень удобно и то, что в плагине Firebug, как и в Notepad++, есть автодополнения.

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

  • Через контекстное меню можно скопировать объявление свойства, имя свойства или значение свойства в буфер обмена, а затем вставить в CSS-файл Вашего сайта.
  • Редактировать стиль элемента — установить встроенный стиль для элемента (устанавливается через атрибут style).
  • Добавить правило – добавить правило к данному элементу.
  • Новое свойство — добавить новое свойство и его значение текущему правилу.
  • Редактировать, удалить или выключить – действия с текущим свойством.
  • Обновить – обновить экран панели.
  • Инспектировать во вкладке CSS — перейти во вкладку CSS для изучения объекта там.
  • Инспектировать во вкладке DOM — перейти во вкладку DOM для изучения объекта там.

Во вкладке CSS доступен предосмотр цвета и изображений при наведении на свойство курсора

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

Вкладка «Скомпилированный стиль»

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

Вкладка «Макет»|Редактирование размеров в FireBug

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

Для просмотра размеров и их редактирования необходимо в режиме «Анализ» навести курсор мыши и щелкнуть на элементе с размерами которого мы желаем поработать.
Для редактирования размера поля достаточно щелкнуть на его числовом значении во вкладке «Макет». При этом на странице сайта будут подсвечиваться соответствующие поля: сам элемент – светло-голубым, margin – желтым, а padding – фиолетовым цветом.

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

Вкладка «DOM» (Document Object Model — объектная модель документа) используется JavaScript-разработчиками.

Вкладка «DOM» показывает список всех методов и свойств выбранного на данный момент элемента. При необходимости можно просматривать свойства объекта или изменять их, одновременно просматривая результаты таких изменений на веб-странице.

Вкладка «Сценарий» (Script)| Отладчик JavaScript

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

1. Кнопка с помощью которой можно выбрать файл скрипта, который вы хотите отладить. Вы также можете ввести фильтрацию для списка.
2. Функции отладки: Продолжить (F8), Шаг с заходом (F11), Шаг с обходом (F10), Шаг с выходом (Shift+F11) . Фунции действуют лишь тогда, когда выполнение кода достигает точки останова.
3. Вкладка «Наблюдение» даёт возможность просматривать переменные Javascript в текущем стеке.
4. Вкладка «Стек вызовов» показывает содержимое стека функций в реальном времени.
5. Вкладка «Точки останова» показывает список активных на данный момент точек останова. Отсюда можно только удалить точку останова.
Firebug позволяет устанавливать точки останова, которые сообщают отладчику о необходимости приостановить выполнение скрипта, когда он достигает определенной строки. Во время паузы, вы можете посмотреть значение любой переменной и обследовать объекты.
Для того чтобы установить точки останова, нажмите на любой номер строки и появится красная точка останова. Нажмите на красную точку ещё раз, чтобы её удалить.
После установки точки останова в нужном месте обновите страницу (F5) для срабатывания точки останова.

Для пошаговой отладки скрипта используйте кнопки на панели инструментов Firebug:
— продолжить выполнение до следующей точки останова (F8);
— зайти внутрь блока или функции (Шаг с заходом)(F11);
— перейти к следующему оператору без захода внутрь блока (Шаг с обходом) (F10);
— выйти из блока или функции (Шаг с выходом) (Shift+F11).

Измерение скорости загрузки сайта с помощью Firebug

Интересует сколько времени заняла загрузка вашей страницы? Вкладка «Сеть» для каждого файла покажет процесс загрузки в виде полосок от начала и до окончания. На диаграммах загрузки четко видно, что javascript-файлы загружаются по очереди, и никогда — параллельно. Данный факт поможет Вам оптимизировать порядок загрузки файлов на странице, чтобы пользователь не проводил много времени в ожидании загрузки страницы. Жмем вкладку «Сеть» в окне Firebug и обновляем (F5) веб-страницу.

В нижний строке списка запросов представлен обобщенный подсчет: количество запросов, объем информации в MB, сколько из них закешировано и суммарное время выполнения всех запросов.
На второй строке Firebug можно включить фильтрацию этой информации, то есть, если Вас интересует конкретный тип файлов, например javascript, HTML запросы, CSS файлы или изображения — нажимайте кнопки в в меню плагина, чтобы фильтровать список по типам. Благодаря фильтрации можно вычислять общий размер и время загрузки для конкретного типа файлов.
Некоторые сетевые запросы загружаются из кеша браузера, а не из сети. Плагин выделяет запросы из кеша полосками светло-серого оттенка, благодаря чему Вы можете легко определить насколько эффективно Ваш сайт использует кеш для оптимизации времени загрузки веб-страницы.

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

На этом все. Надеюсь, урок для Вас был интересен и полезен. Удачи Вам!

Руководство по Firebug для веб-разработчиков

Firebug – бесплатное расширение Mozilla Firefox для веб-разработок. Оно настолько полезно и популярно (используется также и в других браузерах, только с ограниченным функционалом), что имеет свои собственные расширения. Например, Pixel Perfect (выводит полупрозрачный макет страницы поверх верстки), Page Speed (тестирует скорость загрузки страницы с выдачей советов по оптимизации кода), Firefinder (ведет поиск по селекторам) и т.д.

C помощью Firebug можно добавлять/изменять CSS-свойства (сразу же видеть результат), устранять проблемы верстки, а также просматривать структуру и оформление других сайтов.

Прежде чем активно применять Firebug, следует изучить возможности этого инструмента. Данная статья, надеюсь, поможет вам в этом.

Для начала необходимо скачать и установить (если вы еще этого не сделали) браузер Mozilla Firefox, потом скачать и установить расширение Firefox – Firebug.

Вы выполнили все вышеперечисленное? Тогда Firebug готов к работе.

Как запустить Firebug

Когда Firebug запущен, то веб-страница выглядит следующим образом:

Запустить Firebug можно с помощью клавиши F12 (для Firebug есть и другие «горячие» клавиши) или через контекстное меню, которое открывается кликом правой кнопки мыши на страницу (или на конкретный HTML-элемент: гиперссылку, заголовок, картинку, кнопку и т.д.) –> «Инспектировать элемент с помощью Firebug».

Для быстрого запуска Firebugв Firefox предусмотрена иконка.

Firebug можно открыть в отдельном окне через «Открыть Firebug в отдельном окне».

Просмотр макета и разметки веб-страницы.

Веб-разработчики, глядя на страницу, над которой работают, часто спрашивают себя: «Где же ошибка?». Firebug помогает разобраться в коде и ответить на этот вопрос. Сразу же при открытии Firebug перед вами появляется панель HTML-элементов веб-страницы (вкладка HTML).

В свою очередь HTML-панель разделяется на 2 панели: панель просмотра HTML-разметки и боковую – панель стилей. Панель HTML-разметки, которая находится слева, показывает сгенерированный исходный код страницы.

Если вам надо просмотреть, где на странице находится тот или иной HTML-элемент, то нужно просто навести мышь (или кликнуть) на HTML–код этого элемента в панели HTML-разметки. И тогда браузер подсветит нужный вам элемент. Функция подсветки элемента сама по себе интересна, потому что показывает то, как браузер обрабатывает HTML-элементы и где они находятся на веб-странице. Такая функция наглядно показывает все padding-и, margin-ы и т.п.

Обратите внимание, когда вы кликаете по HTML-элементу в панели HTML-разметки , то в верхней строке панели появляется порядок вложения HTML-элементов, такая подсказка нужна во избежание повторов CSS-свойств где-либо на вашем сайте. По этой строке также смотрят наследование CSS-свойств.

В правой части HTML-панели Firebug предусмотрена функция поиска HTML-элементов (найденные элементы в панели HTML-разметки будут подсвечиваться серым).

Боковая панель стилей показывает дополнительную информацию о выделенном элементе, состоит из 4-х вкладок:

1) Стиль – показывает CSS-свойства конкретного элемента, название документа, в котором прописаны эти свойства и номер строки;

2) Во вкладке «Скомпилированный стиль» показаны все CSS-свойства, которые применяются к данному элементу и не задаются явно через стили (этот стиль сгенерирован на основе внутренних значений браузера и стиле родительских элементов);

Топ-пост этого месяца:  Урок 3. Фреймворк Bootstrap 4. Сетка Bootstrap 4. Часть 1

3) Макет – визуально показывает вам margin, border и padding выбранного элемента, значения можно изменять (дважды кликнув по ним);

4) Вкладка DOM (DocumentObjectModel) используется JavaScript-разработчиками.

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

  • добавление/удаление всех HTML-элементов;
  • добавление/удаление идентификаторов и классов CSS-элементов;
  • ввод длинного текста для проверки правильности переноса строк;
  • просмотр различных вариантов оформления того или иного элемента;

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

Рассмотрим более подробно устройство CSS-панели Firebug. CSS-стили элементов расположены в ней в алфавитном порядке, начиная с самых «свежих» свойств.

Иногда CSS-свойство одного элемента может быть прописано несколько раз с разными значениями, тогда браузер берет в рассмотрение только последнее CSS-свойство или CSS-свойство с более высоким приоритетом – !important. Отсюда и берутся зачеркнутые свойства в CSS-панели.

Редактировать CSS-свойства в Firebug – одно удовольствие. Все значения, названия свойств можно легко изменять «на лету». Очень удобно и то, что в Firebug есть автодополнения.

CSS-свойство можно отключить и посмотреть на веб-страницу без него.

С помощью клавиши Enter можно перемещаться по CSS-свойствам и их значениями, а также перейти на пустую строку для добавления нового CSS-свойства. Чтобы добавить CSS-свойство к элементу, у которого нет id или class, можно добавить новый атрибут в панели HTML-разметки во вкладке HTMLили CSS («Правка кода»).

Причуды и ограничения Firebug

Могут возникнуть сложности при редактировании HTML-элементов со свойствами :hover или JavaScript (например выпадающее меню), потому что панель HTML-разметки показывает свойства этих элементов только пока на них наведена мышь. Для решения этой проблемы можно прописать параметры видимости элемента в HTML-панели. Ниже рассмотрен пример выпадающего меню, где добавлен style=»display:block»:

Иногда CSS-панель не дает право редактировать свойства и выдает ошибку (особенно при проверке UserAgents). Для устранения ошибки нужно просто перезапустить браузер.

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

Еще одна проблема, связанная с Firebug – это тот факт, что он создавался под Firefox, который может сам исправлять некоторый недочеты и ошибки в коде.

Например, в коде страницы есть такая вот строка:

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

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

Понравилась статья? Сохраните себе на стену:

Как пользоваться дополнением Firebug для Firefox?


Здравствуйте, уважаемые читатели.

Сегодня я проведу экскурс по одному из практических методов изучения html-разметки и css-стилей. А объектом нашего внимания в данном разрезе станет расширение FireBug. Изначально оно было создано для браузера Mozilla Firefox. На сегодняшний день Фаербаг также можно использовать в Opera, Google Chrome. Мы разберем его основные функции на конкретных примерах.

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

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

Как установить Фаербаг для Мазилы и других браузеров?

Для начала нужно установить дополнение Фаербаг в ваш браузер.

Можно скачать Firebug с официального сайта Мозиллы и установить его. Но проще будет перейти в раздел «Дополнения» браузера и ввести в строку поиска «Firebug», затем нажать «Установить».

В сегодняшней статье я расскажу именно о плагине Фаербаг для Мазилы, потому как это его базовая версия. Для остальных браузеров созданы версии FireBug Lite. Их функционал несколько сокращен.

Можно скачать Фаербаг для Хрома и Opera на официальных сайтах этих браузеров.

Замечу, что в Google Chrome есть собственный встроенный аналог FireBug.

Работать с ним можно, кликнув по странице правой клавишей и выбрать «Просмотр кода элемента», либо нажав F12. Сама я часто пользуюсь этим расширением для Гугл Хром. Однако, по моему мнению, для новичков Фаербаг более понятен и удобен. Кроме того, он переведен на русский язык в отличии от инструмента для просмотра кода в Хроме.

Для чего нужен FireBug?

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

Кроме того, FireBug позволяет править код прямо в браузере и следить за изменениями элементов. Эти изменения увидите только вы, после обновления страницы все станет как прежде. Если вы решите оставить внесенные вами правки, потребуется искать файлы шаблона, которые отвечают за выбранную вами часть страницы. В идеале, вы должны хорошо знать свой шаблон и за что отвечают все его файлы. Для начала изучите статью про структуру шаблона WordPress. Но если вы все же не можете найти, куда вносить изменения, ниже я расскажу про один из способов поиска необходимых файлов.

Как пользоваться FireBug?

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

Чтобы его активировать вы можете кликнуть правой кнопкой мыши и выбрать «Инспектировать элемент с помощью FireBug». Либо выбрать в раскрывающемся списке под жучком опцию «Включить на всех страницах». Внизу экрана появится такое окно:

Это и есть рабочая область для просмотра и редактирования элементов страницы.

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

Работа с HTML

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

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

Работает и обратная последовательность: просматривая код в окне Фаербага, на странице будут автоматически выделяться соответствующие ему элементы.

Теперь, если вы хотите поменять, к примеру, размер картинки и посмотреть, как это будет выглядеть, нажмите кнопку «Редактировать».

Здесь вы можете менять любые параметры и сразу же видеть результаты этих изменений.

Например, уменьшим размер картинки вдвое:

Но помните, что стоит обновить страницу и все вернется к исходному виду. Как же сохранить изменения из FireBug? Для этого нужно найти файл шаблона, который отвечает за данный элемент. В моем случае, картинка просто находится в тексте статьи. Но вы, возможно, захотите изменить элемент из шапки или сайдбара, тогда и искать его нужно будет в файлах header.php и sidebar.php соответственно. Затем скопировать измененный в Файрбаге код и заменить соответствующие строки файла.

Работа с CSS

Теперь перейдем к стилям. Возьмем для примера социальные кнопки под статьей.

В поле справа мы видим вкладку «Стиль», которая отвечает за вид данного блока. Можно вносить изменения прямо в этом поле, либо перейти в закладку CSS, кликнув по ссылке, которая указывает на номер строки в файле style.css.

Нужный нам блок будет подсвечен голубой заливкой:

Здесь мы можем поменять толщину, цвет и стиль верхней и нижней границы элемента (border-bottom, border-top), его высоту (height), величину отступа от нижнего края (margin-bottom),ширину полей (padding), позицию элемента относительно окна браузера (position). Кроме того, сюда можно добавлять дополнительные параметры стиля. Значения перечисленных показателей можно увидеть наглядно, если перейти на вкладку «Макет».

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

Как найти необходимые файлы шаблона?

Один из методов поиска файлов шаблона с искомым кодом состоит в использовании Total Commander. В нем есть функция поиска файлов по содержимому («Команды» — «Поиск файлов» или Alt+F7). Скачайте архив с файлами сайта на свой компьютер через FTP-соединение. В этом может помочь статья об архивации файлов на сервере.

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

Например, мне нужно найти такой участок:

Он должен быть относительно уникален, иначе, может быть найдено слишком много файлов с одинаковыми частями кода.

Перехожу в скачанную папку с файлами WordPress и нажимаю поиск в Total Commander.

Нужно поставить галочку в графе «С текстом» и вписать туда искомое значение, по которому мы хотим определить нужный нам файл. Нажимаем поиск. Если файлов оказалось чересчур много, поищите другую часть кода в FireBug, которая будет более уникальной. Если же файлов несколько, открывайте их по одному и в редакторе (например, Notepad ++) и при помощи поиска ищите заданный текст (у меня «zar»). Проверьте, насколько весь блок соответствует тем значениям, которые вы видите с помощью дополнения FireBug. Если все сходится, вносите изменения в код файла и загружайте его на сервер.

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

Если у вас появились вопросы, задавайте их в комментариях к статье. Смотрим видео:

Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера

Приветствую Вас! Сегодня мы поговорим о необходимом расширении для вебмастера FireBug. Это дополнение предназначено для браузера Mozilla Firefox , который является необходимым браузером для веб-разработчика.

Хоть я и любитель Opera, но без Firefox мне сложно обходиться. Одной из причин этого, как раз является дополнение под названием FireBug.

FireBug для Firefox:

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

Установка FireBug на Mozilla Firefox

  1. Устанавливаете свежую версию Mozilla Firefox (на момент написания урока это версия 3.6.3)
  2. Используя Mozilla Firefox, переходите на официальный сайт дополнения FireBug (кстати, Вы можете на этом сайте узнать по подробнее об этом расширении)
  3. В правой части Вы увидите кнопку “Установить FireBug”, нажимаете на нее (во время написание поста, кнопка выглядела так):
  4. Вас должно “перебросить” на mozilla.org и уже там Вы должны нажать на кнопку “Добавить в Firefox”:
  5. В открывшемся окне выбираете “Установить
  6. Далее Firefox потребует перезагрузки, сделайте это (нажмите “Перезапустить Firefox” или закройте браузер и заново откройте его)
  7. Вот и все! Дополнение установлено!

Использование FireBug

  1. Чтобы задействовать FireBug для Firefox, нужно в правом нижнем углу браузера нажать на жучка:
  2. В результате снизу “выедет” окошко данного расширения
  3. Теперь на странице можно выбрать любой объект, для этого нужно нажать на стрелку и потом щелкнуть на любом участке сайт/блога:
  4. Справа можно видеть стиль данного объекта:
    Например, мы хотим изменить цвет шрифта: для этого меняем значение (на рисунке показано цифрой 1) на значение, которое нам необходимо. Поставив другой цвет мы мгновенно видим, как изменился наш текст. И если это нас удовлетворяет мы находим в файле style.css строку, которая нам нужна (на картинке показано цифрой 2 строка в файле style.css (она тоже указана там же), которую нужно искать).
  5. Вот результат: я поставил цвет зеленым:
  6. И если меня это устраивает, я в правой части FireBug ищу место, в каком файле нужно изменить свойство и в какой строке, что очень удобно.
  7. Также можно посмотреть скорость загрузки объектов страницы. Для этого нажимаете на стрелочку во вкладке “Сеть” и выбираете пункт “Панель включена”:
  8. И просто обновляете страницу (в Mozilla Firefox можно путем нажатия Ctrl+R)
  9. Вот и результат:
    Напротив каждого объекта показано время в миллисекундах, которое потребовалось на загрузку
  10. Также существует немало возможностей данного дополнения для Firefox, Вы можете изучить их на сайте разработчика, который я дал выше. Чтобы закрыть FireBug, достаточно нажать на кнопку:

FireBug ставьте обязательно, он Вам пригодится не раз. Расширение очень полезное и мое любимое среди всех дополнений для данного браузера.

Внимание новичкам! Сегодня мы немного затронули стили блога, коснулись файла style.css. В одном из следующих уроках я Вам расскажу о основах языка CSS, который помогает нам изменить цвет, шрифт, размер и т.п. Урок будет только один, дам только фундаментальные знания, которые необходимы для работы. Если Вас заинтересует данный язык, Вы сможете немало информации найти о данном языке в просторах интернета.
Скажу честно, я сам в CSS знаю немногое, но этого мне достаточно для выполнения поставленных мною задач. А без основы знания, Вам будет очень сложно, так что обязательно подписывайтесь на RSS-ленту. Не пропускайте необходимые самые полезные уроки WordPress.

До скорой встречи на следующих уроках! Удачи Вам!

______________________________________

Следующий урок: Урок 39 Вкратце про язык CSS.

Firebug для Firefox – дизайна сайта

Сегодня я хочу сказать несколько слов о плагине Firebug для Firefox, ведь FF должен стать хорошим другом веб-мастера, который желает заняться корректировкой дизайна своего сайта самостоятельно. Аддон firebug просто незаменим при разработке, создании, тестировании и изменении внешнего вида интернет-проекта, так как позволяет при поверхностном уровне знаний добиться хорошего результата.

Возможности Firebug

В предыдущей статье я рассказывал, как поменять шапку сайта на Joomla сегодня же расскажу коротко о других возможностях плагина, ведь всегда хочется подстроить шаблон сайта под свои нужды, а платить за достаточно простую работу не всегда есть желание. Firebug поможет не только проверить и при необходимости изменить таблицу стилей CSS (рисунок 2)и код html, но и даст возможность узнать потаённые тайны про JavaScript на странице.

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

Проверяем скорость загрузки

Что касается скорости загрузки страниц, то для этого в плагине есть функция Page Speed, с помощью которой можно не только определить саму скорость, но и увидеть основные проблемы, замедляющие загрузку. Всё это будет в Вашем распоряжении, после того как Вы скачаете Firebug для Firefox с официального сайта здесь http://getfirebug.com/ и установите плагин, как показано на рисунке 1.

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

Подсказка на рубль

То есть, плагин Fifebug для Mozilla Firefox ничего сам не меняет – он подсказывает, что надо подкорректировать для смены шрифта, отступов и иных параметров страницы. На практике сначала подбирается необходимый стиль оформления ресурса, и после изменения переносятся на хостинг, а для удобства в левом окне аддона можно увидеть место расположения файлов CSS и даже строк для необходимой точной корректировки.

Также с помощью FB можно просмотреть структуру сайтов конкурентов — это поможет дополнительно зарабатывать в сети за счёт конкурентных преимуществ, но это уже дело следующего этапа, так как увидеть – это не значит понять её преимущества и недостатки.

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