В этой статье вы узнаете все об использовании Firebug в Firefox. Файрбаг это плагин, который будет полезен всем блоггерам, оптимизаторам, верстальщикам и вебмастерам. Он расширяет возможности браузера Mozilla для тех людей, кто работает над сайтами.
Что умеет Firebug
Плагин Firebug имеет следующие возможности:
- инспектирование и редактирование HTML, JavaScript кода, DOM
- отладка и логирование JavaScript кода
- выполнение JS напрямую через командную строку
- автоматический поиск ошибок в JavaScript, XML, CSS
- инспектирование и редактирование CSS-стилей
- отображение CSS-метрик
- отображение сетевых запросов при загрузке сайта
Пользователи Google Chrome могут обратить внимание, что это стандартные функции встроенные в Хром (доступные по нажатию F12), но выбор браузера - щепетильное и личное дело, поэтому кому-то удобнее пользоваться Firefox с плагином Firebug.
Успешная установка ознаменуется появившимся значком в виде жука.
Использование 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-код элемента чтобы удалить его и многие другие бытовые задачи, стоящие перед вебмастерами и блоггерами.
Здравствуйте, уважаемые читатели! Сегодня речь пойдет об очень важном инструменте верстальщика — бесплатном дополнении . Лозунг на сайте разработчиков гласит — «Эволюция 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
Теперь рассмотрим пример из практики. На моем блоге есть статья, посвященная плагину . В ней рассказывается, как вывести форум на отдельной странице. Ради удобства для нее создается отдельный шаблон, в котором удаляется сайдбар. Подразумевается, что форум займет всю ширину страницу.
Проблема заключается в том, что во многих ширина блока под контент фиксирована. Удаление сайдбара не приводит к тому, что форум расползается на всю страницу, на месте сайдбара остается просто пустое место. Чтобы исправить это, нужно найти и отредактировать стиль элемента, отвечающего за вывод содержания страницы.
Ко мне время от времени обращаются люди за помощью. Благодаря 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. Изучить их несложно, нужно только захотеть. Если вы ведете блог или сайт, то рано или поздно эти знания вам понадобятся. Лично я получил их из за авторством Влада Мержевича. Конечно, этот мануал не сделает из вас профессионального верстальщика, но базовые знания вы точно получите.
На этом на сегодня все. Спасибо а внимание и до новых встреч.
Всем привет!
Сегодня я расскажу вам об одном очень полезном расширении для браузеров 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 .
Firebug – это специальная программа, которая помогает при вёрстки сайта. Знаю, что «Вёрстка сайта», у многих вызывает не только негативные мысли, но и даже страх. Думаю, что Вы сами понимаете, если мы хотим заниматься сайтостроением или просто желаем приукрасить наш блог, то учиться этому всё равно придётся.
Если Вы, как и я ведёте свой блог то думаю, давно столкнулись со словом – «Вёрстка ». И всегда, делая эту злополучную вёрстку, сталкиваетесь с кучей проблем.
Одна из этих проблем – постоянный поиск нужного кода, отвечающего за элементы страницы. Решить данную проблему, нам поможет плагин – «Firebug (фаербаг)».
Как установить программу для вёрстки сайта – Firebug (Фаербаг).
Для того чтобы установить плагин firebug , нужно перейти по ссылке , на официальный сайт. Здесь, в правом верхнем углу нажать на большую красную кнопку:
Вас, тут же перебрасывают в новое окно, где нужно нажать на большую зелёную кнопку с надписью – «+ Add too Firefox »:
После этого начнётся загрузка фаербага. Вам будет нужно разрешить его установку и по завершению перезагрузить браузер.
Теперь в одном из углов Вашего браузера должен появиться маленький значок с изображением жука:
Вёрстка сайта — как пользоваться Firebug (Фаербаг).
Для того чтобы начать использовать Firebug, нужно перейти на ту страницу Вашего сайта, где Вы хотите производить изменения. Затем, просто нажать на описанный выше значок с изображением жука.
После этих действий, внизу браузера появится рабочее окно данного дополнения:
Затем, указателем мыши, выбираем тот элемент, который мы хотим изменить и кликаем по нему. Во время выбора, элемент будет подсвечиваться голубой рамкой:
Теперь, в окне Firebug, в правой его части, будут отображаться – CSS свойства выделенного объекта, а в левой, можно посмотреть HTML-код и его местонахождение:
Во время вёрстки сайта или Вашего блога, не обязательно каждый раз меняя различные коды, обновляться и смотреть, что из этого получилось.
В окне фаербага, Вы смело можете менять и тестировать различный код, не боясь, что-то испортить. Всё происходит, в режиме реального времени и Firebug сразу будет показывать Ваши изменения. Во время изменений можете не пугаться, всё происходящее никоим образом, не повлияет на Ваш ресурс.
Большинство начинающих веб-мастеров не делают различий между браузерами. Да и действительно, есть ли какая-нибудь принципиальная разница? Ответ напрашивается сам собой. Разницы быть не должно, ведь Ваш сайт должен одинаково смотреться в любом браузере.
Однако разница есть. И в первую очередь она касается именно веб-мастеров. Потому что при создании и отладке и удобнее использовать тот браузер, который сам будет Вам помогать в этом.
А точнее не сам браузер, а дополнение к нему.
Итак, встречайте, сегодня я Вам расскажу о таком незаменимом плагине для Mozilla Firefox, как Firebug .
И первый вопрос: Что же такое Firebug?
Firebug — это расширение для браузера Mozilla Firefox, которое является консолью для отладки и выявления ошибок, возникающих при разработке сайта.
Оно предоставляет веб-мастеру множество инструментов для оценки работоспособности кода страницы, показывает привязанные к каждому элементу css-стили, позволяет в режиме реального времени изменять фрагменты кода и стили. И тут же, не выходя из браузера, увидеть результат этих изменений.
Как установить Firebug?
Установка Firebug довольно проста. Для начала запускаем Mozilla Firefox (Firebug устанавливается только на этот браузер) и переходим по ссылке: . Находим там кнопку «Установить Firebug». Нажимаем на нее и попадаем на станицу установки дополнений для Firefox.
Нажимаем на кнопку «Добавить в Firefox». Происходит загрузка плагина и появляется окно:
Нажимаем «Установить сейчас». Все. Установка завершена.
Для того, чтобы плагин заработал, нужно перезагрузить браузер Firefox. После перезагрузки в панели браузера появится кнопка включения расширения Firebug.
Как использовать Firebug?
Способов использования Firebug довольно много, так как он содержит множество инструментов. Все их описывать я не буду. Расскажу только про некоторые основные.
Во-первых, Firebug позволяет быстро находить нужные фрагменты кода и определять для них правильные , чтобы назначать им css-стили. А также показывает в каком файле и в какой строке прописаны стили для выделенного фрагмента кода или селектора.
Во-вторых, Firebug дает возможность подбирать параметры атрибутов в режиме реального времени без перезагрузки страницы и необходимости править какие-либо файлы.
В-третьих, Firebug позволяет отследить иерархию контейнерной модели, подсвечивая в окне браузера параметры выбранного блока разными цветами (отступы margin, pading, границы). Также в Firebug есть удобный инструмент для анализа макета блока и изменения атрибутов «на лету».
В-четвертых, Firebug содержит удобные инструменты для анализа скорости загрузки страницы и много еще чего интересного.
Если Вы хотите более детально ознакомиться с принципами использования дополнения Firebug, можете почитать о них на официальном сайте.
А я приготовил Вам небольшое видео. Несколько примеров использования Firebug. Смотрите:
