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

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

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

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

Плагины для Firefox и Opera, помогающие при верстании и продвижении сайта (Firebug)

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

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

Вот и приходится в результате жить на два дома. В Opera я лажу по интернету, а в Firefox — работаю над своими проектами постоянно используя возможности плагина Firebug. Но, кроме верстальных плагинов для браузеров, вам наверняка при работе с вашими проектами могут понадобится SEO плагины для Firefox и Opera, позволяющие оперативно отследить PR и ТИЦ открываемых в браузере страниц, посмотреть закрыты или нет для индексации поисковиками внешние ссылки на этих страницах (особенно это интересно при комментировании блогов и поиске так называемых Dofollow блогов) и многое другое.

К моему величайшему удовольствию, такой SEO плагин имеется и для Opera тоже (SEObar для Opera — удобный и информативный SEO плагин для Оперы). Причем он мне даже нравится больше, чем его аналог для Firefox. Но, как говорится, на вкус и цвет... В общем, расскажу об обоих SEO плагинах для Firefox и Opera, а вы сами решите что из них выбрать, а может быть будете, как и я, пользоваться и тем и другим, в зависимости от того, в каком браузере вы сейчас работаете. Если уж речь зашла о браузерах, то мне очень понравился новый Google Chrome — быстрый, даже в сравнение с Opera, удобный и красивый, но пока я еще не разобрался есть ли к нему расширения подобные тем, что я опишу ниже.

Где качать и как установить Firebug в Firefox

Firebug — это не просто дополнение, добавляющее какой либо расширенный функционал вашему браузеру Firefox. Очень верно про это написано на странице разработчиков Firebug — это эволюция web-разработки. Да, это именно так. Эволюция это когда вы переходите от палки копалки к экскаватору. Эффект потрясающий и вы это сразу почувствуете, начав использовать Firebug в браузере Firefox. Ну, пожалуй, хватит петь дифирамбы, пора рассказать про сам плагин и его возможности. Скачать Firebug вы можете со страницы аддонов для Firefox. На данный момент актуальной версией является Firebug 1.4.3.

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

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

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

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

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

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

А Firebug предлагает щелкнуть по интересующему месту страницы, опять же правой кнопкой, и выбрать из контекстного меню — «Анализировать элемент» (в англоязычной версии плагина это будет “Inspect”). И вам, о чудо, откроется в окне плагина Firebug только тот участок Html кода страницы, который отвечает за формирование именно этого элемента веб страницы. Удобно? Безусловно. Только за одно это следует полюбить плагин Firebug, но ведь он может много чего еще.

Html код вы увидите в открывшемся внизу страницы окне плагина Firebug, показанном на рисунке выше. Тот участок Html кода, который отвечает за интересующий вас элемент веб страницы, будет подсвечен синим. Так же, обратите внимание на подчеркнутую мною на рисунке красной линией строку, начинающуюся с слова «Редактировать» в окне плагина Firebug. Ну, во-первых, если вы щелкните по этому слову, то сможете внести изменения в выделенный фрагмент Html кода, которые тут же отобразятся на странице.

Измените, например, в окне плагина Firebug url картинки на намерено несуществующий и картинка исчезнет с веб страницы, вернете все обратно и картинка появится. Но обратите внимание — эти изменения никак не отразятся на вашем ресурсе, все изменения увидите только вы и только на этой веб странице, подчиненной Firebug. Как только вы обновите страницу, то все, внесенные плагином Firebug таким образом, изменения исчезнут.

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

Проблема поиска нужного участка HTML кода в файлах используемого вами движка сайта

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

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

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

Я советую цепляться за CSS классы или ID тех или иных элементов Html кода. Допустим, в контейнере (контейнером называют участок кода, заключенный в теги DIV, c прописанными классами или ID), в котором находится код нужного вам элемента вебстраницы, прописан какой-то CSS класс или ID (например, так div class="xxtoolbox").

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

Поиск по содержимому файлов движка сайта при помощи Total commander

А все очень просто: нужно, во-первых, скачать все файлы движка вебсайта на свой компьютер, подключившись к серверу хостинга по FTP (Как настроить доступ к сайту по FTP с помощью программы FileZilla) и воспользоваться возможностью искать по содержимому файлов, такой замечательной программы как Total commander (ссылку на скачивание не привожу, т.к. программа платная, но это, я думаю, не будет проблемой). Вы открываете папку со всеми файлами движка вашего вебсайта в Total commander и выбираете из верхнего меню программы «Инструменты» — «Поиск файлов» или просто нажимаете Alt+F7 на клавиатуре.

В открывшемся окне вы ставите галочку в поле «С текстом», убеждаетесь, что в поле «Место» указано правильное месторасположение ваших файлов движка вебсайта, а поле «Искать» не должно быть заполненным. В результате, Total commander выдаст вам список всех файлов движка, в которых встретился нужный нам CSS класс. Этот CSS вы выбрали раньше в качестве маячка при просмотре кода вебстраницы через Firebug. Если файлов, в которых встречается данны CSS класс не слишком много, то можно открыть их все по очереди в Notepad++ и, при помощи его встроенного поиска, найти места, где встречается данный CSS класс.

