В этой статье вы узнаете все об использовании Firebug в Firefox. Файрбаг это плагин, который будет полезен всем блоггерам, оптимизаторам, верстальщикам и вебмастерам. Он расширяет возможности браузера Mozilla для тех людей, кто работает над сайтами.
Что умеет Firebug
Плагин Firebug имеет следующие возможности:
- инспектирование и редактирование HTML, JavaScript кода, DOM
- отладка и логирование JavaScript кода
- выполнение JS напрямую через командную строку
- автоматический поиск ошибок в JavaScript, XML, CSS
- инспектирование и редактирование CSS-стилей
- отображение CSS-метрик
- отображение сетевых запросов при загрузке сайта
Пользователи Google Chrome могут обратить внимание, что это стандартные функции встроенные в Хром (доступные по нажатию F12), но выбор браузера - щепетильное и личное дело, поэтому кому-то удобнее пользоваться Firefox с плагином Firebug.
Успешная установка ознаменуется появившимся значком в виде жука.
Использование Firebug в верстке
Для того чтобы быстро посмотреть участок кода сайта (свойства CSS-стилей и пр.), нажмите правой кнопкой по элементу, затем нажмите «Анализировать элемент» («Inspect», F12, Ctrl+F12 - для открытия в новом окне). Плагин покажет вам и участок кода, и какие css-стили формируют его внешний вид, при этом сам html-код будет подсвечиваться синим.
После этого, мы можем отредактировать HTML «на лету». Для чего это нужно? Чтобы быстро посмотреть, как будет смотреться измененный код на сайте - для того чтобы не пересохранять по 10 раз исходные файлы на сервере, а сделать это лишь добившись необходимого результата при помощи плагина. И потом уже вносить изменения.
Также неоспоримым плюсом подобного «редактирования в браузере» является тот факт, что изменения происходят локально - их видите только вы. Особенно актуально это для высокопосещаемых вебсайтов, где мы не можем позволить себе внедрять HTMS+CSS код не проверив его на ошибки (искажение сайта).
Есть два варианта использования Firebug для поиска нужного куска кода. Первый - водить мышкой по сайту и тогда в окне плагина будет подсвечиваться соответствующий HTML код. Второй - водить мышкой по HTML коду в окне плагина и тогда будут подсвечиваться элементы на сайте, соответствующие коду, на который указывает мышь. Все это работает мгновенно и динамически, что позволяет быстро разобраться, сориентироваться в коде своего или чужого сайта.
Только не забудьте нажать кнопку для включения этой функции:
Затем, найдя нужный элемент, щелкните по нему левой кнопкой и перейдите к окну Firebug чтобы работать над кодом.
При этом элементы можно сворачивать и разворачивать - для компактного вида они сворачиваются по тегам: div, p, link и пр.
Как пользоваться Firebug для редактирования CSS
Очень просто. Если в левом окне у нас HTML код, то в правом - CSS-стили, которые можно на лету редактировать и наблюдать за изменениями в оформлении сайта.
Использование плагина firebug для работы с CSS предусматривает следующие сценарии:
1. Отключение CSS-стилей по клику (нажмите на кружочек, чтобы выключить какое-нибудь свойство)
2. Поиск файла.css из которого подгружаются стили к определенному элементу (а также поиск конкретной строки в этом файле, чтобы было удобно вносить изменения и редактировать таблицы каскадных стилей):
Как использовать плагин Firebug чтобы измерить скорость загрузки вашего сайта
Скорость загрузки сайта (наличие ошибок при загрузке) - важный показатель не только при оптимизации сайта для поисковых систем, но и для удобства пользователей. Никто не хочет ждать пока медленный сайт загрузится, а о пользователях нужно заботиться.
И в этом нам тоже поможет чудесный плагин. Как это посмотреть? Перейдите на вкладку «Сеть» в плагине и обновите страницу на которой находитесь. После этого вы получите раскладку - какие элементы сколько грузятся, в каком порядке и какой ответ дает сервер при запросах к элементам. Эта информация позволит оптимизировать сайт и работать над ускорением загрузки.
Вот и все, теперь вы знаете как использовать и работать с плагином файрбаг, используя его как визуальный редактор сайта. Зачем? Задачи разные: поправить форму поиска или подписки, поиграться со шрифтами и размерами текста и заголовков, найти HTML-код элемента чтобы удалить его и многие другие бытовые задачи, стоящие перед вебмастерами и блоггерами.
Сам я являюсь давним поклонником Opera, еще с тех времен, когда она была платной. По моему мнению, для серфинга по сети не найти.
Но для работы над сайтом Opera подходит гораздо меньше, чем всем известный браузер Firefox. Оперу, конечно же, тоже можно заточить под верстку сайтов, но у нее, как ни крути, нет такой штуки, как Firebug, а это для начинающего верстальщика ой как важно. Хотя время летит и с момента написания этой статьи разработчики браузеров, видимо меня услышав, добавили во все свои творения базовые возможности героя сегодняшней статьи, но оригинал то все равно остается лучшим из лучших. .
Плагины для браузеров, помогающие вебмастерам
Файрбаг изначально являлся расширением только для и он позволял существенно снизить время на нахождение и исправление нужного фрагмента в Html коде, а если вы начинающий вебмастер или структура файлов движка CMS (системы управления контентом) вам совершенно незнакома, то я вообще не представляю, как можно обойтись без него.
Да, конечно, можно открывать исходный код нужной страницы и искать так нужное место, но это время и рутина, которую легко и непринужденно позволяет избежать наш герой. Удобная и незаменимая вещь, при чем аналога ему раньше даже и не было.
Вот и приходилось мне раньше жить на два дома. В Opera я бродил по интернету, а в Firefox — работал над своими проектами, постоянно используя возможности расширения, о котором сегодня пойдет речь.
Но кроме верстальных дополнений для браузеров вам, наверняка, при работе с вашими проектами могут понадобиться и SEO расширения, позволяющие оперативно отследить PR и ТИЦ открываемых в обозревателе страниц, посмотреть закрыты или нет для индексации поисковиками внешние ссылки на этих страницах (особенно это интересно при комментировании блогов и поиске так называемых Dofollow блогов) и многое другое (ссылки на них смотрите в самом начале статьи).
Если уж речь зашла о браузерах, то мне очень понравился новый — быстрый, даже в сравнение с Opera, удобный и красивый, но пока я еще не разобрался, есть ли к нему , что я опишу ниже.
Firebug — это не просто дополнение, добавляющее какой либо расширенный функционал вашему Фаерфоксу. Очень верно про это написано на странице разработчиков — это эволюция web-разработки.
Да, это именно так. Эволюция — это когда вы переходите от палки-копалки к экскаватору. Эффект потрясающий и вы это сразу почувствуете, начав использовать этот плагин. Ну, пожалуй, хватит петь дифирамбы, пора рассказать про его возможности. Скачать Фаербаг вы можете со страницы аддонов . На данный момент актуальной версией является 1.11.4.
Естественно, что устанавливать это расширение нужно, находясь именно в Фаерфоксе, ибо там будет намного проще. Если же вы щелкнули по кнопке скачивания данного расширения в каком-либо другом браузере, то откроется стандартный диалог загрузки, в котором вы сохраните этот дистрибутив на своем жестком диске.
Затем вам нужно будет зайти в Мазилу, из верхнего меню выбрать «Файл» — «Открыть файл» и найти на вашем жестком диске скачанный файл. В результате опять же начнется процесс установки.
После перезагрузки браузера вы увидите в правом нижнем углу окна значок Firebug в виде жука — это значит, что данное дополнение успешно установилось и ждет ваших приказаний. Сначала рассмотрю те его возможности, которые использую сам при работе с сайтами, а затем вкратце расскажу о том, что еще вы можете делать с помощью него вообще.
Бывает, что вам нужно что-то поменять, доделать, исправить, просто посмотреть как это реализовано и работает на своем или чужом ресурсе. Да, да, вы не ослышались, именно на чужом ресурсе. Понравилось вам то или иное решение вебмастера и вы хотите сделать у себя так же — Фаербаг вам поможет.
В принципе, я уже говорил, что посмотреть исходный код страницы можно и без этого расширения (щелкаете правой кнопкой мыши по странице в любом обозревателе и выбираете из контекстного меню что-то вроде «Исходный код страницы» или «Исходный код»), но этого кода будет много, а для того, чтобы найти нужное место, потребуется время. Что нам предлагает в этом случае огненный жук?
Как пользоваться Firebug при верстании сайта
А он предлагает вам щелкнуть по интересующему месту вебстраницы, опять же правой кнопкой, и выбрать из контекстного меню — «Анализировать элемент» (в англоязычной версии плагина это будет “Inspect”). И вам, о чудо, откроется в его окне только тот участок кода страницы, который отвечает за формирование именно того элемента, который вам интересен. Удобно?
Безусловно. Только за одно это следует полюбить данный плагин. Но ведь он может много чего еще. Код нужного вам элемента вы увидите в открывшемся внизу страницы окне этого дополнения, показанном на рисунке выше. Тот участок кода, который отвечает за интересующий вас элемент веб страницы, будет подсвечен синим.
Так же обратите внимание на подчеркнутую мною на рисунке красной линией строку, начинающуюся с слова «Редактировать» в окне Фаербага. Если вы щелкните по этому слову, то сможете внести изменения в выделенный фрагмент Html кода, которые тут же отобразятся на странице.
Измените, например, в окне плагина url картинки на намерено несуществующий и картинка исчезнет с вебстраницы, вернете все обратно и картинка появится. Но обратите внимание — эти изменения никак не отразятся на вашем ресурсе, все изменения увидите только вы и только на этой вебстранице, подчиненной всемогущему огненному жуку. Как только вы обновите страницу, то все внесенные плагином изменения исчезнут.
С помощью Firebug можно смоделировать то, что может произойти при изменении Html или CSS кода вебстраницы. Вы можете таким образом, с помощью его возможностей, посмотреть (не тратя времени на поиск файла движка вашей CMS, отвечающего за вывод этого участка) разные варианты и выбрать нужный, или же вообще отказаться от изменения, если текущий вариант окажется не так уж и плох.
Но вот если вы все же поняли, что изменения в Html код вносить нужно и они приведут к улучшению вида вашей вебстраницы, то вот тут и наступает тот сложный момент, в котором вам, к сожалению, не поможет разобраться даже огненный жук (он, к сожалению, не всесилен).
Проблема поиска нужного участка кода в файлах движка
Вам придется самостоятельно отыскивать тот файл в движке вашего сайта, форума или блога, который генерирует данный участок Html кода. Файл этот, скорей всего, будет с расширением.php, т.е. написанным на языке серверного программирования PHP и, соответственно, этот участок в нем может выглядеть совсем непохоже на то, что вы видите в исходном коде вебстраницы.
В этом, на мой взгляд, и состоит основная сложность редактирования внешнего вида и содержания страниц вебсайтов, построенных на каком-либо движке (CMS). Если вы начинающий вебмастер или никогда не сталкивались с таким движком, то с ходу определить в каком файле формируется интересный вам фрагмент вебстраницы вряд ли сможете.
Потом, со временем, набравшись опыта, для вас это не будет составлять труда, а пока я предлагаю вам действовать по следующей схеме. Палю тему, как любят говорить на — шутка, никакого секрета тут, конечно же, нет.
Вам нужно будет для начала за что-то зацепиться в том коде, который открыл для вас любезный Firebug. Найти что-то уникальное или редко встречающееся, что, наверняка, должно выглядеть так же и в PHP файле вашего движка.
При осуществлении поиска по содержимому файлов в Тотал Коммандере, может возникнуть проблема с русскими словами, а точнее их кодировкой. Если Total commander ничего не нашел по вашему запросу на русском, поставьте галочку напротив «UTF-8» в окне поиска и все найдется.
Возможности и принципы использования Firebug
Давайте продолжим рассмотрение возможностей огненного жука, которое начали в этой статье. Мы уже в общих чертах коснулись его работы, а именно того, как можно использовать этот плагин для определения фрагмента вебстраницы, отвечающего за тот или иной элемент дизайна.
Кроме описанного чуть выше способа (щелкнуть по интересующему месту вебстраницы правой кнопкой и выбрать из контекстного меню - «Анализировать элемент») это расширение можно вызвать к жизни и простым нажатием на иконку паучка в правом нижнем углу окна браузера или же с помощь клавиши F12. Повторное нажатие по этой клавиши приведет к закрытию окна Фаербага.
Если вы хотите, чтобы плагин открылся в отдельном окне, то щелкайте по паучку удерживая Shift на клавиатуре или используйте сочетание клавиш Ctrl+F12. Вы сами выберите наиболее удобный для вас вариант вызова к жизни этого шедевра инженерной мысли. Окно его будет выглядеть у вас примерно так:
Сверху будут расположены кнопки панели управления, а основная часть окна будет разделена на левую и правую половину. В левой половине вы можете наблюдать структуру HTML кода открытой в браузере страницы, а в правой половине — стили CSS, которые используются для задания того или иного вида этого веб документа.
Как использовать Фаербаг для изучения HTML
Firebug же позволяет реализовать две очень интересные возможности, помогающие разобраться с устройством кода открытой в браузере страницы. Можно водить мышью по самому HTML тегу в окне этого плагина, а на вебстраничке будут выделяться те элементы, за формирование которых этот тег отвечает (щелкаете, например, по Div контейнерам и тут же увидите вверху подсветку этого контейнера в дизайне вебстраницы).
А можно, наоборот, активировать такой хитрый режим в этом расширении, что при этом, мышью вы будете водить по самой вебстраничке, а HTML код, соответствующий тегам (находящимся под курсором мыши), будет в реальном времени показываться в окне Фаербага. Просто незаменимая вещь при изучении устройства того или иного веб ресурса, особливо для начинающих.
Для осуществления всего того, что я только что описал, нам понадобится информация, отображаемая в левой половине окна плагина, где отображаются теги данной вебстраницы открытой в браузере. Там Вы можете наглядно видеть вложенность друг в друга тех или иных тегов, например, контейнеров DIV.
Для раскрытия содержимого тега можно нажать на плюсик рядом с ним. Подводя мышку к тому или иному контейнеру DIV в левой части окна Firebug вы можете наблюдать, какие элементы вебстраницы входят в данный DIV-контейнер.
Содержимое DIV-контейнера плагином будет закрашено синим муаром на вебстранице, через который вы сможете видеть, какие именно из элементов дизайна находятся в этом DIV контейнере. Правда открытая вами вебстраница может быть очень большой и тогда придется использовать прокрутку для поиска выделенного синим муаром фрагмента дизайна.
Как видно из приведенного выше скриншота, контейнер
отвечает за вывод блока с заголовком и описанием моего WordPress блога.Но можно пойти от обратного для получения через Firebug информации о том, какой тег за вывод какого блока на данной вебстранице отвечает. В этом случае, мы будем подводить мышь не к DIV блокам с кодом, а напрямую к интересующим нас элементам открытой в браузере вебстранице. При этом в окне плагина, в области для показа HTML кода, синим фоном будут подсвечиваться те теги (например, DIV контейнеры), которые отвечают за формирование данного блока.
Все это будет динамично отображать в окне данного расширения в соответствии с перемещением мыши по вебстранице. Очень наглядный и удобный способ использования огненного жука для изучения особенностей построения своего или чужого веб проекта.
Для реализации этого способа нужно будет только активировать соответствующий режим, нажав на показанную на рисунке кнопку панели:
После того, как вы нажали эту кнопку, ведите мышью над нужными участками вебстраницы, а в левой части окна плагина сможете наблюдать участки Html кода, отвечающие за формирование данных элементов дизайна (они будут выделены синим фоном). При этом фрагмент страницы, над которым находится курсор мыши, будет заключен в синюю рамочку:
После того, как нужный фрагмент найден, вы можете щелкнуть по нему левой кнопкой мыши и перейти в левое поле окна Фаербага для дальнейшей работы с тегами этого элемента дизайна. С тегами в окне плагина можно производить любые манипуляции и результат вы увидите сразу же на открытой в браузере странице.
При этом, естественно, никаких изменений в реальных файлах движка сайта производиться не будет. Но зато, вы сможете в реальном времени промоделировать различные варианты построения дизайна вебстраницы. Если же новый, смоделированный с помощью Firebug вариант вас устроит, то придется вносить изменения уже в реальные файлы движка, найти которые вы сможете,используя описанный чуть выше способ с участием Total commander.
Как использовать Firebug для работы с CSS
В правом окне этого расширения отображаются все свойства CSS, которые отвечают за оформление выделенного в левом окне фрагмента кода. Эти CSS свойства будут определять внешний вид данного Html блока. Это может быть его положение относительно других блоков данной страницы, размер, тип и цвет шрифта, используемого в данном блоке для отображения цвета или ссылок и многое другое.
Для наглядной демонстрации возможностей CSS в оформлении какого-либо элемента вебстраницы, вы можете подвести курсор мыши к какому-либо стилевому правилу, приведенному в правой части окна. Рядом с этим правилом появится серый перечеркнутый кружочек. Щелкнув по нему мышью вы отключите данное CSS свойство на этой вебстранице и рядом с ним появится красный кружочек.
При этом вы сможете наблюдать на открытой странице сайта в реальном времени произошедшие изменения. Т.о. огненный жук помогает разобраться именно в том, какое правило в файле таблицы каскадных стилей за что отвечает в оформлении данного элемента дизайна. Для того, чтобы снова включить отключенное CSS свойство, нужно будет снова щелкнуть по красному перечеркнутому кружку рядом с ним.
Расположенные в правой части свойства можно редактировать точно так же, как мы редактировали теги в левой части окна этого расширения. Все внесенные изменения в свойства из правой области будут тут же отображаться на открытой в Мазиле вебстранице, но ни как не повлияют на реальные свойства CSS, прописанные в файле таблиц каскадных стилей, имя которого вы можете видеть над данным блоком:
В окне Фаербага будет указана строка в файле таблиц каскадных стилей, на которой прописано данное CSS свойство. Поэтому, если промоделированные изменения в оформлении вебсайта вам понравятся, то для внесения этих же изменений в таблицы стилей вашего сайта нужно будет лишь открыть нужный файлик и найти там подсказанную в окне плагина строку. Все намного проще, чем в случае с внесением изменений в HTML код страницы.
Как измерить скорость загрузки сайта в Фаербаге
Ну и напоследок, хотел бы рассказать о том, как с помощью этого расширения измерять скорость сайта (не путайте с ).
Скорость, с которой загружается ваш ресурс, является очень важным показателем, влияющим на успешность и беспроблемность его поискового продвижения. Если у вашего проекта со скоростью загрузки не все в порядке, то это может повлечь за собой довольно неприятные последствия, как со стороны поисковых систем, так и со стороны лояльности ваших посетителей.
И самое важное то, что посетители могут отказаться от работы с вашим ресурсом, т.к. очень долго подгружаются вебстраницы. Кроме этого поисковые системы, в особенности Google, учитывают скорость загрузки при общей оценке полезности того или иного ресурса, а так же она может влиять на положение вашего веб проекта в поисковой выдаче.
Чтобы выявить и устранить узкие места в скорости загрузке элементов вашего ресурса можно воспользоваться специальными сервисами, позволяющими это дело измерить. Об этом я рассказывал в первой статье про определение и увеличение скорости загрузки сайта ( с ней можно ознакомиться).
Вам достаточно будет ввести адрес нужной вебстраницы и через некоторое время вы получите полную разблюдовку по тому, какой элемент за сколько времени загружается. Таким образом можно выявить явно тормозящие элементы и принять меры к ускорению их загрузки.
Но то же самое можно сделать и не обращаясь к сторонним сервисам. У нашего любимого плагина Firebug имеется такая возможность. Достаточно просто нажать кнопку «Сеть» и обновить открытую вебстраницу.
В результате, вам будет предоставлена полная информация по загрузке всех элементов вебстраницы. Анализируйте и принимайте при необходимости меры по ускорению загрузки. На сегодня, пожалуй, что все. В следующей статье я хочу продолжить тему, а так же рассказать об еще одном замечательном плагине для браузера Firefox, который поможет нам при работе с оформлением страниц сайта.
Плагин этот называется и имеет просто огромное количество всевозможных инструментов, позволяющих упростить работу по верстке или корректировки шаблона вашего веб ресурса. Ну, а дальше мы перейдем к рассмотрению SEO плагинов для FireFox и Opera.
Можете также посмотреть видео по теме, которое лишним уж, наверняка, не будет:
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Web Developer для Firefox - установка и возможности плагина для верстальщиков и вебмастеров
SEObar - удобный и информативный SEO плагин для Оперы
Как вести поиск по содержимому файлов в Total Commander
Расширения и темы для Google Chrome
Всем привет!
Сегодня я расскажу вам об одном очень полезном расширении для браузеров 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 для популярных браузеров Mozilla Firefox, Google Chrome и Opera, как его установить, а также постараюсь подробно описать, как пользоваться Firebug.
Изначально, плагин или расширение Firebug было создано группой разработчиком для Mozilla Firefox, поэтому в данном браузере расширение имеет самый мощный функционал.
Для остальных популярных интернет браузеров, таких как: Google Chrome, Opera и Internet Explorer, была разработана упрощенная версия — Firebug Lite, которая существенно уступает оригиналу, но тем не менее является вполне работоспособной.
Хочу подчеркнуть, что в этой статье я не стану описывать все возможности Firebug, а затрону лишь работу с HTML и CSS, так как основные читатели моего блога — это начинающие веб-мастера и для них будет сложно усвоить такие функции, как «JavaScript отладчик» или «DOM исследование».
С использованием дополнения, отпадает необходимость копаться в файлах шаблона, пытаясь определить какой class или id задан для определенного участка страницы.
В общем, работа с внешним видом сайта становится гораздо легче, быстрее и приятней. Поехали!
Где скачать и как установить расширение Firebug
Чтобы скачать расширение Firebug для Mozilla Firefox, необходимо открыть данный браузер и перейти по этой ссылке . Попадаем мы на страничку, где надо нажать на кнопку — «Добавить в Firefox»:
Затем откроется такое окошко:
Нажимаем на кнопку — «Установить сейчас» и начнется недолгий процесс установки. Если после перезагрузки браузера в верхнем правом углу появится значок с изображением жука, то значит Firebug успешно установился.
Установка на Chrome и Opera очень схожа и я думаю Вы разберетесь. Вот ссылочки на страницы для скачивания
Скачать Firebug для Chrome
Скачать Firebug для Opera
Выше я уже писал, что в браузерах Google Chrome и Opera, расширение представлено в сокращенном виде и чтобы более полно описать функционал Firebug, я запущу его в браузере Mozilla Firefox.
Работа со стилями. Как пользоваться Firebug
Начнем с самого простого примера. Допустим, нам надо поправить форму подписки от feedburner. У новичков очень часто с этим бывают большие сложности.
Недавно мне пришло письмо от одного моего постоянного читателя, в котором он попросил меня помочь справится с «непослушной» формой подписки. Ну вот у меня теперь есть прекрасная возможность продемонстрировать работу Firebug и заодно помочь человеку.
Вот как на данный момент выглядит форма на блоге автора письма:
Просто человек захотел разместить форму подписки непосредственно в статье и она растянулась у него на ширину всей страницы. Теперь я попробую исправить ситуацию средствами «волшебного» дополнения Firebug.
В браузере я нажимаю на значок жука и внизу страницы откроется «рабочая зона» расширения:
Далее, на панели управления выбираю иконку с изображением стрелочки (на скриншоте я ее обвел красным). C помощью этой функции можно выделить любой объект на странице и его код отобразится во вкладке — «HTML».
После нажатия на иконку, отвечающую за выделения, передвигаю курсор на край формы подписки и границы зоны очерчивается рамкой:
Ну вот и код формы подписки, с которым мне предстоит поработать. Чтобы закрепить выделенную область, надо щелкнуть, по появившейся рамке, левой клавишей мыши и тогда код формы должен подсветится синим фоном:
Теперь я буду править форму подписки, так сказать, в реальном времени.
Итак, в любом шаблоне есть файл style.css и как правило все стили прописываются именно в этом файле, но бывают и исключения. В форме подписки от feedburner стили заложены в сам код и мне надо найти слово style (с англ — стиль), после которого прописаны селекторы и их значения, отвечающие за различные параметры:
Давайте разберем, что за селекторы заданы для данной формы.
Border: 2px solid #00B344;
Селектор border (с англ. — граница) выводит рамку вокруг формы, толщиной в 2px (два пикселя).
Значение solid (можно перевести, как сплошная линия) задает вид рамки, т.е. если задать другое значение, например: dashed (пунктирная линия), то рамка станет пунктирной.
И последнее значение #00B344 — это цвет рамки.
Padding: 3px;
Селектор padding (с англ. — набивка) отвечает за внутренние отступы, т.е. в данном случаи селектор задает расстояния в пикселях от самой формы до рамки.
Text-align: center;
Селектор text-align (с англ. — выравнивание текста) выравнивает текст, относительно страницы. Значение center (с англ. — центр) дает команду браузеру выравнивать данные элемент по центру страницы.
Конечно я не буду перечислять все селекторы, которые используются в CSS. Делаю я это, так сказать, для наглядности и облегчения восприятия. В будущем я обязательно выпущу бесплатный, для своих подписчиков , видеокурс по основам HTML и CSS.
Итак, с заданными стилями мы разобрались, теперь я буду приводить форму подписки в надлежащий вид.
Для этого я применю еще один селектор margin (с англ. — край), который отвечает за внешние отступы, т.е. расстояния от рамки до краев расположенных рядом элементов.
Видно, что форма растянута и с помощью внешних отступов можно сделать ее немного компактней.
Делаю двойной клик левой копкой мыши по нужному участку кода и теперь, прямо в рабочей зоне расширения Firebug, можно вносить изменения в уже существующие параметры или задавать новые:
В самый конец кода формы подписки я добавляю селектор margin изадам для него следующие значения:
Margin: 0 180px 0 180px;
Немного поясню, что за цифры я тут написал. Цифры — это расстояния внешних отступов в пикселях, начиная с верхнего и далее по часовой стрелки. Т.е. для верхнего и нижнего отступов — значение ноль, а для левого и правого, задано расстояние в 180 пикселей.
Если есть одинаковые значения, то их можно «склеить», тем самым немного сократив код:
Margin: 0 180px;
Вот что в итоге должно получится:
И вот оно чудо! Форма подписки моментально приняла другой вид.
Все изменения внешнего вида сайта, сделанные с помощью расширения Firebug, для пользователей будут незаметны, и после обновления страницы исчезнут.
Если навести курсор на синий фон кода, то на странице подсветятся: внешние отступы — желтым цветом, внутренние — фиолетовым.
Другое дело! Только вот кнопочка «Подпишитесь» уж как-то сильно прижалась к полю ввода e-mail, надо ее немного опустить. Выделяю кнопку с помощью вышеописанных действий и вот ее код:
Но теперь, для наглядности, я пойду другим путем и воспользуюсь вкладкой «Редактировать», где задам следующие отступы для кнопки:
Margin: 7px 0 3px 0;
У меня получились одинаковые значения для правого и левого отступа и надо «склеить» нули:
Margin: 7px 0 3px;
Смотрим на результат:
Как я уже писал выше, после перезагрузки страницы все изменения исчезнут и чтобы они по-настоящему вступили в силу, придется править файл шаблона.
Firebug не только с легкостью находить коды, отвечающие за то или иной участок веб-страницы, но и предоставляет возможность предосмотра будущих изменений.
Но что же делать, если стили прописаны в отдельном файле? Давайте разберем и эту ситуацию.
Теперь для примера я выбрал блок с хлебными крошками со своего блога. Выделяю его, и в правом окне рабочей зоны отобразятся стили, которые прописаны в файле style.css :
Итак, что мы видим. Мне открылись все стили, прописанные в файле style.css, для идентификатора breadcrumbs.
Допустим, я хочу изменить цвет текста, и размер шрифта. Для этого мне понадобиться внести изменения в значения для селекторов: color (с англ. — цвет) и font-size (с англ. — размер шрифта).
Делаю двойной клик по значению селектора и появляется поле для правки:
Теперь мне не нравиться тени шрифта, надо их убрать. За тени отвечает селектор text-shadow (с англ. — тень текста). Навожу курсор на селектор и слева от него появляется красный значок:
Если кликнуть на этот значок, то селектор исчезнет и отменяться все его значения. Смотрим:
Тени, как не бывало! Следуя своим внезапным капризам, я решил сделать текст немного жирнее. Ага, а такого селектора здесь нет. Ну что же, придется его добавить.
За «жирность» текста в CSS отвечает селектор font-weight (с англ. — начертание шрифта).
Делаю двойной по символу «;» (можно кликать по любой строчке), который находится в конце каждой строки или по символу «}» и появится поле для ввода нового селектора и его значений:
Сначала, в появившемся поле, я прописываю сам селектор, потом нажимаю клавишу Tab и вписываю значение bold (с англ. — отчетливый):
Наверное Вы заметили, что Firebug показывает порядковый номер строки, начиная с которой в файле style.css прописаны стили для выделенного идентификатора или класса:
И если кликнуть по номеру, то в правом окне рабочей зоны, откроется файл style.css и стили для идентификатора, с которыми я работал, подсветятся голубоватым фоном.
Также для правки стилей можно пользоваться вкладкой CSS, где будет отображаться файл style.css целиком:
Если выделить объект и воспользоваться вкладкой «Маркет», расположенной в правом окне рабочей зоны, то мы увидим следующую картину:
Как Вы уже догадались, в этой вкладке наглядно демонстрируется размеры самого выделенного элемента (690х41 пикселей), а также: внутренние отступы (padding) , рамка (border) и внешние отступы (margin).
Надо закруглятся, а то я так статью никогда не закончу. Надеюсь я доходчиво объяснил использовать Firebug для работы со стилями, но если какие-то моменты Вам остались непонятны, задавайте свои вопросы в комментариях и постараюсь точечно разобрать ситуацию.
P.S. Как видите, если немного знать английский язык, то изменение стилей окажется не таким уж и сложным занятием.
На сегодня у меня все! Как вам статья?
С уважением, Виталий Кириллов
Он позволяет увидеть то, как будет выглядеть внешний вид блога, не внося изменения в код темы WordPress . Откорректированный дизайн будет доступен в режиме онлайн только Вам и только на открытой странице браузера. Если Вы захотите попробовать новый шрифт или размер символов, то благодаря Firebug Chrome можно моментально увидеть изменения:smile:.
Конечно, реально обойтись без расширения для Гугл Хром и самостоятельно доработать код, найдя нужное место. И все же я помню, как абсолютно ничего не понимая в коде, пытался изменить дизайн блога WordPress. Приходилось регулярно , правда, хорошо, что все предварительные изменения делал на специально .
В общем, Firebug Lite установить нужно обязательно и научиться им пользоваться тоже. Это очень нужное и полезное расширение для Хром еще не раз пригодится Вам;). Лично я просто обожаю его за свою простоту и эффективность.
Как установить Firebug на Chrome?
Для пользователей браузера Firefox также есть своё дополнение Mozilla FireBug. Скачать бесплатно Firebug для Firefox можно на официальном сайте . Кстати, это расширение имеет гораздо больше функциональных возможностей, чем в браузере Хром.
Как пользоваться расширением FireBug в Chrome?
Узнать, как пользоваться FireBug не составит большого труда. На мой взгляд, даже обладая минимальными знаниями можно быстро сделать красивый внешний вид. FireBug для Chrome – это очень удобная и нужная вещь, рекомендую всем начинающим web-мастерам освоить работу с ним.
Мы еще не раз будем возвращаться к этому ценному расширению при работе над дизайном и чтобы всегда быть в курсе последних новостей, подписывайтесь на обновления .
Учимся общаться с президентами! С президентом России нужно говорит хорошо и бросать трубку быстро;), вот как-то так:
