Доброго здоровья всем читателям моего блога! Давно хотел затронуть своим вниманием тему использования расширений на благо вебмастеров и вот, наконец, представляю описание функциональных возможностей одного из самых популярных , а именно, плагина Firebug
. К слову, если вы еще не сделали окончательный выбор в пользу какого-то web-обозревателя, возможно, материал о самых популярных браузерах () поможет вам в этом.
И несмотря на то, что подобные этому плагину для инструменты есть сейчас и в других популярных браузерах (например, в или в ), Firebug остается для меня приоритетным, поскольку в некоторых аспектах более удобен и функционален. Чем же хорош данный плагин?
Теперь рассмотрим вопрос установки Firebug. Скачать плагин можно с официальной страницы , где вы сможете найти самую последнюю версию. Причем гораздо проще установить это расширение можно, пользуясь непосредственно Мазилой. В этом случае, если вы подведете курсор к ссылке на последнюю версию (именно ее и следует загружать), то справа от нее появится зеленая кнопка «+Добавить в Firefox». При нажатии на эту кнопку напрямую начнется установка. После этого необходимо перезагрузить браузер, чтобы активировать расширение.
Если вы используете любой другой веб-обозреватель, то справа появится кнопка «Загрузить сейчас» мышиного цвета, которую и следует нажать. После этого возникнет табличка с линками «Узнать больше о 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 для того, чтобы находить ошибки в html коде, в скриптах и оперативно их устранять. Затем плагин прижился и теперь многие вебмастера используют его для правки html кода, css, скриптов и не только. Впринципе, если захотеть, то можно сверстать целую страницу в firebug, но все же стоит использовать его только для правки=). Вы можете вызвать его в любом из последних версий браузеров chrome, opera и firefox при нажатии кнопки F12 или правой кнопкой мыши на любой элемент страницы -> просмотр кода элемента
(проинспектировать элемент). Хочу отметить, что я показываю все на примере браузера chrome.
Вы увидите нечто подобное (скриншот ниже). На скриншоте: наверху — страница сайта, снизу — Firebug.
Возможно для кого-то это покажется страшным зрелищем:), но не пугайтесь, все достаточно просто. Давайте рассмотри подробнее, что же мы сможем делать при помощи фаербага.
В данном случае я нажал на просмотр кода элемента заголовка
. В левом окне вы видите весь html код страницы и мой подсвеченный заголовок .В правом окне firebug находятся стили css, которые привязаны к данному тегу. Т.е. если вы выбираете какой-либо элемент будь то div, p, table или любой другой, то в правом окне фаербага вам будут показываться те стили css, которые каким-либо образом касаются выбранного элемента. Удобно, не правда ли?:) Но это не все, что вы можете делать при помощи плагина.
Редактирование страницы при помощи Firebug
Да-да, вы можете прямо в режиме онлайн редактировать свой сайт при помощи firebug
. HTML код редактируется следующим образом — вы нажимаете на необходимый тег правой кнопкой мыши и затем выбираете «edit as html» (хочу напомнить, что я показываю пример используя бразуер chrome, в других браузерах названия могут немного отличаться).
Для того, чтобы редактировать css достаточно кликнуть в правом окне рядом с остальными стилями. Так вы сможете добавить неограниченное количество стилей для выбранного объекта, посмотреть как это выглядит в живую на сайте и затем скопировать в сам css-файл.
Многие вебмастера (особенно которые работают с CMS, например Joomla и WordPress) не могут найти css файл куда нужно добавить отредактированные стили. Что же, все достаточно просто, для того, чтобы узнать где находится css-файл, вам достаточно навести мышку на название стиля
(в моем случае) style.css:1112. Путь вы увидели. style.css — это название файла. 1112 — это номер строки, где находятся нужные вам стили.
На скриншоте выше вы видите результат добавления/изменения трех свойств стиля #singlecont h1. Я сделал черным бекграунд, текст белым и добавил отступ, и в итоге получил
#singlecont h1 {
color: #FFF;
font-size: 40px;
font-weight: 400;
padding: 0px 0 0px;
line-height: 100%;
margin-bottom: 20px;
background: black;
padding: 20px;
}
Друзья, это далеко не все возможности фаербага. Над правым окном со стилями вы могли заметить на скриншотах красный крестик и желтый треугольник с восклицательным знаком. Это ошибки в коде, а так же предупреждения соответственно. На некоторые из них можно не обращать внимания, но поверьте если у вас количество ошибок (цифра сбоку от значка) более 10 и растет, то стоит уже заняться «работой над ошибками»:).
Я вкратце постарался вам изложить что такое 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, о том как правильно скачать и установить Firebug на Firefox
, а так же в краткой форме опишу всю пользу данного плагина для вебмастера. Данный компонент хорошо помогает начинающему вебмастеру в вёрстке новых шаблонов, изменению старых, исправлению ошибок в коде, изменение стилей css и многое другое. Данный плагин мне очень понравился, как дополнение к другим подобным инструментам для работы с блогом и поэтому я хочу описать весь период установки firebug на firefox.
Firebug — плагин для Firefox помогающий при верстании и работе с кодами
Данное расширение для Mozilla Firefox
, имеет имя , которое значительно снижает время на поиск и исправление ошибок в HTML и CSS коде. Начинающему при создание сайта просто необходима сторонняя помощь, которую в наше время очень тяжело добиться от знающего в этом деле вебмастера, и какую-то часть ответов на возникшие вопросы можно получить воспользовавшись расширением firebug.
Но многие узнают про данных «помощников» уже очень поздно, когда было потрачено уйма времени на поиск ошибок и их устранение, а всего лишь что нужно было сделать — это скачать и установить его в браузер. Так как я сторонник браузера Опера и не очень люблю Firefox, но плагин был именно на него, я подумав несколько секунд, установил и получил море положительных эмоций от функций и всей работы firebug. Конечно же и для браузера Opera придуманы множество аналогичных расширений, но мне они показались не полными. Что бы это компенсировать приходилось устанавливать ещё один — два плагина, но зачем это нужно? Вот и я остановился на одном, который меня полностью устраивает . А теперь дорогие друзья давайте перейдём к непосредственному самому внедрению в браузер Firefox.
Откуда скачать и как установить Firebug на Firefox
Firebug довольно просто устанавливать на Firefox и для этого нужно скачать firebug плагин с нажав в правом углу вот на эту большую кнопку, которую в видите ниже!
После нажатия вы будете перенесены на официальный сайт firefox для дальнейшего скачивание плагина firebug. Там вы увидите большую жирную кнопку «добавить в firefox
» на которую следует нажать.
Помните, что если вы хотите в автоматическом режиме установить расширение в браузер firefox, в должны именно с него нажимать на кнопку скачать, а если вы зашли с другого браузера и нажимаете на кнопку, то откроется обычное скачивание файла, который потом в ручном режиме следует добавить в браузер firefox.
После того как Firebug установлен, вам следует перезагрузить ваш браузер, для того что добавленные настройки были приняты в силу. Когда вы зайдёте в firefox, вы сразу же увидите «жука» в правом верхнем углу. Это и есть наш установленный плагин поиска и исправления ошибок firebug.
Если вам нужно посмотреть код страницы вы можете воспользоваться им, а можете проверить код ручным способом, нажав правой кнопкой мыши в любое пространство страницы и выбрать просмотреть исходный код страницы. Конечно первый и второй способ одинаковы и показывают они один и тот же код, но самое главное их отличие в том, что firebug всё качественно раскладывает по полочкам, к каждому началу тега указывает его конец в виде «полочек», что намного понятнее. Так же в этом есть ещё один плюс! Вам нужно найти где расположен закрывающий тег? Так при ручном методе на это может уходить огромное количество времени, особенно когда страница имеет большое содержание скриптов и стилей. А установив плагин firebug позволит найти конец любого стиля, кода в 1 секунду, достаточно нажать на начало и он сразу же выдаст конец.
И сейчас я на примере покажу эти примочки вам.
Как пользоваться Firebug при работе с html и css
Хотите посмотреть свой html код сайта? Всё достаточно просто. Для этого следует нажать на «жука» плагина. И вам будет показан весь код страницы, а так же CSS код. Смотрите скрин ниже. К каждому диву выводится справа его CSS, который вы так же можете скопировать, посмотреть и изменить под свои нужды. Изменить можно нажатием на кнопку редактировать. После изменения любого кода, вы можете внести его на сайт, для этого следует зайти на FTP через любой и внести новые созданные корректировки. Обязательно после каждого изменения кода проходите . Так как ошибки нам не нужны, а если мы их допустили, то своевременно устраним.
Firebug поддерживает горячие клавиши быстрого запуска, которые вы можете задать самостоятельно. Одна из клавиш — это F12, которая позволяет одним нажатием на любой странице браузера запустить его. Если вы хотите открыть его в отдельном окне, то следует нажать вот такую комбинацию CTRL+F12.
Основная часть плагина разделена на две половины. Слева это редактор html, справа это редактор css. Выглядит это вот так:
Вы можете, как отключить интересующие вас свойство css, так и вписать новое. Отключить можно нажатием на красный перечёркнутый кружок, а внести новое, достаточно сделать две щелчка справа от свойства. Выглядит это вот так:
При редактирование кода через firebug, плагин показывает нахождение данной строчки у вас в файле style.css для дальнейшего его редактирования. Видите всё как удобно придумано, а главное всё просто! А теперь давайте поглядим какие есть настройки у firebug.
Настроек не так много, можно их конечно же не трогать, но я советую настроить горячие клавиши под себя для быстроты работы и обращению к плагину через firefox.
Измерение скорости загрузки сайта через Firebug
Скорость загрузки сайта — это очень важный показатель при продвижение сайта в поисковых системах. Чем выше скорость загрузки сайта, тем быстрее посетители попадут на ваш блог, а значит часть посетителей не покинут сайт ожидая его загрузки. Совсем недавно Гугл внёс изменения в свои алгоритмы. И теперь скорость загрузки сайта так же влияет на позиции сайта. В интернете существует огромное множество онлайн сервисов по проверки скорости загрузки сайта, про которые я буду так же писать в новых статьях. Но сейчас речь идёт о плагине Firebug и проверять скорость загрузки мы будем именно с его помощью. Для этого зайдите в плагин Firebug, перейдите во вкладку «СЕТЬ» и обновите вашу страницу сайта.
Как я понял скорость проверяется именно с обменом пакетами между вашим компьютером и сайтом. А точнее время приёма данных с ресурса. Если я в чём-то ошибаюсь то поправьте пожалуйста. Время зависит о самой скорости интернета. Если вы не знаете вашу скорость, то можно сделать
Доброго времени суток, уважаемые читатели сайт!
— один из самых полезных инструментов для веб-мастера. С его помощью можно решать множество задач, например, можно посмотреть структура сайта (исходник смотреть сложно, а с этой программой можно посмотреть структуру исходных элементов -какой элемент что выводит- сразу видно наглядно) или править веб-страницы прямо в реальном времени. Firebug для Firefox
позволяет прямо в браузере мы изменять (html, CSS и т.д.), и сразу смотреть результат наших действий, хотя реально сам код на сервере и не изменялся. Ещё проще: например, нужно изменить размер шрифта в заголовке поста. Используя Firebug, просто выделяем мышкой нужный нам текст, высвечивается соответствующий элемент и можно сразу вносить изменения в размер шрифта и сразу смотреть результат. Посмотрели, как выглядит веб-страница и потом уже вносим изменения в соответствующий код. Удобно? Не то слово!
Этот плагин, как дополнение есть в разных вариантах. Так его можно установить в браузер Chrome (как установить Хром, написано в статье , настроить и работать. Как установить этот плагин для chrome -читайте ), а можно и в рассмотрим этот вариант.
Как установить плагин firebug для firefox
Открываем Mozilla Firefox
(он естественно уже установлен на нашем компьютере), скачать firebug для firefox можно по
Нажимаем зеленую кнопку +Добавить в Firefox
.
Обратите внимание, что кнопка Установить не активна. Чтобы она стала активной — кликните мышкой по записи (указано стрелкой) и затем кликаем Установить.
Всё. приложение установлено. В правом верхнем углу видим серенького жучка.
А серенький потому, что он неактивный, т.е. не включён. Если расширение установили, то следующий раздел не читаем — смотрите как пользоваться.
________________________________________________________________________
Вариант, если браузер Firefox ещё НЕ УСТАНОВЛЕН
на компьютере
. Сначала закачиваем расширение Firebug с браузера Chrome, а затем устанавливаем сам Firefox.
Для начала заходим на сайт дополнений . Открывается страница загрузки.
Нажимаем кнопку Загрузить сейчас
. Открывается окно.
Хотите узнать больше про Фаефокс? нажмите соответствующую кнопку. Но мы нажмём ссылку всё равно загрузить
. Производится загрузка дополнения.
В левом нижнем углу браузера Firefox видим скачанный файл. Этот файл (цифры в названии могут отличаться, т.к. эта актуальная версия на момент написания статьи). Устанавливаем браузер Firefox и затем добавляем в него скачанное расширение Firebug.
——————————————————————————
Как пользоваться Firebug
Сначала его нужно активировать. Делается это так:
— кликнуть левой кнопкой мыши по иконке жучка в правом верхнем углу браузера: либо
— использовать горячие клавиши вызова F12
.
Открывается рабочая область (обведена красным).
Начинаем анализ сайта (пример сайт). Сначала нажимаем на значок в рабочей области (находится справа от жучка).
Теперь, если двигать мышью по сайту, то будут подсвечиваться области, а внизу будет выделен код, который и выводит эту область на веб-странице.
Пример использования плагина Firebug
Разберём конкретный пример -посмотрим код заголовка статьи и изменим его цвет в реальном времени. Открываем веб-страницу и видим статью названную Программа для чтения PDF- файлов - Stduviewer. Запустили программу (нажали F12) и подвели мышку к этому заголовку
В рабочей области внизу видим, что за вывод этого элемента отвечает код:
Программа для чтения PDF- файлов — Stduviewer
И в этой же рабочей области справа видим СSS:
A, a:link, a:visited, #sidebar a, #sidebar ul, .post-title, .page-title, .post-title a:link, .post-title a:visited, #slideshow .post-title a {
}
Видно, что заголовок статьи выводится с цветом #265076. Попробуем, а как будет смотреться заголовок с таким цветом #00FFFF? Для этого в рабочей области выделяем #265076 и вместо этого цвета прописываем #00FFFF и видим результат.
Цвет заголовка изменился. Но дело в том, что на сервере сам код не изменился и необходимо вручную ввести правку в код CSS.
Таким образом можно править любой элемент кода и смотреть результат правки. Стоит сказать, что возможности веб-отладчика намного превосходят описанные в статье — имеется огромное количество возможностей у этого расширения.