Чтобы установить FireBug непосредственно в браузер, перейдите сюда , и нажмите кнопку "Загрузить". FireBug интегрируется в Firefox и предоставляет широкий выбор инструментов разработки, доступных вам «на кончике пальца». Вы можете редактировать, отлаживать и просто просматривать документы CSS, HTML, и JavaScript вживую на любой странице. Скачать и пользоваться расширением вы можете совершенно бесплатно.
Доброго здоровья всем читателям моего блога! Давно хотел затронуть своим вниманием тему использования расширений на благо вебмастеров и вот, наконец, представляю описание функциональных возможностей одного из самых популярных , а именно, плагина Firebug
. К слову, если вы еще не сделали окончательный выбор в пользу какого-то web-обозревателя, возможно, материал о самых популярных браузерах () поможет вам в этом.
И несмотря на то, что подобные этому плагину для инструменты есть сейчас и в других популярных браузерах (например, в или в ), Firebug остается для меня приоритетным, поскольку в некоторых аспектах более удобен и функционален. Чем же хорош данный плагин?
Если вы используете любой другой веб-обозреватель, то справа появится кнопка «Загрузить сейчас» мышиного цвета, которую и следует нажать. После этого возникнет табличка с линками «Узнать больше о Firefox» и «все равно загрузить». Идя по первой ссылке, получите дополнительную информацию о браузере, если нажмете на вторую, появится стандартное окно загрузки, где получите предложение сохранить файл на компьютере. Выбираете место, куда поместить файл и нажимаете «Сохранить». Затем начнется стандартный процесс загрузки.
Вот и весь процесс скачивания и установки. Как видите, ничего сложного нет. Теперь я поведаю, как пользоваться плагином Файрбаг. Конечно, главный упор сделаю на те функции, которые больше всего нужны вебмастеру и которыми пользуюсь я сам. Читайте далее внимательно и постарайтесь понять; поверьте, такие инструменты значительно облегчают жизнь вебмастеру.
Сразу скажу, что Firebug может очень много. Самая необходимая опция, без которой, пожалуй не обойдется ни один вебмастер, это возможность редактировать параметры HTML и CSS прямо в окне веббраузера, наблюдая при этом, как будет меняться соответствующий элемент.
Итак, вызываете к жизни плагин нажатием на значок жука и внизу вам откроется окно, расположение которого можно менять, как вам удобно, простым перетаскиванием (для этого подводите курсор мыши к верхней границе окна Файрбаг пока он не примет вид двойной стрелки и, удерживая левую кнопку мышки, перетаскиваете границу вверх-вниз.)
Кроме того, нажатием на крайнюю левую красную кнопку можно свернуть окно, при клике на среднюю можно открыть расширение в отдельном окне, при нажатии на крайнюю правую отключаем плагин Firebug. Теперь посмотрим, как выглядит окно плагина в браузере Firefox:
Причем используется принцип вложенности, то есть более объемные контейнеры могут содержать несколько элементов. Как видно из примера на скриншоте, для того, чтобы раскрыть тот или иной элемент, надо последовательно нажать на плюсик слева рядом с тем или иным фрагментом HTML и вы последовательно получаете вложенные один в другой блоки.
Если подводить курсор мыши к тому или иному элементу HTML-конструкции, то одновременно муаровым оттенком окрашиваются те области страницы, которые соответствуют данному куску кода и тогда можно увидеть, какие элементы входят в данный контейнер. Например, на выше расположенном скриншоте такой областью является один из элементов верхнего меню. Более того, если кликнуть по определенной строчке HTML, то в правой нижней половине отобразятся правила CSS, которые соответствуют этому элементу.
Таким образом, прямо в окне Firebug можно экспериментировать с различными областями страницы в браузере, редактируя их по своему желанию, пока не добьетесь требуемого результата. Причем огромный плюс данного способа заключается в том, что делать это можно, обладая самыми минимальными знаниями гипертекстовой разметки и каскадных таблиц стилей.
Кроме того, производить подобные опыты возможно с любой вебстраницей какого угодно ресурса, нимало не беспокоясь о том, что вы что-то напортачите, поскольку все эти изменения не будут сохранены и при перезагрузке страницы все примет прежний вид. Если, например, вам понравился какой-то ресурс в сети, то можно поэкспериментировать с одной из его страниц, чтобы узнать, какие параметры разметки и какие значения стилей использованы там.
Опять же, если водить по этим контейнерам курсором мыши, то также окрашиваются элементы, которые входят в их состав. Как видите, возможности Firebug экономят кучу времени при приведении в божеский вид своего проекта, причем делать это может даже начинающий вебмастер.
Но это еще не все. Расширение обладает функцией, с помощью которой можно производить действия, обратные описанным выше. То есть если водить курсором мыши по странице, окрашиваться синим цветом уже будут сами элементы HTML в окне плагина Firebug:
Для реализации этой функции необходимо нажать на косую стрелку. Теперь водите мышкой по странице, а в левой нижней части будете наблюдать, как соответствующие участки HTML, отвечающие за создание элементов страницы, заключаются расширением в рамку.
и кликаю по нему мышкой, чтобы выделить (можно саму строчку не выделять, просто так легче редактировать). Он окрасится в синий цвет. Затем нажимаю левой кнопкой мышки на "access", в результате само слово окрасится синим и будет доступно для редактирования.
Теперь, если просто удалить атрибут "id access", то увидите, что верхняя навигационная панель приобретет непрезентабельный вид. Давайте используем другое значение "id" и вместо "acsess" используем "acsess1". Сразу увидите, что принципиально изменился вид верхнего меню моего блога:
Можете сразу попробовать именно с этим примером, чтобы почувствовать, как работает расширение Firebug (если кто еще не понял или невнимательно читал статью, можно проделывать такие штуки с любой вебстраницей любого сайта в интернете!). При этом, как я уже сказал, реальных изменений в файлах CMS (движка сайта) не случится, поэтому редактируйте смело. И уже только после того, как результат в виде вновь смоделированного HTML кода вас удовлетворит, можно переходить к действительному изменению.
Однако здесь и наступает основная сложность для начинающих вебмастеров. Дело в том, что файлы темы вашего движка WordPress, как, впрочем и любой другой CMS, написаны на языке PHP, которые при отображении страницы сайта в браузере преобразуются в HTML код. Поэтому придется копаться в файлах движка, чтобы найти именно тот, который необходимо отредактировать.
Здесь необходима какая-то зацепка, которая помогла бы в этом деле. Можно посмотреть, какой CSS класс или ID прописан в том или ином контейнере (он заключается в тег DIV). Кстати, в предыдущем примере я уже на это указал (будем искать файлы в документах PHP с id="access").
Теперь, когда зацепка есть, нужно как-то найти тот необходимый файл темы Вордпресс, при изменении которого добьемся необходимого нам результата. Рассуждаем следующим образом. За образование всех элементов темы в шапке блога обычно отвечает файл HEADER.PHP, поэтому ищем в его составе id="access".
Если файл небольшой, как в моем случае, то не составит отыскать нужное место вручную. Если тема у вас сложная, то на помощь приходит опция «Поиск» , который способен отыскать нужный файл.
Для этого соединяемся по протоколу FTP с сервером с помощью вышеупомянутого редактора Нотпад и загружаем документ HEADER.PHP на компьютер. После этого выбираем из верхнего меню «Поиск»-«Найти» и в поле «Найти» вносим слово или словосочетание, по которому будем осуществлять поиск (напомню, для данного примера это id="access"):
И через некоторое время поиск успешно заканчивается, NotePad plus plus выдает все строчки кода с искомым словом, выделив особым образом:
Теперь спокойно можно тут же должным образом изменить значение id (в нашем случае меняем "access" на "access1"). Сохраняем файл, после этого реальные изменения вступят в силу. Конечно, это простенький пример, гораздо чаще бывает так, что файлов с искомым словом наберется не один и не два, придется вносить несколько изменений.
В этом случае необходимо с помощью (или аналогичного) загрузить на компьютер все файлы движка вашего сайта, затем также воспользоваться редактором NotePad++ для их поиска и редактирования. Но, думаю, принцип поиска необходимых файлов для их последующего изменения вы уловили.
Каким образом использовать Firebug для редактирования CSS стилей
Здесь все значительно проще, если сравнивать с редактированием HTML. Как я уже писал в начале статьи, выделенному в левой половине окна расширения Firebug куску гипертекстовой разметки соответствуют свойства CSS, которые находятся справа. Они определяют, как будет выглядеть этот участок в браузере. Для того чтобы вы поняли, как можно изменять стилевые свойства, подведите курсор мыши к какому-нибудь участку кода. Рядом тотчас появиться перечеркнутый кружок красного цвета:
Если кликнуть по нему левой кнопки мыши, то он поменяет цвет на серый, также вся строчка, которая описывает данное CSS правило, станет бледно-серой. Таким образом можно отключать то или иное свойство, естественно, изменения сразу отобразятся в браузере. Для включения применяем обратную операцию. Чтобы изменить значение того или иного элемента, также кликаете по нему левой кнопкой мыши:
Причем, обратите внимание, чуть выше расположена ссылка на документ, в котором нужно будет произвести изменения и даже указана строчка, где находится этот искомый элемент. Само собой разумеется, что перед редактированием вы увидите все его результаты в браузере Firefox.
Ну, вот, это, пожалуй, все, о чем я хотел сегодня рассказать. Надеюсь, что оказался полезен предоставленной информацией, описав подробно функциональные возможности такого полезного для вебмастера инструмента как расширение Firebug для браузера Firefox. Конечно, были рассмотрены не все опции этого плагина, а лишь те, которые я использую в своей работе с блогом.
Возможно, я не раз еще вернусь к этой теме в своих последующих публикациях. А, вы, уважаемые читатели, надеюсь, отметите мой труд, используя кнопки социальных сетей. Кроме того, призываю вас подписаться на свежие статьи, использовав для этого ниже расположенную форму.
Исправление ошибок -
необходимое условие любой работы,
будь то написание статьи в газету
или создание веб-сайта. В
компьютерную эпоху работа над
ошибками давно автоматизирована.
Например, для исправления
грамматических ошибок есть
спеллчекр в офисном редакторе
теста, что помогает пишущей братии
писать романы, повести, статьи,
даже, можно сказать, не зная всего
алфавита. Есть подобные средства и
для писателей гипертекста -
веб-разработчиков. Примером самого
популярного такого средства сейчас
является расширение Firebug для Firefox.
Первым делом Firebug
Firebug стал одним из самых любимых
приложений для веб-дизайнеров и
программистов. Популярность этого
расширения, в свою очередь,
вынудила создателей конкурирующих
браузеров также включить
аналогичную функциональность и в
свои веб-обозреватели. Но так как
Firebug, как говорится, сейчас
"законодатель мод", то в этой
статье сначала познакомимся с ним,
а потом уже на его фоне рассмотрим
аналоги в других браузерах.
Firebug создан программистом Джо
Хевиттом и, как мы уже говорили,
предназначен для инспекции ошибок
веб-страниц - разметки HTML, стилей CSS,
сценариев JavaScript. Также при помощи
этого расширения можно оценить
проблемные места при загрузке
страницы в браузер.
Firebug (getfirebug.com)
устанавливается как расширение для
Firefox. После установки в правом
нижнем углу браузера появится
иконка жука, кликнув на который,
внизу обозревателя откроется
специальное окно. В зависимости от
режима работы, с правой стороны
может появляться второе
дополнительное окно. Firebug может
запускаться и как самостоятельное
приложение, что удобно для
обладателей двух мониторов.
Основных режимов отладки шесть -
это HTML, CSS, JavaScript, консоль, DOM и сеть.
Для каждого из режимов
предусмотрена в главном меню
веб-отладчика своя собственная
вкладка. Кстати, Firebug русифицирован.
Рассмотрим работу в каждом из
режимов подробнее.
Отладка HTML.
Инспектировать HTML-страницу при
помощи Fireburg - одно удовольствие.
Нажимаем в главном меню иконку со
стрелочкой, наводим курсор на
элемент веб-страницы, и тут же в
окне HTML появится подсвеченный код
этого элемента. И уже не нужно
мучительно долго искать глубоко
скрытый в коде проблемный элемент.
Также в правом вспомогательном
окошке появятся дополнительные
сведения о стиле, расположении
элемента и его свойствах DOM.
Содержимое подсвеченного
элемента лёгким движением руки
можно тут же отредактировать и
сразу же увидеть произведённые
изменения.
Поддерживается сворачивание
("фолдинг") кода. Также
"Огнежук" позволяет активно
использовать кнопки Tab и
"вверх-вниз". Tab используется
для перемещения по атрибутам
элемента при редактировании. А при
помощи клавиш "вверх",
"вниз" можно переключать
значение атрибутов. То есть Firebug
увеличит или уменьшит значение
числового атрибута на 1, если
нажать, соответственно,
"вверх", "вниз".
Важным является специальная
вкладка в дополнительном вторичном
окне под названием "Макет".
Каждый элемент веб-страницы
содержится в последовательно
вложенных контейнерах margin, border,
padding. Вкладка "Макет" отражает
в виде символических разноцветных
прямоугольников сами эти
контейнеры. Изменять их значения
можно точно так же, как и значения
других элементов html, и тут же
видеть, как меняется при этом вид
страницы.
Редактирование CSS.
Ремонтировать стили CSS можно как во
вторичном окне режима HTML, так и в
отдельном собственном режиме.
Редактирование CSS тоже очень
удобное: здесь можно и нужно
пользоваться клавишами "вверх-
вниз". Это позволяет изменять не
только значения селекторов CSS, но и
сами селекторы, так как Firebug
содержит полный словарь ключевых
слов каскадных таблиц стилей.
Любое свойство CSS можно быстро
отключить и обратно включить,
нажимая появляющуюся слева при
наведении курсора на CSS-свойство
серенькую кнопку.
При наведении курсора на свойство
цвета или изображения появляется
маленькое окно просмотра этого
цвета или картинки. Причём в случае
изображения отображаются его
размеры.
Режим сети.
Данный режим
позволяет инспектировать время
загрузки всех файлов, составляющих
веб-страницу. Это и загрузка
баннеров, картинок, js-сценариев,
файлов стилей. Очень важным
является возможность просмотреть
загрузку по каждому отдельному
файлу.
"Огнежук" демонстрирует
график загрузки по каждому файлу.
На графиках разными цветами будет
отображаться время http-запроса,
время получения данных, время
ожидания данных.
Для каждой загрузки можно
посмотреть http-заголовок, кликнув на
крестик рядом с каждым запросом.
Отладчик JavaScript.
Firebug - это
мощный отладчик для сценариев
JavaScript. Для этой отладки существует
специальный отдельный режим
"Сценарии". Здесь имеется
возможность устанавливать
брейкпоинты одним кликом на номере
строки кода. Причём брейкпоинты
могут быть условные, то есть,
например, срабатывать только при
нажатии кнопки на странице.
При отладке во время точек
останова в дополнительном окне
будет демонстрироваться стек
вызовов функций, что ждут возврата.
А во вкладке "Наблюдения"
дополнительного окна отобразятся
значения объектов DOM.
Консоль.
Очень классная
вещь. Консоль Fireburg - это практически
как bash в Linux. Представляет собой
командную строку. Здесь можно
набирать и выполнять команды JavaScript
как по отдельности, так и целыми
сценариями.
Причём консоль Firebug имеет
собственные специальные команды.
Например, имеется команда console.log,
что похожа на printf в "си":
>>> console.log("Hello, world!")
Hello, world!
В консоли есть очень важная
функция - профилировщик. Этот
инструмент помогает измерить
производительность сценария. В
режиме консоли нужно просто
кликнуть на соответствующей
кнопке, и, перезагрузив страницу,
кликнуть на кнопке
"Профилировать" ещё раз. В
результате будет выведен детальный
отчёт о времени работы каждой
функции вашего js-сценария.
Режим DOM (Document Object Model).
Объектная модель документа - это то,
во что браузер внутри себя
превращает загруженную
веб-страницу. DOM - это программный
интерфейс, позволяющий сценариям
JavaScript производить изменения в
видимом окне браузера. Окно этого
режима Firebug содержит иерархию
объектов веб-страницы и позволяет
ими манипулировать в реальном
времени на лету, не прибегая к
услугам той же консоли.
И ещё одной главной фишкой Firebug
являются расширения, которым стоит
посвятить отдельную статью. Как и
сам браузер Firefox, "Огненный
жук" может увеличивать свои
возможности за счёт дополнительных
расширений, начиная с подсветки
синтаксиса и заканчивая встроенным
справочником HTML. Эта возможность
расширений и делает на текущий
момент Firebug беспрекословным
лидером, по сравнению с другими
браузерами.
Альтернатива
Конечно же, конкуренты Firefox тоже
не сидят сложа руки, активно
работают в этом направлении и
предлагают в своих браузерах
аналогичную Firebug функциональность.
Эта функциональность постоянно
совершенствуется, так что
приведённые ниже описания,
возможно, уже устареют даже на
момент выхода этого номера газеты.
Поэтому буду краток и обойдёмся без
холиварных сравнений.
MS Internet Explorer 8.
Аналог Firebug
в IE 8 по своему функционалу
повторяет большую часть режимов
расширения Firefox . Имеется режим HTML с
фолдингом и CSS, позволяющий одним
кликом выбрать нужный для
редактирования элемент на
странице, а также наблюдать за
изменениями в реальном времени.
Имеется дополнительная раскладка -
аналог вкладки "Макет". Однако
"юниксовые" клавиши tab
"вверх-вниз" не задействованы.
Для отладки JavaScript есть
соответствующие режимы
"Сценарий" и "Профиль".
Консоль тоже присутствует
скромненько в дополнительной
вкладочке. Однако команды console.log не
поддерживаются. Возможно, пока не
поддерживаются. И весьма досадно,
нет режима "Сеть",
позволяющего оценить скорость
загрузки веб-страницы. Также нет
удобного инструмента для инспекции
DOM.
Однако есть в средстве разработки
IE 8 переключение режимов
обозревателя между движком IE 7 и IE 8.
Для многих веб-дизайнеров это
важная функция.
Apple Safari.
Браузер Safari
также может похвастать средством,
аналогичным Firebug, причём более
стильным по дизайну, чем неказистый
IE 8. Имеется просмотр HTML, CSS,
"Макета элементов". Но
навигация и поиск нужного элемента
исключительно внутри html-кода.
Редактирование атрибутов
найденного элемента тоже весьма
примитивное без клавиш tab
"вверх-вниз". Но имеется при
этом просмотр и изменения свойств
DOM элемента.
Режим "Сеть" присутствует.
Присутствует отладка и
профилирование JavaScript. И имеет место
быть продвинутая консоль с
автодополнением, а также командой
console.log.
Google Chrome.
Средство
разработки в "Хромом"
практически аналогично по внешнему
виду аналогу из Apple Safari. В третьей
версии "гуглобраузера" данная
функциональность сильно урезана.
Есть только просмотр кода, режим
"Сеть" и консоль. Но можно
сказать, что средства отладки Google
Chrome и Apple Safari будут полностью
идентичны и внешне, и внутренне, так
как используют один и тот же движок
WebKit.
Opera Dragonfly.
"Стрекозоид" браузера Opera
практически повторяет интерфейс
"Огненного жука" с главным и
дополнительным окном. Просмотр
html-кода и стилей осуществляется в
единой закладке DOM. Присутствует
"фолдинг" кода. При этом в
дополнительном окне присутствует и
функциональность, обеспечиваемая
клавишами tab и "вверх-вниз", как
и в Firebug. Вкладка "Контейнер"
носит только информационный
характер.
Консоль присутствует и содержит
командную строку, что позволяет
выполнять сценарии JavaScript в
интерактивном режиме. Имеется
отладчик и логирование выполнения
сценария. Однако отсутствует фича
console.log.
В режиме "Сеть" графики
загрузки отдельных файлов
веб-страницы содержат только время
непосредственной загрузки и
ожидания - что, в принципе, для
большинства случаев достаточно.
Таким образом, альтернативы
уступают в функциональности и
удобстве Firefbug, но, как говорится в
таких случаях, вполне сойдут для
сельской местности. Первое же
знакомство со встроенными в
браузеры средствами отладки стоит
однозначно на данный момент
начинать с Firebug для Firefox.
Михаил АСТАПЧИК
Firebug — отладчик web-приложений, используется как отдельное расширение для браузера Mozilla Firefox, являющееся консолью, отладчиком, и DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest.
Маловероятно, что эта статья заинтересует опытных веб-разработчиков, потому как среди них вряд ли найдется человек, который бы не знал, что такое Firebug и как им пользоваться.
Но ведь веб-мастерами не рождаются, ими становятся. И каждый гуру сайтостроительства когда-то тоже был новичком, старательно вникающим в пугающие своей сложностью технические премудрости процесса создания веб-сайтов.
Вот для таких людей, которые только начинают постигать азы сайтостроительства и написана эта статья, где мы постараемся рассказать об одном замечательном инструменте и незаменимом помощнике в таком непростом деле, как создание интернет-сайтов.
Вы сможете редактировать, отлаживать и исследовать CSS, HTML и Javascript вживую, на любой веб-странице.
Файрбаг
Речь идет о плагине Firebug, или как его еще называют по-русски «Файрбаг», «Фаербаг», что в переводе с английского означает «огненный жук».
Плагин Firebug – это встроенный в браузер программный продукт, который предназначен для просмотра и редактирования структуры страниц веб-сайта (html-кода, стилей CSS, скриптов и др.). Инструмент этот совершенно не интересен обычным пользователям всемирной паутины, но для тех, кто пробует себя в создании сайтов – вещь совершенно незаменимая.
Общепризнано, что самый удобный и как следствие, самый популярный Firebug — у браузера Mozilla Firefox. Вообще, строго говоря, само название Firebug — это бренд от Mozilla. Но так уж сложилось, что аналогичные продукты других производителей во всем мире тоже стали называть файрбагами.
Какие браузеры поддерживают Firebug
Кроме «Огненной лисы» Firebug есть и у браузера Google Chrome.
В принципе, файрбаги этих двух браузеров на современном этапе наиболее популярны у разработчиков сайтов, впрочем, как и сами браузеры.
Есть Firebug и в браузере Opera, но им пользуются намного меньшее число людей.
Пользование плагином Firebug кажется сложным только на первый взгляд. После того, как вы более-менее разберетесь с этим инструментом, вопросов будет возникать все меньше.
Вызывается Firebug во всех браузерах стандартно – нажатием кнопки F12, либо правой кнопкой мыши, где из контекстного меню необходимо в зависимости от вашего браузера выбрать пункт «исследовать элемент» или «инспектировать элемент».
После этого на мониторе появится рабочее окно файрбага, в котором мы можем увидеть весь html-код открытой страницы, а также другие ее элементы, включая css-стили.
А теперь, собственно говоря, поговорим для чего все это нужно.
А нужно все это для того, чтобы прямо из браузера, веб-мастер мог в тестовом режиме редактировать свой сайт, наблюдая в реальном времени за всеми изменениями, которые происходят на странице.
Допустим, на одной из страниц своего сайта вам захотелось поменять дизайн какого-то элемента. При помощи Firebug это можно сделать прямо из браузера, в «пробном режиме», не затрагивая самих файлов вашего сайта на сервере. Проще говоря, Firebug – это такой безопасный полигон, на котором можно ставить любые эксперименты с кодом вашего сайта, не опасаясь что-либо сломать.
Как пользоваться
Итак, вот страница нашего сайта. Перед нами стоит задача изменить цвет области вот этого заголовка с синего на какой-либо другой. Эту задачу, конечно, можно выполнить, изменив код непосредственно в файле стилей на сервере. Но ведь после изменения нам захочется посмотреть результат и если он нас не устроит, придется снова лезть в файл и править код. И так несколько раз, пока мы не добьемся нужного результата. Согласитесь, что это неудобно. С Firebug задача существенно упрощается.
В принципе, этот инструмент позволяет экспериментировать со многими другими параметрами сайта или же дает возможность посмотреть, как реализована понравившаяся вам идея на другом ресурсе – ведь Firebug позволяет смотреть код не только собственных сайтов, но и любых других.
Разобраться с премудростями работы Firebug не так сложно, как кажется на первый взгляд. И поверьте – оно того стоит. Пройдет буквально несколько недель после того, как вы впервые откроете для себя Firebug, и вам уже будет сложно представить, как можно было раньше обходиться без этого инструмента.
Для работы Firebug 1.4 требуется Firefox 3.0 или выше.
Всем привет!
Сегодня я расскажу вам об одном очень полезном расширении для браузеров 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 немного сложновато. Поэтому я решил показать оба варианта установки этого замечательно плагина. Итак, преступим.