Рубрики
HTML, CSS, JS

Как пользоваться 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».

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

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

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

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

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

Всё это хорошо, но изменения не сохраняются!!! Как потом найти этот код для исправления в своём движке ??? Я два дня искал, так и не нашёл!

конечно не сохраняется!
Это средство для отладки страницы, для нахождения нужного стиля и т.д
Например, вы решили изменить расположение блока корзины товаров, сделали это в плагине — после этого полученный код нужно физически скопировать в файл (путь к файлу стилей написан над стилем позиционируемого блока).

Ребята, тема важная, все что написано понятно,но а дальше то как. Про FTP знаю с сервером соединяюсь, ну не нахожу такой страницы с такой строчкой… Может кто ответит.

CSS — указан путь от корня сайта до файла, HTML у всех CMS страница состоит из разных сборных файлов, т.е как таковой одной страницы нет.

Левон, пользуйтесь Dreamweaver, и будет Вам счастье. Он умеет сохранять измнения.

Пользуюсь этой программой. Исправляю файл — отлично, то что надо. Затем нахожу файл, также исправляю — и ничего не происходит.)) Такое чувство, что изменять нужно еще и еще в разных стилях CSS и в шаблонах РНР…

Обсуждение закрыто.