Если файлов движка вебсайта, где встречается искомый CSS класс слишком много, то нужно искать другой ключ (маячок) для поиска, изучив нужное место вебстраницы с помощью плагина Firebug. Если же все сложилось удачно и вы не только нашли, но и исправили нужный участок Html кода, то вам нужно будет загрузить этот исправленный файл движка обратно на сервер в ту папку, где он и должен лежать, заменив существующий на сервере. Или же, как делаю я, сразу открыть нужный файл с сервера на редактирование и вносить изменения сразу в него (Как открыть файл вашего сайта на редактирование с помощью программы FileZilla).

При осуществлении поиска по содержимому файлов в Total commander, может возникнуть проблема с русскими словами. Если Total commander ничего не нашел по вашему запросу на русском, поставьте галочку напротив «UTF-8» в окне поиска и все найдется.

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

Но потом мы отвлеклись на рассмотрение вопроса поиска файла движка сайта, отвечающего за вывод нужного участка Html кода вебстраницы, через Total commander. Но сейчас мы вернемся непосредственно к плагину Firebug и продолжим рассмотрение его возможностей, которые будут очень полезными при работе со своим веб проектом.

Возможности и принципы использования Firebug

Кроме описанного чуть выше способа активации плагина Firebug (щелкнуть по интересующему месту вебстраницы правой кнопкой и выбрать из контекстного меню — «Анализировать элемент») его можно вызвать к жизни простым нажатием на иконку паучка в правом нижнем углу вебстраниц или же с помощь нажатия клавиши F12. Повторное нажатие этой клавиши приведет к закрытию окна плагина Firebug.

Если вы хотите, чтобы плагин Firebug открылся в отдельном окне, то щелкайте по паучку удерживая Shift на клавиатуре или используйте сочетание клавиш Ctrl+F12. Вы сами выберите наиболее удобный для вас вариант вызова к жизни Firebug. Окно плагина будет выглядеть у вас примерно так:

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

Как использовать Firebug для изучения HTML кода в Firefox

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

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

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

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

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

Как видно из приведенного выше скриншота окна плагина Firebug, контейнер <div id="header*-in"></div> отвечает за вывод блока с заголовком и описанием моего WordPress блога.

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

Для реализации этого способа нужно будет только активировать соответствующий режим, нажав на показанную на рисунке кнопку панели Firebug:

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

После того, как нужный элемент вебстраницы найден, вы можете щелкнуть по нему левой кнопкой мыши и перейти в левое поле окна плагина Firebug, для дальнейшей работы с Html кодом этого элемента дизайна. Как я уже упоминал в первой статье цикла, посвященного Firebug — Полезные расширения для браузеров Firefox и Opera | Часть 1: Firebug для Firefox, с HTML кодом в окне плагина Firebug можно производить любые манипуляции и результат вы увидите сразу же на открытой в браузере Firefox странице.

При этом, естественно, никаких изменений в реальных файлах движка сайта производиться не будет. Но зато, вы сможете в реальном времени с помощью возможностей плагина Firebug промоделировать различные варианты построения данной вебстраницы. Если же новый, смоделированный с помощью Firebug вариант кода HTML вас устроит, то придется вносить изменения уже в реальные файлы движка веб проекта, найти которые вы сможете используя следующий способ: Поиск по содержимому файлов сайта при помощи Total commander.

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

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

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

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

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

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

Как использовать Firebug для измерение скорости загрузки сайта

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

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

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

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

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

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

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

Можете также посмотреть видео «Firebug — находка для верстальщика»:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Вы так же можете ознакомиться с другими статьями:

• Полезные программы
  • FileZilla - лучший FTP клиент
  • Яндекс Бар
  • Firebug
  • Web Developer - в помощью начинающему верстальщику
  • SEObar для Opera
  • Красивые кнопки для сайта
  • Notepad++ – Html и PHP редактор
  • Site Auditor — seo анализ сайта и проверка позиций
  • Скорость загрузки сайта - Page Speed
  • Клавиатурный тренажер VerseQ - как научиться быстро печатать

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• Яндекс Бар — скачать и установить панель Yandex Bar для Mozilla Firefox, Internet Explorer, Opera и Google Chrome, предоставляемые возможности
• FileZilla (FTP клиент) — что такое FTP, где бесплатно скачать программу Filezilla Client, настройка, как пользоваться ФТП менеджером Файлзила
• Расширения для Joomla (компоненты, модули, плагины) — что это такое Extensions Joomla, где скачать, как установить и удалить, решение возможных проблем
• Шаблоны для Joomla — выбор шаблона (платные, бесплатные или взломанные темы), где скачать простые шаблоны для Joomla 1.5, как их установить и активировать в Джумла
• Web Developer для Firefox — установка и возможности
• Кнопки для сайта — где скачать и как бесплатно сделать красивую кнопку для сайта онлайн
• Google Chrome (Гугл Хром) — скачать, установить и настроить самый быстрый и надежный браузер