Просмотр живых исходников

В Firefox есть окно "View Source", но оно не покажет, как HTML выглядит на самом деле, после трансформаций javascript. Вкладка HTML в Firebug показывает как HTML выглядит прямо сейчас.

В дополнение, вкладки справа позволят Вам выяснить свойства индивидуальных элементов, включая правила CSS, которые их стилизуют, размер и позицию в пикселях, и свойства DOM, к которым есть доступ из javascript.

Обрати внимание на подсветку изменений

В любом сайте, основанном на javascript, HTML-элементы все время создаются, удаляются и изменяются. Не правда ли, было бы приятно четко видеть, какие изменения и где происходят?

Firebug подсвечивает изменения HTML желтым цветом, как только они происходят. А если Вы хотите посмотреть еще ближе, есть опция "scroll change into view", автоматически скроллировать страницу к месту изменения, так что Вы не упустите ошибку.

Мгновенное редактирование HTML

Firebug дает замечательный способ делать экспериментальные изменения в HTML и смотреть, как они тут же отражаются на страние. Вы можете создавать, удалить или редактировать HTML-атрибуты и текст, просто кликая на них и табом перемещаясь от одного к другому. Изменения применяются мгновенно, в момент печати.

А если Вы хотите большего, нежели небольшие изменения, Firebug позволяет редактировать HTML-исходник любого элемента. Просто кликните правой кнопкой на элементе и выберите "Edit HTML..." в меню.

Находи элементы мышью

Что-то на странице выглядит не так, и Вы не можете понять, почему. Нет более быстрого способа получить ответ, чем кликнуть на кнопку "Inspect" в панели Firebug, и приготовиться к вознаграждению. При движении мыши по странице, что бы ни было под указателем - оно будет мгновенно раскрыто Firebug, который покажет HTML и CSS.

Поиск

Иногда Вы знаете, что ищите, но не можете увидеть это на странице. Используя поле для быстрого поиска и панели Firebug, Вы можете искать по исходнику HTML и просматривать подсвеченные результаты непосредственно во время печати.

Инспектируй, редактируй, перегружай

Во время инспекции элемента во вкладке HTML, страницу можно перезагрузить, и Firebug продолжит показывать тот же элемент (если он еще существует) после перезагрузки. Это делает простым проверку в Firebug изменений, сделанных во внешнем редакторе.

Копируй исходник

Правый клик на любом элементе, и у Вас есть несколько возможностей копировать различные аспекты элемента в буфер обмена, включая HTML-фрагмент, значение свойства "innerHTML" или XPath-выражение, которое однозначно идентифицирует элемент.

 

CSS разработка

Вкладка CSS в Firebug расскажет Вам все, что нужно знать о стилях на веб-страницах, и если Вам что-то не нравится - можно сделать изменения, которые сразу же отразятся на странице.

 

Инспектируй весь каскад

Без Firebug, Вы можете долго чесать голову, почему заголовки на страницы выходят голубыми, хотя должны быть черными. С Firebug, проинспектируйте проблемный элемент, и Вы в момент увидите CSS, который дает неприятности.

Firebug показывает Вам правила, которые работают в каскаде, стилизуя каждый элемент. Правила отсортированы в возсходящем порядке, и overridden-свойства вычеркнуты. У каждого правила есть ссылка на файл, из которого оно пришло, так что Вы можете просто кликнуть и оказаться на нужной строчке.

 

Предпросмотр цветов и изображений

В то время, как Вы перемещаете мышь над цветами и адресами картинок во вкладке CSS, всплывает небольшая удобная подсказка с предпросмотром цвета или изображения. Для изображения также показываются размеры, что очень экономит время, особенно если Вам нужно писать CSS для элемента, четко подходящего размером под картинку.

 

 

 

Налаживай, подстраивай и перестраивай

Редактировать CSS никогда не было проще. Кликните любое CSS-свойство - и появится мини текстовый редактор. Во время печати, изменения тут же применяются к странице. Вам захочется поцеловать Firebug(прим. перев. - Firebug дословно "огнежук", выходит поцеловать жука 8{} ), когда он делает автодополнения, согласно списку возможных значений свойства, которое Вы редактируете. Вы можете использовать клавишу Escape, чтобы отменить сделанные изменения, или использовать клавишу Tab, чтобы перемещаться между свойствами.

 

Чуть выше... Чуть ниже...

Автодополнение замечательно экономит время, когда Вы печатает слова, но что если это числа? Если Вы стараетесь четко выстроить что-то, просто используйте клавиши вверх и вниз, пока Вы редактируете число. Firebug увеличит или уменьшит число на 1, или на 10, если Вы используете клавиши Page-Up, Page-Down.

 

 

 

 

Учитесь в процессе

Если Вы все еще учите CSS, Firebug - замечательный инструмент, чтобы обогатить словарь. Во время редактирования CSS свойств, используйте клавиши вверх и вниз, чтобы перемещаться между свойствами в алфавитном порядке. Firebug содержит полный словарь ключевых слов CSS в памяти, вместе с некоторыми дополнениями, специфичными для Mozilla..

 

 

 

Вот оно есть, а вот этого нет ...

Решение проблемы часто может быть получено просто отключением нескольких CSS-свойств и просмотром страницы без них. Когда Вы перемещаете мышь над свойством, заметьте маленькую круглую иконку слева от него. Клик на ней отключит свойство, а еще один клик - включит его опять.

 

 

 

 

Инспектируйте любой CSS-файл

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

 

 

 

 

Копируйте цвета и URL картинок

Для многих из нас, copy-paste - сердце разработки. Firebug делает простым копирование стилей элементов, цветов и ссылок на изображения. Просто кликните правой кнопкой, и появится контекстное меню с командами буфера обмена.

Когда Вы копируете URL картинки, Firebug скопирует абсолютный URL, даже если CSS показывает относительный адрес.

 

Сайт Firebug - http://getfirebug.com

Русский сайт - http://firebug.ru/