FireBug или редактирование сайта “вживую”

16 Янв 2011, рубрика: Верстка |

Я думаю, вам не раз приходилось подгонять размеры или позиции какого-то элемента на странице, менять цвет, фон и выставлять другие свойства. И что же вы делаете: Заходите в редактор, изменяете, загружаете страницу на сервер, обновляете страницу… Опять не то! И так по новой несколько раз… Это отнимает много времени и нервов, по этому я хочу представить вам замечательный плагин для FireFox, под названием “FireBug”. Обращаю внимание, работает он только на Firefox.

Что же он позволяет?

Мгновенно получить HTML и CSS  код нужного вам элемента страницы и менять их на лету, то есть можно сразу видеть изменения, не прибегая к перезагрузке страницы!

Заинтересовались? Тогда заходим сюда: FireBug качаем, устанавливаем.

После установки внизу справа, на строке статуса появиться значок жучка, это и есть тот самый FireBug.

А теперь, подробнее о Файрбаге, я рассмотрю здесь, на мой взгляд, основные его возможности, которые очень полезны в верстке сайта. Перейдем, для примера, на сайт Википедии.

Основное окно, после нажатия на жучка, или горячую клавишу F12, выглядит так:

Главное окно FireBug

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

Попробуем что-то изменить. Выбираем ту самую стрелочку, и наводим мышку на блок “Избранная статья”.Использование FireBug

Как вы видите, сразу можно проанализировать HTML, СSS. Замечу, что в окне СSS отображается в какой именно таблице стилей находится данный стиль.

При выделении блока, сразу видно отступы, а именно: Margin – отображается желтым цветом, Padding – синим.

Попробуем что-то изменить. Скажем нам хочется, чтобы рамка была не сплошной а пунктирной. Ищем в оке CSS строку, связанную с border. Это строка:

border-style: none solid solid;

Использование FireBug, изменение CSS

Меняем ее в FireBug на (Для этого стоит щелкнуть в CSS окне на желаемую строку)

border-style: none dashed dashed;

Как видите, результат отображается мгновенно.

Чтобы добавит новый стиль, нажмите правой кнопкой в окне стилей элемента и выберите пункт “Редактировать стиль элемента”. Впишем туда:

background-color: #F5F5F5;

В общем, я думаю, суть вы поняли. Плагин позволяет значительно ускорить процесс верстки страниц. После подбора нужных css правил, просто скопируйте код из FireBug, вставьте его вместо вашего и загрузите страницу на сервер. Надеюсь, статья оказалась для вас полезной!




Оцените полезность!
Не полезноПолезно (+4 баллов, 6 оценок)

10 комментариев на «FireBug или редактирование сайта “вживую”»

  1. Overcast пишет:

    Люблю этот плагин, очень часто использую, но то, что он только для лисы, напрягает,т.к. когда добиваешся, что бы сайт одинаково выглядел во всех сайтах, не можешь посмотреть, что нужно изменить, что бы он в хроме или опере норм смотрелся. Правда, для хрома я нашел расширение называется FireBug Lite for Google Chrome от тех же разработчиков, но в нем нельзя нормально редактировать css файлы. Для других браузеров я вообще не нашел решений(

  2. Аноним пишет:

    Без этого плагина некуда! Наверное это самый популярный плагин среди всех веб-разработчиков. Даже себе представить не могу чтобы я без него делал. Столько времени сэкономил!

  3. Мои любимые расширения для Google Chrome пишет:

    [...] Firebug Lite for Google Chrome™ . Про его возможности уже писал вот тут, повторяться не [...]

  4. Крутой поиск с выпадающим списком в Wordpress пишет:

    [...] используя специальній плагин для барузера, например FireBug. У меня на блоге, например, такие [...]

  5. timmi пишет:

    Хотелось бы поинтересоваться зачем FireBug google хрому, если у последнего есть своя укомплектованная панель разработчика — аналог файербагу?

    Или может у него есть какие преимущества?

    • Polezniy пишет:

      В Хроме нельзя нормально отредактировать стили и  сразу увидеть результат. Максимум — это выключить какое свойство в стиле. FireBug намного полезней и функциональней.

  6. timmi пишет:

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

    • Polezniy пишет:

      Я Вас не правильно понял, я думал вы говорите про панель, которая появляется при нажатии в хроме F12... Сейчас запустил плагин «Web Developer», он вроде бы имеет тот  функционал, что и фаербаг, даже больше, только работает медленней редактирование css. Только, что пытался отредактировать какой-нибудь стиль, пришлось долго ждать, плюс нет такой возможности, что бы выделить элемент в браузере и сразу увидеть его стили. Приходится искать во всем коде css, который подгружается не моментально...  Или вы не эту панель имели ввиду?)

  7. timmi пишет:

    Именно та самая панель разработчика по F12 вызываемая! Ниже собственно доказательство корректной работы...это конечно самое мелкое что можно сделать в этой панели! И аватар растягивался прямо на глазах) пока я держал клавушу вверх.

    • Polezniy пишет:

      Оу спасибо, что заставили разобраться с панелью. Я по привычке как в FireBug, нажимал только один раз на свойство, оказывается везде нужен двойной клик. Вот для тех, кто, как и я, привыкли к FireBug и нужны плагины к хрому типа «Web Developer» :)

Ваш отзыв

.Все права защищены © 2017 Блог Полезного.