Firebug для браузера Firefox — где скачать, как установить и как пользоваться. Firebug для Firefox! Как пользоваться расширением Firebug
Большинство начинающих веб-мастеров не делают различий между браузерами. Да и действительно, есть ли какая-нибудь принципиальная разница? Ответ напрашивается сам собой. Разницы быть не должно, ведь Ваш сайт должен одинаково смотреться в любом браузере.
Однако разница есть. И в первую очередь она касается именно веб-мастеров. Потому что при создании и отладке и удобнее использовать тот браузер, который сам будет Вам помогать в этом.
А точнее не сам браузер, а дополнение к нему.
Итак, встречайте, сегодня я Вам расскажу о таком незаменимом плагине для Mozilla Firefox, как Firebug .
И первый вопрос: Что же такое Firebug?
Firebug — это расширение для браузера Mozilla Firefox, которое является консолью для отладки и выявления ошибок, возникающих при разработке сайта.
Оно предоставляет веб-мастеру множество инструментов для оценки работоспособности кода страницы, показывает привязанные к каждому элементу css-стили, позволяет в режиме реального времени изменять фрагменты кода и стили. И тут же, не выходя из браузера, увидеть результат этих изменений.
Как установить Firebug?
Установка Firebug довольно проста. Для начала запускаем Mozilla Firefox (Firebug устанавливается только на этот браузер) и переходим по ссылке: . Находим там кнопку «Установить Firebug». Нажимаем на нее и попадаем на станицу установки дополнений для Firefox.
Нажимаем на кнопку «Добавить в Firefox». Происходит загрузка плагина и появляется окно:
Нажимаем «Установить сейчас». Все. Установка завершена.
Для того, чтобы плагин заработал, нужно перезагрузить браузер Firefox. После перезагрузки в панели браузера появится кнопка включения расширения Firebug.
Как использовать Firebug?
Способов использования Firebug довольно много, так как он содержит множество инструментов. Все их описывать я не буду. Расскажу только про некоторые основные.
Во-первых, Firebug позволяет быстро находить нужные фрагменты кода и определять для них правильные , чтобы назначать им css-стили. А также показывает в каком файле и в какой строке прописаны стили для выделенного фрагмента кода или селектора.
Во-вторых, Firebug дает возможность подбирать параметры атрибутов в режиме реального времени без перезагрузки страницы и необходимости править какие-либо файлы.
В-третьих, Firebug позволяет отследить иерархию контейнерной модели, подсвечивая в окне браузера параметры выбранного блока разными цветами (отступы margin, pading, границы). Также в Firebug есть удобный инструмент для анализа макета блока и изменения атрибутов «на лету».
В-четвертых, Firebug содержит удобные инструменты для анализа скорости загрузки страницы и много еще чего интересного.
Если Вы хотите более детально ознакомиться с принципами использования дополнения Firebug, можете почитать о них на официальном сайте.
А я приготовил Вам небольшое видео. Несколько примеров использования Firebug. Смотрите:
Я постараюсь максимально кратко и понятно рассказать как пользоваться фаербагом (инспектором) и зачем он нужен. Это невероятно удобный инструмент, который я использую при создании/редактировании сайтов ежедневно. Изначально Firebug был создан в качестве плагина для Firefox для того, чтобы находить ошибки в html коде, в скриптах и оперативно их устранять. Затем плагин прижился и теперь многие вебмастера используют его для правки html кода, css, скриптов и не только. Впринципе, если захотеть, то можно сверстать целую страницу в firebug, но все же стоит использовать его только для правки=). Вы можете вызвать его в любом из последних версий браузеров chrome, opera и firefox при нажатии кнопки F12 или правой кнопкой мыши на любой элемент страницы -> просмотр кода элемента (проинспектировать элемент). Хочу отметить, что я показываю все на примере браузера chrome.
Вы увидите нечто подобное (скриншот ниже). На скриншоте: наверху — страница сайта, снизу — Firebug.
Возможно для кого-то это покажется страшным зрелищем:), но не пугайтесь, все достаточно просто. Давайте рассмотри подробнее, что же мы сможем делать при помощи фаербага.
В данном случае я нажал на просмотр кода элемента заголовка
. В левом окне вы видите весь html код страницы и мой подсвеченный заголовок .В правом окне firebug находятся стили css, которые привязаны к данному тегу. Т.е. если вы выбираете какой-либо элемент будь то div, p, table или любой другой, то в правом окне фаербага вам будут показываться те стили css, которые каким-либо образом касаются выбранного элемента. Удобно, не правда ли?:) Но это не все, что вы можете делать при помощи плагина.
Редактирование страницы при помощи Firebug
Редактирование страницы при помощи 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 — отладчик 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?
Firebug – одно из самых популярных расширений Mozilla Firefox. Кроме того, это инструмент, который помогает упростить работу веб-разработчика. Он включает в себя много замечательных инструментов, помогающих в отладке, проверке HTML, профилировании и т.д., которые будут полезны программистам.
Инструменты
- Отладка Javascript
- Командная строка Javascript
- Проверка Javascript Performance и XmlHttpRequest
- Вход через логин
- Трассировка
- Проверка HTML и редактирование HTML
- Редактирование CSS
Где достать Firebug?
- Посетить официальный сайт getfirebug.com
- Там, в правой части сайта, вы увидите кнопку. Нажмите на неё, чтобы начать установку.
- После нажатия на изображение, возникнет следующее диалоговое окно. Нажмите на кнопку “Установить сейчас”.
Меню “Firebug” и Консоль ошибок будет открываться в Firefox в меню «Инструменты». Если вы нажмете нам консоль ошибок, откроется окно со списком ошибок, предупреждений и сообщений системы. На самом деле, эта консоль ошибок – то же самое, что и раздел Firebug.
Меню Firebug
После нажатия на “Firebug” в меню «Инструменты», откроется следующее подменю.
Проверка содержимого страницы
Это единственное меню, которое называется “Инспектировать элемент” – просто нажмите правую кнопку мыши в любой области страницы. Это очень полезное меню.
Консоль Firebug
На изображении ниже представлена консоль Firebug.
Она состоит из шести вкладок: вкладка Console, HTML, CSS, Script, DOM и Net.
- Вкладка Console: Для создания логина, настройки профиля, трассировки и выполнения команд командной строки.
- Вкладка HTML: Для проверки элементов HTML, добавления HTML и изменения стилей в момент запуска. Кроме того, здесь расположены подразделы CSS, Layout и консоль DOM.
- Вкладка CSS: Здесь можно запросто проверить, сколько файлов css включено в страницу сайта. Вы можете выделить любой css-файл и внести в него изменения. (Я не особо использую этот раздел, так как то же самое есть в разделе HTML).
- Вкладка Сценарий: Служит для отладки кода Javascript. Здесь также включены функции просмотра и остановки выполнения сценария.
- Вкладка DOM: Служит для просмотра DOM. (Я особо не использую эту функцию. Однако, пользуюсь ей из консоли HTML и Script).
- Вкладка Сеть: Служит для мониторинга работы сети. Она даст вам знать, почему ваша страница (или весь сайт) слишком долго загружается в браузере.
Горячие клавиши и кнопки мышки
F12. Используется для открытия/закрытия консоли Firebug.
Обо всех горячих клавишах можно прочитать .
Вот два видеоурока по использованию FireBag
Возникли проблемы?
Прочтите страницу FAQ . Если проблема все еще не решена, напишите здесь комментарий. Я как можно быстрее постараюсь на него ответить. Также вы можете связаться с командой разработчиков Firebug.
Итог
Вот и все! Думаю, теперь у вас есть представление о том, что такое firebug, как он выглядит, и как его установить. Если вы уже знакомы с firebug, этот раздел также будет вам полезен, чтобы закрепить знания. В следующих разделах я расскажу более подробно о каждой функции. Не стесняйтесь, оставляйте комментарии к статье и высказывайте свои идеи по этому поводу. Ваши комментарии сделают эту статью только лучше. А я буду им очень признателен.
В этой статье вы узнаете все об использовании 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-код элемента чтобы удалить его и многие другие бытовые задачи, стоящие перед вебмастерами и блоггерами.