Firebug – инструмент для веб-разработчика

Firebug – инструмент, предназначенный для редактирования, отладки и исследования CSS, HTML и Javascript. Firebug является самым популярным среди инструментов используемых веб-разработчиками.

В предыдущем посте мы рассматривали Web Developer – плагин, служащий для разработки и тестирования сайтов. Возможности, предоставляемые инструментами плагина Web Developer, ни в коей мере не заменяют возможностей инструментов Firebug.
Web Developer и Firebug дополняют друг друга и используются веб-разработчиками для выполнения различных задач, исходя из возможностей каждого инструмента.
Firebug интегрируется с браузером Firefox. Существует облегчённая версия Firebug для других браузеров, но полноценным инструментом Firebug является именно в слиянии с Firefox. Даже если вы предпочитаете другие браузеры, советую установить и использовать Firefox для работы с различными дополнениями, в том числе и с таким мощным инструментом как Firebug.

Возможности Firebug

Один клик мыши и перед вами откроется полный набор мощнейших инструментов Firebug. Firebug предоставляет массу возможностей для веб-разработчика:

• возможность найти информация о любом элементе;
• редактировать HTML-код и просматривать результаты редактирования в браузере;
• копировать различные аспекты элемента в буфер обмена, включая HTML-фрагмент;
• инспектировать любой CSS файл;
• показывать правила CSS, которые работают в каскаде, стилизуя каждый элемент;
• редактировать CSS и просматривать результаты редактирования в браузере;
• содержит полный словарь ключевых слов CSS в памяти;
• включает в себя мощный javascript отладчик;
• имеет командную строку для javascript, предоставляет набор мощных функций логирования;
• дает детализированную полезную информацию об ошибках в Javascript, CSS и XML;
• позволяет быстро находить нужные DOM-объекты и редактировать их.

Установка Firebug в Firefox

Последнюю версию Firebug для Firefox можно скачать с домашней страницы разработчика. Установить Firebug, как и любое другое дополнение, можно также через встроенные инструменты Firefox. Откройте браузер Firefox, в меню выберите «Инструменты» - «Дополнения».
Введите название дополнения в строку поиска. В открывшемся списке выберите необходимое дополнение и запустите установку.

Доступ к панели инструментов Firebug

Существуют несколько вариантов доступа к инструментам Firebug.
Вы можете работать с Firebug в одном окне, а с Firefox - в другом. Другой вариант – вы можете открыть панель инструментов Firebug в любом, удобном для вас, положении экрана.
Чтобы открыть Firebug в отдельном окне, вам нужно добавить кнопку Firebug на панель инструментов Firefox. Для этого кликните правой кнопкой мыши в панели инструментов браузера Firefox, в появившемся меню выберите «Настроить». Перетащите  кнопку Firebug в нужное место на панели инструментов Firefox и нажмите «Готово».

1. Для открытия панели инструментов Firebug в отдельном окне нажмите на эту кнопку или, для быстрого доступа с клавиатуры, нажмите Ctrl+F12 (или Command+F12 для Mac).
2. Для открытия Firebug внизу экрана нажмите на кнопку F12.
3. Для открытия Firebug в любом другом положении экрана (в отдельном окне, внизу, вверху, слева, справа) кликните по флажку на кнопке Firebug, в выпавшем меню выберите «Положение меню Firebug». Поставьте галочку напротив нужной опции.
4. Для закрытия панели инструментов Firebug нажмите на кнопку F12 или на кнопку Firebug.

Таким образом, мы установили Firebug и получили доступ к панели инструментов Firebug. В следующем посте рассмотрим принципы работы с панелью инструментов Firebug.