Как пользоваться FireBug — возможность правка HTML «на лету».

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

FireBug — расширение для FireFox, одной из функций которого является работа с исходным кодом страницы.

Функции FireBug.

Конечно, возможностью посмотреть код страницы никого не удивить, все современные браузеры неплохо с этим справляются. Зачем же тогда делать специальный плагин? Конечно же для того чтоб реализовать в нём гораздо больший функционал. Рассмотрим полезную для вёрстки вкладку HTML.

Как видно из рисунка на ней присутствуют три поля. Первое — позволяет  отображать и изменять свойства и атрибуты тегов. Второе — отображает стиль выбранного элемента, а третье его DOM свойства.

Вкладка HTML в FireBug отображает больше информации о элементе, чем просто просмотр кода через браузер. Но это не единственное достоинство данного плагина! С помощью него можно  редактировать или удалять элементы и атрибуты «на лету», при этом страница браузера немедленно обновляется, отображая изменения.

Изменим содержимое копирайта на сайте.

Редактирование кода

Для этого необходимо отредактировать соответствующее поле в firebug.

Редактирование кода

Однако, если посмотреть код страницы через браузер — в нём по прежнему старый копирайт.

FireBug позволяет легко экспериментировать с элементами, изменять их и сразу же видеть результат.

Как пользоваться FireBug.

Как изменить значение элемента на странице?

  1. Откройте вкладку HTML, в ней отобразится код документа.
  2. Раскрывая плюсы найдите элемент, который Вы желаете изменить. Для навигации по элементам можно использовать Tab (перемещает редактируемые области) и стрелки навигации на клавиатуре (смещает выделение элемента).
  3. Нажмите левой кнопкой на изменяемом значении, весь элемент выделиться в отдельный блок. Изменяемое значение немедленно отобразится на странице.

Как добавить новый атрибут элементу? Например, я хочу добавить к заголовку h2: class=»author»

  1. На элементе к которому вы хотите добавить атрибут нажать правой кнопкой, в моём примере это тэг h2.
  2. В появившемся меню выбрать «Новый атрибут».
  3. Ввести название атрибута (у меня это class), нажать Tab и ввести его значение (у меня author).
  4. При нажатии за пределами редактируемого поля, изменения применяться автоматически.

Добавление нового элемента

Для удаления элемента целиком, достаточно нажать на нём правой кнопкой мыши и в появившемся меню, выбрать «Удалить элемент».

Как быстро найти элемент в коде страницы? Для этого необходимо использовать кнопку на панели «Анализировать». После её нажатия любой элемент на который Вы наводите курсор автоматически ищется в коде.

Анализ элементов

Приведённые примеры удобны для небольших изменений, если же требуется изменить целый блок кода,  удобнее использовать режим «Редактирования». Вызывается он несколькими способами: одноимённой кнопкой на панели или пунктом меню «Редактировать HTML».

Логирование событий.

Для включения логирования событий происходящих с элементом достаточно нажать на нём правой кнопкой мыши и выбрать «Записывать события». Будут зафиксированы события следующих типов:

  • Фокус на элементе
  • Смещение фокуса
  • Движение мыши над элементом
  • Движение мыши от элемента
  • Движение мыши к элементу
  • Выделение элемента
  • Печать текста (для форм)

Лог доступен на вкладке «Консоль».
Постовой: Разработка сайта