Как пользоваться firebug Часть №1


60c1cbd5 Завод АТОМ: производство металлоконструкций в краснодаре.

Используйте второй монитор

Освободите Firebug от жестких рамок браузера и отпустите его в полет по всему окну. Если у Вас два монитора — можно работать еще эффективнее с Firebug в одном окне, а Firefox — в другом.

Чтобы открыть Firebug в отдельном окне, войдите в кустомизацию панелей Firefox и добавьте туда кнопку Firebug. Вы можете нажать на эту кнопку или нажать Control+F12 (или Command+F12 для Mac) для быстрого доступа с клавиатуры.

ВСЕ ДЛЯ НОВИЧКА

Черный и белый списки

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

Вы можете посещать сайты в двух режимах: Firebug включен для всех сайтов, кроме «черного» списка, или отключить Firebug для всех сайтов, кроме находящихся в «белом» списке.

F12 — Ваш друг

Без сомнения, клавиша F12 — самый быстрый способ добраться до Firebug. Натренеруйтесь жать эту клавишу каждый раз, когда приходит время отладки. Если у Вас большой монитор, используйте Control+F12 (или Command+F12 для Mac), чтобы открыть Firebug в отдельном окне.

Снимите очки

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

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

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

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

Еще интересное:

Используем упрощенную работу с таблицами стилей, уменьшаем размер css кода и пишем простой для понимания css код.

CSS3: Использование атрибута в селекторе

3D куб с помощью CSS

11 примеров использования CSS3

Как использовать разные стили для IE6, IE7, и IE8

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

В любом сайте, основанном на 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-выражение, которое однозначно идентифицирует элемент.

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

Без 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.ru

Мой блог находят по следующим фразам

twitter как получить api ключ
модуль облако тегов joomla wordpress
WordPress заставка при загрузке сайта
как сделать блог с joomla 1.5
как пользоваться FireBug

ВСЕ ДЛЯ НОВИЧКА






    • http://sergmedvedev.ru Сергей Медведев

      Ничего себе для новичка:)
      Голову сломать можно! Новичкам бы понагляднее объяснять, а не обзоры делать...

    • Pingback: Rhiannon

    • Pingback: Mariana

    • Pingback: Kirstin

    • Pingback: Rosemary

    • Pingback: Kelli

    • Pingback: Sally

    • Валерий Ананьин

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