Firebug для яндекс браузера как установить
Обновлено: 08.07.2024
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) Макет – визуально показывает вам 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, который может сам исправлять некоторый недочеты и ошибки в коде.
Например, в коде страницы есть такая вот строка:
В этой строке отсутствует закрывающий тег </a>. Некоторые браузеры могут не понять, что это ошибка и ссылка окажется недееспособной. Firebug в таких случаях надеется на встроенный механизм Firefox, который выведет на деле отсутствующий тег </a> (это называется сгенерированный код). При разработке сайта такую особенность надо держать в голове и проверять его работоспособность во всех остальных браузерах.
Итак, надеюсь, эта статья помогла вам понять основные принципы работы в такой замечательной программе как Firebug. Остальную информацию можно прочесть в официальной документации или проверить опытным путем. Удачи!
Доброго здоровья всем читателям моего блога! Давно хотел затронуть своим вниманием тему использования расширений на благо вебмастеров и вот, наконец, представляю описание функциональных возможностей одного из самых популярных дополнений для Firefox, а именно, плагина Firebug. К слову, если вы еще не сделали окончательный выбор в пользу какого-то web-обозревателя, возможно, материал о самых популярных браузерах (тут) поможет вам в этом.
Должен признаться, что как инструмент для вебмастера мне больше по душе Google Chrome (бесплатно скачать последнюю версию, установить и настроить), который мне кажется более быстрым и функциональным, да и при серфинге по сети я пользуюсь им. Хотя, возможно, немаловажное значение при выборе браузера для работы с сайтом имеет сила привычки.
Эта сила иногда идет вразрез с очевидными преимуществами, которые предоставляют нам альтернативные варианты, но в случае с плагином Firebug все было иначе, я сразу понял его значение как важнейшего инструмента для вебмастера.
Где скачать и как установить расширение Firebug для Firefox
И несмотря на то, что подобные этому плагину для Мазила Фаерфокс инструменты есть сейчас и в других популярных браузерах (например, в Internet Explorer или в Opera), Firebug остается для меня приоритетным, поскольку в некоторых аспектах более удобен и функционален. Чем же хорош данный плагин?
Если вы используете любой другой веб-обозреватель, то справа появится кнопка «Загрузить сейчас» мышиного цвета, которую и следует нажать. После этого возникнет табличка с линками «Узнать больше о Firefox» и «все равно загрузить». Идя по первой ссылке, получите дополнительную информацию о браузере, если нажмете на вторую, появится стандартное окно загрузки, где получите предложение сохранить файл на компьютере. Выбираете место, куда поместить файл и нажимаете «Сохранить». Затем начнется стандартный процесс загрузки.
После его окончания загрузки открываете Фаерфокс, жмете в левом верхнем углу «Файл»-«Открыть файл». Находите место на жестком диске компьютера, куда определили скачанный файл и активируете его. Начнется установка, после окончания которой необходимо перезагрузить браузер. После перезагрузки в правом верхнем углу браузера Файрфокс увидите изображение жука, который является символом Firebug. Это значит, что плагин установлен и готов к работе.
Вот и весь процесс скачивания и установки. Как видите, ничего сложного нет. Теперь я поведаю, как пользоваться плагином Файрбаг. Конечно, главный упор сделаю на те функции, которые больше всего нужны вебмастеру и которыми пользуюсь я сам. Читайте далее внимательно и постарайтесь понять; поверьте, такие инструменты значительно облегчают жизнь вебмастеру.
Как пользоваться плагином Файрбаг для редактирования HTML кода
Сразу скажу, что Firebug может очень много. Самая необходимая опция, без которой, пожалуй не обойдется ни один вебмастер, это возможность редактировать параметры HTML и CSS прямо в окне веббраузера, наблюдая при этом, как будет меняться соответствующий элемент.
Итак, вызываете к жизни плагин нажатием на значок жука и внизу вам откроется окно, расположение которого можно менять, как вам удобно, простым перетаскиванием (для этого подводите курсор мыши к верхней границе окна Файрбаг пока он не примет вид двойной стрелки и, удерживая левую кнопку мышки, перетаскиваете границу вверх-вниз.)
Кроме того, нажатием на крайнюю левую красную кнопку можно свернуть окно, при клике на среднюю можно открыть расширение в отдельном окне, при нажатии на крайнюю правую отключаем плагин Firebug. Теперь посмотрим, как выглядит окно плагина в браузере Firefox:
С левой стороны располагается структура HTML, справа - элементы каскадных таблиц стилей CSS. Теперь небольшой экскурс в основы языка гипертекстовой разметки. Дело в том, что опытные профессионалы своего дела верстают сайты с помощью так называемых блоков (блочная верстка), используя контейнеры (с помощью тега div), задавая нужное содержание той или иной области вебстраницы. А вот внешний вид элемента верстки призваны определять таблицы стилей.
Причем используется принцип вложенности, то есть более объемные контейнеры могут содержать несколько элементов. Как видно из примера на скриншоте, для того, чтобы раскрыть тот или иной элемент, надо последовательно нажать на плюсик слева рядом с тем или иным фрагментом HTML и вы последовательно получаете вложенные один в другой блоки.
Если подводить курсор мыши к тому или иному элементу HTML-конструкции, то одновременно муаровым оттенком окрашиваются те области страницы, которые соответствуют данному куску кода и тогда можно увидеть, какие элементы входят в данный контейнер. Например, на выше расположенном скриншоте такой областью является один из элементов верхнего меню. Более того, если кликнуть по определенной строчке HTML, то в правой нижней половине отобразятся правила CSS, которые соответствуют этому элементу.
Таким образом, прямо в окне Firebug можно экспериментировать с различными областями страницы в браузере, редактируя их по своему желанию, пока не добьетесь требуемого результата. Причем огромный плюс данного способа заключается в том, что делать это можно, обладая самыми минимальными знаниями гипертекстовой разметки и каскадных таблиц стилей.
Кроме того, производить подобные опыты возможно с любой вебстраницей какого угодно ресурса, нимало не беспокоясь о том, что вы что-то напортачите, поскольку все эти изменения не будут сохранены и при перезагрузке страницы все примет прежний вид. Если, например, вам понравился какой-то ресурс в сети, то можно поэкспериментировать с одной из его страниц, чтобы узнать, какие параметры разметки и какие значения стилей использованы там.
Таким образом, вы будете знать, какую строчку HTML документа или какое свойство CSS надо изменить, чтобы получить требуемый результат. Причем для удобства в верхней строчке показаны последовательно вложенные друг в друга контейнеры, в которые включен данный элемент:
Опять же, если водить по этим контейнерам курсором мыши, то также окрашиваются элементы, которые входят в их состав. Как видите, возможности Firebug экономят кучу времени при приведении в божеский вид своего проекта, причем делать это может даже начинающий вебмастер.
Но это еще не все. Расширение обладает функцией, с помощью которой можно производить действия, обратные описанным выше. То есть если водить курсором мыши по странице, окрашиваться синим цветом уже будут сами элементы HTML в окне плагина Firebug:
Для реализации этой функции необходимо нажать на косую стрелку. Теперь водите мышкой по странице, а в левой нижней части будете наблюдать, как соответствующие участки HTML, отвечающие за создание элементов страницы, заключаются расширением в рамку.
Теперь можно перейти в левую часть окна расширения Файрбаг с тем, чтобы заняться непосредственно редактированием. Покажу на конкретном примере. Для того, чтобы изменить тот или иной элемент, например, положение верхней навигационной панели моего блога, изменю ID одного из тегов div. Для этого подвожу курсор к выбранному контейнеру:
и кликаю по нему мышкой, чтобы выделить (можно саму строчку не выделять, просто так легче редактировать). Он окрасится в синий цвет. Затем нажимаю левой кнопкой мышки на "access", в результате само слово окрасится синим и будет доступно для редактирования.
Теперь, если просто удалить атрибут "id access", то увидите, что верхняя навигационная панель приобретет непрезентабельный вид. Давайте используем другое значение "id" и вместо "acsess" используем "acsess1". Сразу увидите, что принципиально изменился вид верхнего меню моего блога:
Можете сразу попробовать именно с этим примером, чтобы почувствовать, как работает расширение Firebug (если кто еще не понял или невнимательно читал статью, можно проделывать такие штуки с любой вебстраницей любого сайта в интернете!). При этом, как я уже сказал, реальных изменений в файлах CMS (движка сайта) не случится, поэтому редактируйте смело. И уже только после того, как результат в виде вновь смоделированного HTML кода вас удовлетворит, можно переходить к действительному изменению.
Однако здесь и наступает основная сложность для начинающих вебмастеров. Дело в том, что файлы темы вашего движка WordPress, как, впрочем и любой другой CMS, написаны на языке PHP, которые при отображении страницы сайта в браузере преобразуются в HTML код. Поэтому придется копаться в файлах движка, чтобы найти именно тот, который необходимо отредактировать.
Здесь необходима какая-то зацепка, которая помогла бы в этом деле. Можно посмотреть, какой CSS класс или ID прописан в том или ином контейнере (он заключается в тег DIV). Кстати, в предыдущем примере я уже на это указал (будем искать файлы в документах PHP с ).
Теперь, когда зацепка есть, нужно как-то найти тот необходимый файл темы Вордпресс, при изменении которого добьемся необходимого нам результата. Рассуждаем следующим образом. За образование всех элементов темы в шапке блога обычно отвечает файл HEADER.PHP, поэтому ищем в его составе .
Если файл небольшой, как в моем случае, то не составит отыскать нужное место вручную. Если тема у вас сложная, то на помощь приходит опция «Поиск» бесплатного HTML и PHP редактора notepad ++, который способен отыскать нужный файл.
Для этого соединяемся по протоколу FTP с сервером с помощью вышеупомянутого редактора Нотпад и загружаем документ HEADER.PHP на компьютер. После этого выбираем из верхнего меню «Поиск»-«Найти» и в поле «Найти» вносим слово или словосочетание, по которому будем осуществлять поиск (напомню, для данного примера это ):
И через некоторое время поиск успешно заканчивается, NotePad plus plus выдает все строчки кода с искомым словом, выделив особым образом:
Теперь спокойно можно тут же должным образом изменить значение id (в нашем случае меняем "access" на "access1"). Сохраняем файл, после этого реальные изменения вступят в силу. Конечно, это простенький пример, гораздо чаще бывает так, что файлов с искомым словом наберется не один и не два, придется вносить несколько изменений.
В этом случае необходимо с помощью FTP клиента FileZilla (или аналогичного) загрузить на компьютер все файлы движка вашего сайта, затем также воспользоваться редактором NotePad++ для их поиска и редактирования. Но, думаю, принцип поиска необходимых файлов для их последующего изменения вы уловили.
Каким образом использовать Firebug для редактирования CSS стилей
Здесь все значительно проще, если сравнивать с редактированием HTML. Как я уже писал в начале статьи, выделенному в левой половине окна расширения Firebug куску гипертекстовой разметки соответствуют свойства CSS, которые находятся справа. Они определяют, как будет выглядеть этот участок в браузере. Для того чтобы вы поняли, как можно изменять стилевые свойства, подведите курсор мыши к какому-нибудь участку кода. Рядом тотчас появиться перечеркнутый кружок красного цвета:
Если кликнуть по нему левой кнопки мыши, то он поменяет цвет на серый, также вся строчка, которая описывает данное CSS правило, станет бледно-серой. Таким образом можно отключать то или иное свойство, естественно, изменения сразу отобразятся в браузере. Для включения применяем обратную операцию. Чтобы изменить значение того или иного элемента, также кликаете по нему левой кнопкой мыши:
Причем, обратите внимание, чуть выше расположена ссылка на документ, в котором нужно будет произвести изменения и даже указана строчка, где находится этот искомый элемент. Само собой разумеется, что перед редактированием вы увидите все его результаты в браузере Firefox.
Ну, вот, это, пожалуй, все, о чем я хотел сегодня рассказать. Надеюсь, что оказался полезен предоставленной информацией, описав подробно функциональные возможности такого полезного для вебмастера инструмента как расширение Firebug для браузера Firefox. Конечно, были рассмотрены не все опции этого плагина, а лишь те, которые я использую в своей работе с блогом.
Работа со стилями с помощью Firebug. Как пользоваться и где скачать Firebug для Firefox, Chrome и Opera
Расширение Firebug, как любое расширение служит для увеличения возможностей браузера. В данной статье я расскажу: где скачать Firebug для популярных браузеров Mozilla Firefox, Google Chrome и Opera, как его установить, а также постараюсь подробно описать, как пользоваться Firebug.
Изначально, плагин или расширение Firebug было создано группой разработчиком для Mozilla Firefox, поэтому в данном браузере расширение имеет самый мощный функционал.
Не зря авторы Firebug сравнили выход своего детища с эволюцией в веб-разработки, ведь это действительно так! Вы в этом сами сможете убедится, если дочитаете статью до конца.
С использованием дополнения, отпадает необходимость копаться в файлах шаблона, пытаясь определить какой class или id задан для определенного участка страницы.
В общем, работа с внешним видом сайта становится гораздо легче, быстрее и приятней. Поехали!
Где скачать и как установить расширение Firebug
Затем откроется такое окошко:
Установка на Chrome и Opera очень схожа и я думаю Вы разберетесь. Вот ссылочки на страницы для скачивания
Выше я уже писал, что в браузерах Google Chrome и Opera, расширение представлено в сокращенном виде и чтобы более полно описать функционал Firebug, я запущу его в браузере Mozilla Firefox.
Работа со стилями. Как пользоваться Firebug
Вот как на данный момент выглядит форма на блоге автора письма:
После нажатия на иконку, отвечающую за выделения, передвигаю курсор на край формы подписки и границы зоны очерчивается рамкой:
Ну вот и код формы подписки, с которым мне предстоит поработать. Чтобы закрепить выделенную область, надо щелкнуть, по появившейся рамке, левой клавишей мыши и тогда код формы должен подсветится синим фоном:
Давайте разберем, что за селекторы заданы для данной формы.
Значение solid (можно перевести, как сплошная линия) задает вид рамки, т.е. если задать другое значение, например: dashed (пунктирная линия), то рамка станет пунктирной.
Конечно я не буду перечислять все селекторы, которые используются в CSS. Делаю я это, так сказать, для наглядности и облегчения восприятия. В будущем я обязательно выпущу бесплатный, для своих подписчиков , видеокурс по основам HTML и CSS.
Итак, с заданными стилями мы разобрались, теперь я буду приводить форму подписки в надлежащий вид.
Видно, что форма растянута и с помощью внешних отступов можно сделать ее немного компактней.
Делаю двойной клик левой копкой мыши по нужному участку кода и теперь, прямо в рабочей зоне расширения Firebug, можно вносить изменения в уже существующие параметры или задавать новые:
В самый конец кода формы подписки я добавляю селектор margin и задам для него следующие значения:
Вот что в итоге должно получится:
И вот оно чудо! Форма подписки моментально приняла другой вид.
Все изменения внешнего вида сайта, сделанные с помощью расширения Firebug, для пользователей будут незаметны, и после обновления страницы исчезнут. 
Смотрим на результат:
Но что же делать, если стили прописаны в отдельном файле? Давайте разберем и эту ситуацию.
Теперь для примера я выбрал блок с хлебными крошками со своего блога. Выделяю его, и в правом окне рабочей зоны отобразятся стили, которые прописаны в файле style.css:
Итак, что мы видим. Мне открылись все стили, прописанные в файле style.css, для идентификатора breadcrumbs.
Делаю двойной клик по значению селектора и появляется поле для правки:
Хочу, чтобы текст, который не является ссылкой стал красным, а размер шрифта немного побольше. Вуаля:
Если кликнуть на этот значок, то селектор исчезнет и отменяться все его значения. Смотрим:
Тени, как не бывало! Следуя своим внезапным капризам, я решил сделать текст немного жирнее. Ага, а такого селектора здесь нет. Ну что же, придется его добавить.
Наверное Вы заметили, что Firebug показывает порядковый номер строки, начиная с которой в файле style.css прописаны стили для выделенного идентификатора или класса:
И если кликнуть по номеру, то в правом окне рабочей зоны, откроется файл style.css и стили для идентификатора, с которыми я работал, подсветятся голубоватым фоном.
Также для правки стилей можно пользоваться вкладкой CSS, где будет отображаться файл style.css целиком:
Как Вы уже догадались, в этой вкладке наглядно демонстрируется размеры самого выделенного элемента (690х41 пикселей), а также: внутренние отступы (padding), рамка (border) и внешние отступы (margin).
Надо закруглятся, а то я так статью никогда не закончу. Надеюсь я доходчиво объяснил использовать Firebug для работы со стилями, но если какие-то моменты Вам остались непонятны, задавайте свои вопросы в комментариях и постараюсь точечно разобрать ситуацию.
Firebug – это многофункциональный плагин для браузера FireFox , который призван упростить процесс разработки и отладки web-страниц. Данное расширение позволяет в режиме реального времени инспектировать код страницы, выявлять в нем ошибки и тут же их исправлять.
Также плагин firebug предоставляет следующий функционал:
- Инспектор ( Inspect )– функция, предназначенная для быстрого обнаружения тега и просмотра всех « привязанных » к нему свойств и стилей;
- Возможность редактировать HTML -код и таблицы стилей CSS непосредственно в окне браузера. Можно вносить различные изменения в атрибуты тега и сразу же наблюдать результат. Это очень удобно для нахождения нужного оформления;
- Возможность отладки JavaScript ;
- Дополнительный функционал, который позволяет просмотреть процесс загрузки страницы.
Это далеко не полный список функций, которые представляет плагин для web-разработчиков. Помимо всего прочего были созданы дополнения к firebug :
Firebug для firefox
Для того чтобы установить firebug для firefox , необходимо перейти на официальную страницу , на которой представлен список версий данного продукта: следует выбрать последнюю на данный момент.
Если страница была открыта в Firefox , то при наведении курсора на ссылку с версией firebug отобразится предложение в виде кнопки с надписью « +Добавить в Firefox ». Для начала установки плагина необходимо кликнуть по данной кнопке, а после ее окончания перезагрузить браузер:
Использование firebug
Как пользоваться firebug ? Чтобы запустить плагин, необходимо кликнуть на его значок в форме жука. После загрузки открывается окно плагина, и пользователь наблюдает примерно следующее:
На данном скриншоте видно, что в окне слева представлен HTML -код страницы, а справа – CSS стили выделенного фрагмента кода. Это ускоряет поиск и отладку. Также в меню присутствуют следующие разделы для обработки:
Редактирование HTML-кода
Для редактирования html -кода достаточно выделить нужный фрагмент и выбрать пункт « Редактировать ». Изменения сразу же отобразятся на web -странице. Если навести курсор на какой либо участок кода, то firebug выделит на странице элемент, описанный данным кодом, как показано на следующем скриншоте:
Редактирование CSS
CSS стили представлены в правой части окна firebug . В окно выводятся стили, отвечающие выделенным на данный момент фрагментам html -кода. Чтобы увидеть, как стиль изменяет внешний вид элементов страницы, можно « отключить » свойство, нажав на красный перечеркнутый кружок. Для возвращения к изначальному виду элемента, необходимо повторно кликнуть на кружок:
На рисунке видно, что после отключения свойства меню, изменилась позиция данного элемента.
Page speed firebug
Рассмотрим важное дополнение к плагину firebug – page speed firebug . Этот инструмент предназначен для анализа загрузки веб-страницы. При правильном использовании полученных данных, можно повысить скорость загрузки сайта.
Результатом анализа является список советов по оптимизации обрабатываемой страницы, пример которого представлен на следующем скриншоте:
Выполнение данных рекомендаций значительно повысит скорость загрузки web -страниц. Красные кружки указывают на то, что соответствующие пункты оказывают большое влияние на скорость, а советы, помеченные желтыми треугольниками, не так важны для оптимизации.
Горячие клавиши firebug
Горячие клавиши ( быстрые клавиши ) ускоряют процесс работы в несколько раз. Ниже приведен список некоторых полезных горячих клавиш, действующих в плагине firebug :
Firebug для других браузеров
Чтобы установить firebug для chrome , нужно зайти в настройки браузера, выбрать вкладку « расширения », затем кликнуть на « еще расширения » и с помощью поиска найти плагин:
Установить плагин для opera можно на официальном сайте :
Firebug для safari и для IE можно найти на сайте . Нужно отметить, что версии для браузеров, отличных FireFox , имеют не полный функционал, а являются Lite -версиями плагина.
Firebug является прорывом в сфере web-конструирования. Это отличный инструмент, который дает возможность сделать работу верстальщика более приятной и увлекательной, а самое главное – более быстрой.
Также данный плагин является хорошим вспомогательным инструментом для тех, кто только начинает знакомиться с разработкой сайтов. Для большинства браузеров существует аналог firebug , так что вы можете познать его прелести, даже не используя Firefox .
Читайте также: