Зачем нужно расширение Firebug?
Отладчик приложений, который выступает отдельным расширением для браузера Mozilla Firefox. Плагин Firebug выводит на консоль предупреждение о функции, вызвавшей ошибку, а также предупреждает, что правило CSS или какой-либо используемый метод JavaScript не существует. Таким образом, расширение позволяет быстро обнаружить ошибку в коде.
Что можно делать с помощью Firebug
- В режиме реального времени просматривать HTML-код страницы. Благодаря функции Inspect, можно быстро и точно найти нужный тег или какой-либо элемент, просмотрев все связанные с ним свойства и стили.
- Редактировать HTML и CSS напрямую в браузере. Для того, чтобы посмотреть, какое действие оказывают изменения, атрибуты тегов можно менять. Это очень удобно в тех случаях, когда разрабатывается наиболее удобный дизайн страницы.
- Отлаживать JavaScript.
- Просматривать HTTP-заголовки и AJAX-запросы.
- Отслеживать этапы загрузки страницы.
Расширение имеет свой список дополнений и расширений, упрощающих работу.
Планируется, что, со временем, плагин Firebug перестанет быть отдельным дополнением и станет одной и составляющих частей Firefox DevTools.
Firebug что это
(Кликайте на вкладки выше, чтобы посмотреть скриншот каждой.)
Firebug интегрируется с браузером Firefox, чтобы замечательно обогатить инструментарий разработчика. Вы сможете редактировать, отлаживать и исследовать CSS, HTML и Javascript вживую, на любой веб-странице.
Просто и доступно
Firebug — всего в одном клике от Вас, но он никогда не помешает. Вы можете открыть Firebug в отдельном окне, или сделать его полосой внизу браузера. Firebug также дает Вам контроль над выбором сайтов, для которых Вы его используете.
Инспектируй и редактируй HTML
Firebug позволяет легко находить HTML-элементы, глубоко закопанные в страницу. А когда Вы находите то, что искали, Firebug дает Вам богатейшую информацию и позволяет редактировать живой HTML.
Построй супер-совершенный CSS
Вкладка CSS в Firebug расскажет Вам все, что нужно знать о стилях на странице, и если Вам что-то не очень нравится, можно сделать изменения, которые отобразятся сразу же.
Смотри на CSS метрики
Когда CSS-контейнеры не выстраиваются нужным образом — иногда сложно понять, почему. Позвольте Firebug быть Вашими глазами, и он измерит и покажет все сдвиги, margin, padding, рамки и размеры для Вас.
Мониторинг сетевых запросов
Иногда страницы загружаются очень долго, но почему? Может, Вы написали чересчур много javascript? Забыли сжать изображения? Или серверы рекламодателей отдыхают в сторонке? Firebug покажет все с точностью до файла.
Отлаживай и профилируй JavaScript
Firebug включает в себя мощный javascript отладчик, который позволяет приостанавливать выполнение в любой момент и анализировать все, что угодно. Если Ваш код подтормаживает, используйте javascript профилировщик, чтобы измерить производительность и быстро найти узкие места.
Быстро находи ошибки
Когда что-то идет не так, Firebug мгновенно информирует Вас и дает детализированную полезную информацию об ошибках в Javascript, CSS и XML.
Исследуй DOM
Document Object Model — громадная иерархия объектов и функций. Firebug позволит Вам быстро находить нужные DOM-объекты и на лету редактировать их.
Выполняй JavaScript на лету
Командная строка — один из древнейших инструментов программиста. Firebug дает Вам старую добрую командную строку для javascript, дополненную некоторыми современными удобствами.
Логирование для JavaScript
Иметь хороший javascript отладчик — это, конечно, здорово, но иногда самый быстрый способ найти ошибку — это просто вывести максимальное количество информации. Firebug дает Вам набор мощных функций логирования, которые позволяют быстро получить нужные ответы.
Firebug
Firebug — расширение для браузера Mozilla Firefox повседневные вопросы настройки, являющееся консолью, отладчиком, и DOM- инспектором JavaScript, DHTML, Основы работы с CSS, Свойства и методы XMLHttpRequest. Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, вызвавших эту ошибку. Он предупреждает, что CSS — правило или JavaScript- метод/свойство, которое вы пытаетесь использовать, не существует.
Firebug добавляет глобальную переменную с именем «console» к каждой веб-странице, загруженной в Firefox. Этот объект содержит много методов, которые позволяет разработчику писать на консоль Firebug и показывать информацию, проходящую через скрипты.
Firebug Lite — это облегченная версия Firebug, её страница Firebug Lite. Firebug Lite имеет меньше функций, чем обычный Firebug, но его можно использовать в любых браузерах. Подключить:
Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера
Приветствую Вас! Сегодня мы поговорим о необходимом расширении для вебмастера FireBug. Это дополнение предназначено для браузера Mozilla Firefox , который является необходимым браузером для веб-разработчика. Хоть я и любитель Opera, но без Firefox мне сложно обходиться. Одной из причин этого, как раз является дополнение под названием FireBug.
FireBug для Firefox:
- абсолютно бесплатна
- помогает посмотреть на то, как будет выглядеть страница, не изменяя код в шаблоне. Видоизмененный дизайн будет видеть только пользователь FireBug в режиме онлайн, то есть, Вы захотели посмотреть, как будет выглядеть страница после изменения размера шрифта, изменения фона и т. д., Вы моментально будете это видеть в Firefox
- FireBug помогает отслеживает ошибки на сайте
- есть возможность посмотреть скорость загрузки элементов страницы сайта и многие другие полезные функции для web-разработчика
Установка FireBug на Mozilla Firefox
- Устанавливаете свежую версию Mozilla Firefox (на момент написания урока это версия 3.6.3)
- Используя Mozilla Firefox, переходите на официальный сайт дополнения FireBug (кстати, Вы можете на этом сайте узнать по подробнее об этом расширении)
- В правой части Вы увидите кнопку “Установить FireBug”, нажимаете на нее (во время написание поста, кнопка выглядела так):
- Вас должно “перебросить” на mozilla.org и уже там Вы должны нажать на кнопку “Добавить в Firefox”:
- В открывшемся окне выбираете “Установить”
- Далее Firefox потребует перезагрузки, сделайте это (нажмите “Перезапустить Firefox” или закройте браузер и заново откройте его)
- Вот и все! Дополнение установлено!
Использование FireBug
- Чтобы задействовать FireBug для Firefox, нужно в правом нижнем углу браузера нажать на жучка:
- В результате снизу “выедет” окошко данного расширения
- Теперь на странице можно выбрать любой объект, для этого нужно нажать на стрелку и потом щелкнуть на любом участке сайт/блога:
- Справа можно видеть стиль данного объекта:
Например, мы хотим изменить цвет шрифта: для этого меняем значение (на рисунке показано цифрой 1) на значение, которое нам необходимо. Поставив другой цвет мы мгновенно видим, как изменился наш текст. И если это нас удовлетворяет мы находим в файле style.css строку, которая нам нужна (на картинке показано цифрой 2 строка в файле style.css (она тоже указана там же), которую нужно искать). - Вот результат: я поставил цвет зеленым:
- И если меня это устраивает, я в правой части FireBug ищу место, в каком файле нужно изменить свойство и в какой строке, что очень удобно.
- Также можно посмотреть скорость загрузки объектов страницы. Для этого нажимаете на стрелочку во вкладке “Сеть” и выбираете пункт “Панель включена”:
- И просто обновляете страницу (в Mozilla Firefox можно путем нажатия Ctrl+R)
- Вот и результат:
Напротив каждого объекта показано время в миллисекундах, которое потребовалось на загрузку - Также существует немало возможностей данного дополнения для Firefox, Вы можете изучить их на сайте разработчика, который я дал выше. Чтобы закрыть FireBug, достаточно нажать на кнопку:
FireBug ставьте обязательно, он Вам пригодится не раз. Расширение очень полезное и мое любимое среди всех дополнений для данного браузера.
Внимание новичкам! Сегодня мы немного затронули стили блога, коснулись файла style.css. В одном из следующих уроках я Вам расскажу о основах языка CSS, который помогает нам изменить цвет, шрифт, размер и т.п. Урок будет только один, дам только фундаментальные знания, которые необходимы для работы. Если Вас заинтересует данный язык, Вы сможете немало информации найти о данном языке в просторах интернета.
Скажу честно, я сам в CSS знаю немногое, но этого мне достаточно для выполнения поставленных мною задач. А без основы знания, Вам будет очень сложно, так что обязательно подписывайтесь на RSS-ленту. Не пропускайте необходимые самые полезные уроки WordPress.
До скорой встречи на следующих уроках! Удачи Вам!
______________________________________
Следующий урок: Урок 39 Вкратце про язык CSS.