В этой статье вы узнаете все об использовании 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-код элемента чтобы удалить его и многие другие бытовые задачи, стоящие перед вебмастерами и блоггерами.
Уже год я использую 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, как любое расширение служит для увеличения возможностей браузера. В данной статье я расскажу: где скачать 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. Как видите, если немного знать английский язык, то изменение стилей окажется не таким уж и сложным занятием.
На сегодня у меня все! Как вам статья?
С уважением, Виталий Кириллов
Firebug – бесплатный плагин для браузера Mozilla Firefox, одной из функций которого является работа с исходным кодом веб-страницы. С помощью расширения FireBug можно просматривать код страницы, редактировать или удалять элементы и атрибуты "на лету", при этом Вы можете просматривать результаты изменений на веб-странице в реальном времени. Т.е. при внесении изменения в код, страница браузера немедленно обновляется, отображая эти изменения в окне браузера. Бывает, что вам понравилось то или иное решение веб-мастера на чужом ресурсе, FireBug вам поможет подсмотреть как это работает и реализовать эти стили на своем сайте.
Установка расширения FireBug
Щелкните левой клавишей мышки в браузере Mozilla Firefox значок "Инструменты" и в выпадающем окне выберите "Дополнения", затем в поисковом окошке введите "FireBug" и нажмите клавишу "Enter". Найдите в появившемся списке расширений плагин Firebug и кликните большую зеленую кнопку "Add to Firefox".
После установки плагина Firebug в верхнем углу браузера Mozilla Firefox появится значок в виде жучка, а это значит, что данное дополнение успешно установилось.
Как запустить Firebug
Если щелкнуть правой кнопкой мышки по интересующему месту веб-страницы и выбрать из контекстного меню "Инспектировать элемент с помощью Firebug", то перед вами откроется участок кода страницы, который отвечает за формирование того элемента, который Вы выбрали.
Код интересующего нас элемента будет виден в открывшемся внизу страницы окне, при этом участок кода, который отвечает за выбранный элемент веб-страницы, будет подсвечен синим цветом.
Запустить Firebug можно также с помощью комбинации клавиш "Ctrl" + "F12"
либо щелкнув по жучку в правом верхнем углу экрана. А если нажать клавишу "F12"
, то Firebug откроется в новом окне браузера.
Редактирование HTML- кода
В левой половине окна плагина FireBug отображаются HTML - теги открытой в браузере веб-страницы. Здесь можно просматривать вложенность друг в друга тех или иных контейнеров, для открытия содержимого контейнера нужно нажать на плюсик рядом с ним,
а также можно свернуть его, щёлкнув ещё раз. Для удобства перемещения по элементам можно использовать стрелки навигации на клавиатуре (смещает синее выделение элемента).
Если Вы подведете мышку к div- контейнеру в левой части окна Firebug, то сможете видеть, какие элементы открытой веб-страницы входят в этот div-контейнер.
Если кликнуть правой клавишей мыши по элементу в панели HTML, то в выпадающем окне вы можете выбрать то действие, которое хотите с ним произвести: удалить элемент, добавить новый атрибут, редактировать HTML и др. Внесенные изменения в выделенный фрагмент HTML
-кода, тут же отобразятся на веб-странице.
Для того, чтобы быстро найти нужный элемент в коде страницы необходимо активировать соответствующий режим, нажав на кнопку панели "Исследовать элемент". После активизации кнопки, любой элемент веб-страницы на который Вы наводите курсор, автоматически ищется в HTML-коде. Ведите мышью над участками веб-страницы, а в левой части окна плагина просматривайте выделенные синим фоном фрагменты HTML- кода, которые отвечают за формирование данных элементов страницы. Фрагмент страницы, над которым находится курсор мыши, будет заключен в рамочку синего цвета.
Хочу обратить Ваше внимание на то, что когда Вы кликаете мышкой по элементу в панели HTML-кода, то во второй строке сверху панели плагина отображается порядок вложения элементов HTML. По этой строке можно прослеживать наследование CSS-свойств.
Firebug позволяет смоделировать желаемый дизайн веб-страницы с учетом внесения тех или иных изменений в Html-код, но как только вы обновите страницу - все внесенные плагином изменения исчезнут.
Но если вы решили окончательно внести изменения в Html- код, то окажется, что отыскивать тот файл, который генерирует данный участок Html- кода не так-то просто.
Внимание! Firebug выводит в панель HTML не только тот код, который хранится у Вас на сайте в HTML - файлах, но также и сгенерированный php-код.
Дело в том, что в отличие от обычного исходного HTML- кода, плагин Firebug учитывает все изменения в коде после его преобразования через JavaScript. Вероятнее всего, искомый Вами файл будет иметь расширение "php", и этот участок в нем может выглядеть совсем не так, как в исходном коде веб-страницы. Как же найти в каком файле формируется нужный нам фрагмент веб-страницы? Внимательно изучив нужный участок веб-страницы с помощью плагина Firebug, подищите какой-нибудь ID или CSS-класс, которые прописаны в контейнере с требуемым элементом веб-страницы. А далее с помощью программы Total commander осуществите поиск тех файлов, в которых присутствует данный класс или ID. Возможно Вам сразу не удастся найти нужный участок HTML- кода, тогда повторите поиск взяв за основу какой-нибудь другой маячок для поиска.
Редактирование стилей CSS
В левой панели расширения Firebug по умолчанию отображается HTML - код, а в правой CSS-стиль выбранного элемента. Эти CSS свойства определяют внешний вид выбранного HTML блока. В панели CSS отображаются селекторы, которые относятся к выбранному элементу, название CSS-файла и номер строки, в которой эти селекторы описаны
CSS-свойство одного и того же элемента может быть прописано несколько раз с разными значениями, тогда браузер учитывает только CSS-свойство с более высоким приоритетом – !important. . Если какая-то строка зачёркнута, значит у данного селектора специфичность ниже, чем у селектора с более высоким приоритетом. На рисунке видно, что у селектора .uk-article-title
приоритет выше, чем у селекторов h1, .uk-h1 и h1, .uk-h1
, поэтому свойства font-size:40px
и color: #444444
не применяются.
Любое CSS-свойство отключается и включается вновь простым щелчком по пустому полю перед свойством. Вы можете подвести курсор мыши к стилевому правилу, рядом с этим свойством появится красный перечеркнутый кружочек. Щелкнув по нему мышью можно отключить это CSS- свойство и посмотреть на веб-страницу без него. Отключенные свойства отображаются серым цветом, рядом с ними выводится серый перечеркнутый кружочек.
Все значения и названия свойств можно легко изменять. Для этого достаточно щёлкнуть по свойству, и оно станет редактируемым. Очень удобно и то, что в плагине Firebug, как и в Notepad++ , есть автодополнения.
Перемещаться в панели CSS по свойствам и их значениям, а также вставить пустую строку для добавления нового CSS-свойства можно с помощью клавиши Enter. Щелчком правой клавишей мышки в панели CSS открывается контекстное меню.
- Через контекстное меню можно скопировать объявление свойства , имя свойства или значение свойства в буфер обмена, а затем вставить в CSS-файл Вашего сайта.
- Редактировать стиль элемента - установить встроенный стиль для элемента (устанавливается через атрибут style).
- Добавить правило – добавить правило к данному элементу.
- Новое свойство - добавить новое свойство и его значение текущему правилу.
- Редактировать, удалить или выключить – действия с текущим свойством.
- Обновить – обновить экран панели.
- Инспектировать во вкладке CSS - перейти во вкладку CSS для изучения объекта там.
- Инспектировать во вкладке DOM - перейти во вкладку DOM для изучения объекта там.
Во вкладке CSS доступен предосмотр цвета и изображений при наведении на свойство курсора
Все действия со стилями сразу же отображаются на веб-странице. Если же страницу обновить, то все ваши действия в Firebug отменяются. Благодаря этому можно экспериментировать с разными стилями, не опасаясь за целостность исходного CSS –файла. Для внесения понравившихся изменений в Ваш сайт нужно открыть CSS –файл и найти подсказанную плагином строку. В случае с CSS-стилями все намного проще, чем с внесением изменений в HTML код страницы.
Вкладка "Скомпилированный стиль"
Во вкладке "Скомпилированный стиль" приведены свойства и их значения, которые применяются к данному элементу и не задаются явно через стили. Для каждого элемента сгенерирован свой стиль на основе внутренних значений браузера и стиле родительских элементов, и он приведён лишь для информации.
Вкладка "Макет"|Редактирование размеров в FireBug
Вкладка отображает размеры выбранного элемента, значение его полей, границ, отступов и позиционирования.
Для просмотра размеров и их редактирования необходимо в режиме "Анализ" навести курсор мыши и щелкнуть на элементе с размерами которого мы желаем поработать.
Для редактирования размера поля достаточно щелкнуть на его числовом значении во вкладке "Макет". При этом на странице сайта будут подсвечиваться соответствующие поля: сам элемент – светло-голубым, margin – желтым, а padding – фиолетовым цветом.
После изменения числового значения к выделенному элементу автоматически добавляется тег "style", а при открытии вкладки "Стиль" появится селектор "element.style". К нему можно добавлять другие свойства CSS и менять их значения, как и для любых других селекторов.
Вкладка "DOM" (Document Object Model - объектная модель документа) используется JavaScript-разработчиками.
Вкладка "DOM" показывает список всех методов и свойств выбранного на данный момент элемента. При необходимости можно просматривать свойства объекта или изменять их, одновременно просматривая результаты таких изменений на веб-странице.
Вкладка "Сценарий" (Script)|Отладчик JavaScript
Вкладка "Сценарий" – это мощный отладчик JavaScript, который позволяет запускать скрипты, в любое время приостановить их выполнение и посмотреть, как выглядела каждая переменная в момент останова. В основном окне мы устанавливаем (и удаляем) точки останова, а также проверяем код Javascript.
1. Кнопка с помощью которой можно выбрать файл скрипта, который вы хотите отладить. Вы также можете ввести фильтрацию для списка.
2. Функции отладки: Продолжить (F8), Шаг с заходом (F11), Шаг с обходом (F10), Шаг с выходом (Shift+F11) . Фунции действуют лишь тогда, когда выполнение кода достигает точки останова.
3. Вкладка "Наблюдение" даёт возможность просматривать переменные Javascript в текущем стеке.
4. Вкладка "Стек вызовов" показывает содержимое стека функций в реальном времени.
5. Вкладка "Точки останова" показывает список активных на данный момент точек останова. Отсюда можно только удалить точку останова.
Firebug позволяет устанавливать точки останова, которые сообщают отладчику о необходимости приостановить выполнение скрипта, когда он достигает определенной строки. Во время паузы, вы можете посмотреть значение любой переменной и обследовать объекты.
Для того чтобы установить точки останова, нажмите на любой номер строки и появится красная точка останова. Нажмите на красную точку ещё раз, чтобы её удалить.
После установки точки останова в нужном месте обновите страницу (F5) для срабатывания точки останова.
Для пошаговой отладки скрипта используйте кнопки на панели инструментов Firebug:
- продолжить выполнение до следующей точки останова (F8);
- зайти внутрь блока или функции (Шаг с заходом)(F11);
- перейти к следующему оператору без захода внутрь блока (Шаг с обходом) (F10);
- выйти из блока или функции (Шаг с выходом) (Shift+F11).
Измерение скорости загрузки сайта с помощью Firebug
Интересует сколько времени заняла загрузка вашей страницы? Вкладка "Сеть" для каждого файла покажет процесс загрузки в виде полосок от начала и до окончания. На диаграммах загрузки четко видно, что javascript-файлы загружаются по очереди, и никогда - параллельно. Данный факт поможет Вам оптимизировать порядок загрузки файлов на странице, чтобы пользователь не проводил много времени в ожидании загрузки страницы. Жмем вкладку "Сеть" в окне Firebug и обновляем (F5) веб-страницу.
В нижний строке списка запросов представлен обобщенный подсчет: количество запросов, объем информации в MB, сколько из них закешировано и суммарное время выполнения всех запросов.
На второй строке Firebug можно включить фильтрацию этой информации, то есть, если Вас интересует конкретный тип файлов, например javascript, HTML запросы, CSS файлы или изображения - нажимайте кнопки в в меню плагина, чтобы фильтровать список по типам. Благодаря фильтрации можно вычислять общий размер и время загрузки для конкретного типа файлов.
Некоторые сетевые запросы загружаются из кеша браузера, а не из сети. Плагин выделяет запросы из кеша полосками светло-серого оттенка, благодаря чему Вы можете легко определить насколько эффективно Ваш сайт использует кеш для оптимизации времени загрузки веб-страницы.
Для каждого загружаемого элемента есть подробное описание, которое расположено в свернутом списке. Кликните по плюсику, чтобы развернуть список и перед вами откроется вся информация о загружаемом файле: заголовки, ответ, кэш, cookie.
На этом все. Надеюсь, урок для Вас был интересен и полезен. Удачи Вам!
Здравствуйте, уважаемые читатели! Сегодня речь пойдет об очень важном инструменте верстальщика — бесплатном дополнении . Лозунг на сайте разработчиков гласит — «Эволюция web-разработки». Не верьте этому! Firebug -это настоящая революция web-разработки. После знакомства с Firebug вы будете недоумевать, как обходились без него раньше.
До того, как я связался с web технологиями, моим любимым браузером была Opera. Быстрая, легкая, удобная. И все-то меня в ней устраивало, но чем дальше я погружался в изучение html и css, тем чаще встречал упоминания о бесплатном дополнении Firebug для FireFox. «Подумаешь, какое-то дополнение! Неужели ради него стоит менять браузер?!» — думал я тогда. Практика показала, что стоит. Попробовав один раз в действии Firebug, я уже не мог работать без него. Это действительно очень важный инструмент веб-мастера. Без него, как без рук. Скоро Вы в этом сами убедитесь.
Аналоги FireBug есть и в других браузерах, но они не идут ни в какое сравнение с оригиналом. Быть может я просто очень привык к оригинальному FireBug и все иное мне кажется чуждым и неудобным.
Как установить FireBug в FireFox
Браузер FireFox хорош тем, что его функционал легко можно расширить с помощью бесплатных дополнений, коих очень и очень много. Одним из таких дополнений является FireBug.
Устанавливается FireBug очень просто и быстро. Откройте браузер FireFox и зайдите на страницу, посвященную данному дополнению.
На момент написания этих строк дополнением FireBug уже пользуются более 3 миллионов человек. Давайте присоединимся к ним. Нажимаем на кнопку «Добавить в FireFox».
Появится окошко с предупреждением, в котором вам предложат установить FireBug в FirFox. Воспользуемся этим предложением. Возможно вам понадобится после этого перезапустить браузер, чтобы дополнение установилось и включилось.
Как пользоваться FireBug
Включить панель FireBug можно нажатием кнопки F12. По умолчанию она появляется в нижней части экрана. Положение панели можно изменить. Для этого зайдите в опции (иконка жука в левом углу панели) и выберете пункт Положение окна.
Основной закладкой является «HTML». Именно в ней предстоит нам работать большую часть времени. Окно разбито на две части:
- Слева представлен исходный код страницы;
- Справа — стили css.
Если навести курсор мышки на какой-нибудь html тэг в левом поле, то он будет выделен цветом на странице. При этом:
- голубой цвет показывает ширину элемента;
- темно синий — поля (padding);
- светло желтый — отступы (margin).
Картинка ниже кликабельна.
При выборе тэга, нажатием левой клавиши мыши, в правом окне отобразятся его css стили. В самом верху будут указаны стили именно этого html тега, ниже пойдут унаследованные стили. Если какой-то атрибут зачеркнут, значит он не работает (переопределен). Кроме этого, указывается файл css и номер строки в нем, где тот или иной стиль определен.
Для удобства поиска предусмотрена опция анализа структуры страницы курсором мыши. Включается она кнопкой в левом верхнем углу, рядом с иконкой жука, выглядит как прямоугольник и курсор мыши. Фактически, мы идем от противного — если раньше выбирали html тег и видели его на странице, то теперь выбираем его курсором мыши прямо на странице и видим его характеристики в окне FireBug. Пользоваться этой опцией придется постоянно, ибо она значительно упрощает и ускоряет поиск того или иного элемента.
А теперь самая главная фишка FireBug, за которую его так любят: вы можете менять структуру страницу и ее стили на лету! Практически никаких ограничений — можете взять тэг и переименовать его, изменить содержание заголовка или абзаца, отредактировать, отключить или добавить атрибут стиля, а можете просто удалить пол страницы. Результат будет тут же отображаться на экране! Только помните: все изменения происходят в самом FireBug , так что после перезагрузки страницы, она вернется к первоначальному состоянию. Таким образом навредить никак нельзя.
FireBug — это большая песочница для экспериментов. Когда вы нашли правильный вариант, просто перенесите его в ручную в файлы html и css.
Что еще есть интересного:
- На закладке «Консоль» можно посмотреть ошибки JavaScript, HTML и CSS — полезная информация для отладки.
- На вкладке «Сеть» имеется информация по запросом: статус, размер, удаленный IP и время исполнения.
- Вкладка «Page Speed» позволяет протестировать скорость загрузки страницы. Оценка ставится по 100 бальной шкале. Кроме этого, даются полезные совету, которые позволят улучшить данную характеристику.
Пример практического использования FireBug
Теперь рассмотрим пример из практики. На моем блоге есть статья, посвященная плагину . В ней рассказывается, как вывести форум на отдельной странице. Ради удобства для нее создается отдельный шаблон, в котором удаляется сайдбар. Подразумевается, что форум займет всю ширину страницу.
Проблема заключается в том, что во многих ширина блока под контент фиксирована. Удаление сайдбара не приводит к тому, что форум расползается на всю страницу, на месте сайдбара остается просто пустое место. Чтобы исправить это, нужно найти и отредактировать стиль элемента, отвечающего за вывод содержания страницы.
Ко мне время от времени обращаются люди за помощью. Благодаря FireBug найти злосчастный элемент и его стили несложно.
Последний раз я интегрировал форум в тему Sento . Рассмотрим порядок действий.
1. По инструкции, описанной в той статье, создаем отдельный шаблон pageforum.php, в котором удаляем строчку кода, отвечающую за вывод сайдбара справа. Создав страницу с форумом, получаем следующий результат.
Как видите, сайдбар исчез, но осталось пустое место. Его то и следует убрать.
2. Включаем наш инструмент нажатием кнопки F12.
3. Первое, что следует сделать — узнать ширину вашего шаблона, конечно, если он не резиновый. Включаем функцию анализа страницы и мышкой ищем элементы, для которых задан параметр width (ширина) в правом столбце, отвечающем за стили css. Найти будет несложно, скорее всего ширина задана для шапки сайта, так что с нее и следует начать поиск.
4. Следующей нашей целью будет элемент, который отвечает за вывод содержания страницы. Главным критерием поиска является заданная в стилях ширина (width). Именно она не позволяет форуму расползтись. Не забывайте про возможность анализировать структуру страницы с помощью мыши. Данная функция значительно упростит поиск. Картинка кликабельна.
В данном случае я нашел тэг div с классом span-16. Заметьте, что стили прописаны не в стандартном файле style.css, который находится в корневом каталоге темы, а в файле screen.css, расположенном в папке css. Так что будьте внимательнее, чтобы не пришлось искать стили там, где их нет.
5. Открыть файл screen.css, найти класс span-16 и поменять параметр width легко, но это будет ошибкой. Другие страницы WP тоже используют div с классом span-16, так что они после таких изменений просто расползутся. Следует открыть шаблон pageforum.php и переименовать класс span-16. Дайте ему новое, нигде не задействованное имя. Для этого нового класса пропишите параметр width в файле со стилями. Таким образом, изменения будут внесены только в страницу для форума.
Вот так быстро и просто FireBug позволяет находить нужные html тэги и их стили.
Напоследок хочу сказать, что FireBug становится абсолютно бесполезным в том случае, если вы не знаете хотя бы основ html и css. Изучить их несложно, нужно только захотеть. Если вы ведете блог или сайт, то рано или поздно эти знания вам понадобятся. Лично я получил их из за авторством Влада Мержевича. Конечно, этот мануал не сделает из вас профессионального верстальщика, но базовые знания вы точно получите.
На этом на сегодня все. Спасибо а внимание и до новых встреч.
