Firebug-подобный отладчик для Google Chrome. Фаербаг хром

Как пользоваться Firebug? Как установить Firebug для Chrome?

Как пользоваться Firebug? Как установить Firebug для Chrome? Всем привет! Сегодня мы поговорим о полезном для блоггеров расширении в современном скоростном браузере Firebug для Chrome и узнаем, как пользоваться Firebug. Установка расширения помогает при работе с дизайном блога, а ещё значительно экономит время и бережет нервы не только начинающим вебмастерам. Не лишним будет также добавление в панель инструментов кнопки быстрой подписки на RSS.

Зачем нужен Firebug для Google Chrome?

Он позволяет увидеть то, как будет выглядеть внешний вид блога, не внося изменения в код темы WordPress. Откорректированный дизайн будет доступен в режиме онлайн только Вам и только на открытой странице браузера. Если Вы захотите попробовать новый шрифт или размер символов, то благодаря Firebug Chrome можно моментально увидеть изменения :smile:.

Конечно, реально обойтись без расширения для Гугл Хром и самостоятельно доработать код, найдя нужное место. И все же я помню, как абсолютно ничего не понимая в коде, пытался изменить дизайн блога WordPress. Приходилось регулярно делать backup, правда, хорошо, что все предварительные изменения делал на специально созданном для экспериментов поддомене.

В общем, Firebug Lite установить нужно обязательно и научиться им пользоваться тоже. Это очень нужное и полезное расширение для Хром еще не раз пригодится Вам ;). Лично я просто обожаю его за свою простоту и эффективность.

Как установить Firebug на Chrome?

У кого нет этого самого быстрого браузера, то советую скачать Гугл Хром сейчас здесь.
Находясь в браузере перейдите по этой ссылке.
В правой части жмите на кнопку Установить Firebug Lite for Google Chrome:
Вот и все! Расширение установлено!

Для пользователей браузера Firefox также есть своё дополнение Mozilla FireBug. Скачать бесплатно Firebug для Firefox можно на официальном сайте здесь. Кстати, это расширение имеет гораздо больше функциональных возможностей, чем в браузере Хром.

Как пользоваться расширением FireBug в Chrome?

Для начала работы с FireBug в правом верхнем углу следует нажать на иконку жучка:
После активации внизу появиться окошко расширения, в котором требуется кликнуть на кнопку Inspect:
Теперь нужно выбрать объект для корректировки и щелкнуть по нему. Например, хочу посмотреть, как будут выглядеть буквы в меню моего сайта при изменении цвета:
При выборе объекта в правом окне отображаются свойства его стиля, где находим код цвета символов (1). При наведении на кодировку цвета даже появляется визуальный пример (2), в моем случае белый:
Заменяем цвет шрифта на другой:
Результат мгновенно отображается на сайте и теперь со всей строгостью стоит оценить полученный результат. Вот так смотрится меню с буквами синего цвета:
Если полученный внешний вид полностью удовлетворяет, то следует внести соответствующие изменения (1) в код Вашего шаблона WP. Сведения, в какой файл и в какой строке следует вносить изменения, пишутся рядом (2). В моем случае – это 336 строчка в файле style.css, которая легко доступна из админки ВордПресс:
С помощью Google Chrome Firebug Lite перенести влево сайдбар можно легко и быстро. Смотрите, что у меня получилось при изменении всего двух свойств:
Для закрытия расширения нажмите кнопку деактивации:

Узнать, как пользоваться FireBug не составит большого труда. На мой взгляд, даже обладая минимальными знаниями по основам верстки можно быстро сделать красивый внешний вид. FireBug для Chrome – это очень удобная и нужная вещь, рекомендую всем начинающим web-мастерам освоить работу с ним.

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

Учимся общаться с президентами! С президентом России нужно говорит хорошо и бросать трубку быстро ;), вот как-то так:

С уважением, Дмитрий Байдук

Поделиться ссылкой с друзьями

Расширение Firebug Lite для Google Chrome

Браузеры -> Браузер Chrome -> Расширения для Google Chrome -> Расширение Firebug Lite для Google Chrome

Расширение Firebug Lite для браузера Google Chrome добавляет возможность работы с исходниками страницы.

Firebug Lite не является заменой для Firebug или Chrome Developer Tools. Это инструмент, который можно использовать в сочетании с Firebug и Chrome Developer Tools. Firebug Lite предоставляет богатое визуальное представление, когда дело доходит до элементов HTML, DOM элементов и блочной модели. Он обеспечивает также некоторые интересные функции, как проверка HTML элементов с помощью мыши, и живое редактирование CSS свойств.

Преимущества по сравнению с bookmarlet Firebug Lite:

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

Активировать Firebug Lite очень просто. При первом посещении веб-страницы иконка Firebug будет серой, указывая, что он отключён. Нажатие по иконке активирует Firebug для всех страниц в этой области и значок станет оранжевым.

Google Chrome, расширение Firebug Lite, редактирование и отладка веб-страниц

Расширение Firebug Lite можно скачать из галереи расширений.

Возможно, Вас заинтересуют:

Расширение Firebug Lite для Google Chrome

Рейтинг: 0

(Голосов: 0)

Польза: 0

(Голосов: 0)

Комментариев пока нет

Чтобы оставить комментарий - зарегистрируйтесь или авторизуйтесь через любимый сервис (ВКонтакте, Одноклассники, Twitter и др.) с помощью OpenID.

freebrowsers.ru

Расширение Firebug для Firefox и Chrome

Расширение Firebug можно считать достижением в деле разработки сайтов. До него ничего похожего просто не существовало. Данный функционал будет полезен как профессиональным разработчикам, так и обычным и даже начинающим вебмастерам. Пользоваться Firebug весьма просто и это делает его одним самых популярных плагинов для браузеров Firefox и Chrome в среде сайтостроителей.

Установка Firebug в Firefox Устанавливается также как и любое другое дополнение Firefox. Вот страница плагина. Нажимаем кнопку «Добавить в Firefox» и радуемся установке такой нужной фичи для любого вебмастера.

Cтраница плагина Firebug

Установка Firebug в Firefox в браузер Chrome В браузер Chrome это расширение ставится так же просто. Переходим в «настройки» — «расширения» — «ещё расширения», вбиваем в строку поиска слева вверху слово «firebug» и видим нужный плагин. Осталось только клацнуть по кнопке «установить».

Firebug в Chrome

После установки в правом верхнем углу должна появиться кнопка в виде жучка, клик по которой активирует данный плагин.

кнопка

Функционал и использование

Firebug позволяет просматривать и редактировать HTML код, Javascript и CSS любой страницы, причём результат редактирования вы будете видеть прямо в браузере в режиме реального времени.

Немного практики. Запускаем расширение соответствующей кнопкой после чего снизу экрана появляется панель, в которой мы и будем работать.

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

Запуск плагина

Панель плагина

Пример: Допустим мы решили поменять цвет ссылок на сайте. Запускаем Firebug, нажимаем кнопку инспектирования и наводим на нужный нам элемент (в данном случае любая ссылка). Вокруг ссылки появляется синяя рамка, это значит что элемент инспектируется. В правом окне видим стили ссылок. В данном случае нас интересует «a color», кликаем прямо значению цвета #2486D2 и вписываем на место старого новый цвет.

панель управления плагином

Например вместо #2486D2 вписываем #CC0000. Сразу все ссылки на странице меняют цвет на указанный нами. Мы можем оценить подходит ли нам новый цвет и заменить его на любой другой либо оставить.

меняем цвет ссылок

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

Однако это далеко не всё что может Firebug. Можно просмотреть код любого элемента с помощью чего он задан, например подсмотреть понравившийся стиль на чужом сайте, внести изменения, найти ошибку в вёрстке и т.д. Я не буду сейчас касаться всех тонкостей иначе статья затянется надолго. Всё остальные возможности и нюансы работы можно найти на официальном сайте плагина.

comp-on.ru

debugging - Firebug-подобный отладчик для Google Chrome

Просто добавив некоторые точки разговора, как кто-то, кто использует Firebug/Chrome Inspector каждый день:

На момент написания статьи был только инспектор Google DOM, и у него нет всех функций Firebug
Инспектор - это "облегченная" версия Firebug: интерфейс не такой хороший IMO, проверка элементов в обеих последних версиях теперь неуклюжая, но Firebug по-прежнему лучше; Я пытаюсь найти любовь к Chrome (так как это лучший, более быстрый браузер), но для работы над разработкой он все еще просто отстой для меня.
Предварительный просмотр/изменение DOM/CSS еще лучше в Firebug; расчетный CSS и вид окна коробки лучше в Firebug;
Как-то проще читать/использовать Firebug, возможно, из-за простоты навигации, манипулирования/изменения документа в нескольких ключевых областях? Кто знает. Я привык к интерфейсу, и я думаю, что Chrome Inspector не так хорош, хотя это субъективная вещь, которую я допускаю.
Вкладка Cookies/Net чрезвычайно полезна для меня в Firebug. Может быть, у Chrome Inspector есть это сейчас? В прошлый раз, когда я его не проверял, потому что Chrome обновляется в фоновом режиме без вашего вмешательства (получает ваше согласие по умолчанию, как и все хорошие повелители).
Последний момент: день, когда Google Chrome получает полнофункциональный Firebug, - это тот день, когда Firefox в основном умирает для разработчиков, потому что Firefox уже 3 года, чтобы сделать механизм компоновки Firefox Gecko так быстро, как WebKit, и они этого не сделали. Извините, что так грубо, но это правда.

Понимаете, теперь все хотят отойти от Flash вместо jQuery, мотивированного мобильной доступностью и интерактивностью (iPhone, iPad, Android), а JavaScript "неожиданно" - это большое дело (этот сарказм), так что корабль плыл, Fire Fox. И это меня огорчает, как поклонник Mozilla. Chrome - это просто лучший браузер, пока Firefox не обновит свой механизм JavaScript.

ответ дан negutron 02 марта '11 в 18:26 источник поделиться

qaru.site

Sebastian Hoitz: Firebug-подобный отладчик для Google Chrome - Найдено 15 ответов

___ answer5169643 ___

Просто добавив несколько говорящих точек, как тех, кто ежедневно использует Firebug / Chrome Inspector :

На момент написания статьи есть только инспектор Google DOM, и у него нет всех функций Firebug
Инспектор - это «облегченная» версия Firebug: интерфейс не такой хороший IMO, проверка элементов в обеих последних версиях теперь неуклюжая, но Firebug по-прежнему лучше; Я пытаюсь найти любовь к Chrome (так как это лучший, более быстрый браузер), но для работы по разработке он все еще просто отстой для меня. Р>
Предварительный просмотр / изменение DOM / CSS еще лучше в Firebug; расчетный CSS и вид окна коробки лучше в Firebug; Р>
Как-то проще читать / использовать Firebug, возможно, из-за простоты навигации, манипулирования / изменения документа в нескольких ключевых областях? Кто знает. Я привык к интерфейсу, и я думаю, что Chrome Inspector не так хорош, хотя это субъективная вещь, которую я допускаю.
Вкладка Cookies / Net чрезвычайно полезна для меня в Firebug. Может быть, у Chrome Inspector есть это сейчас? В прошлый раз, когда я его не проверял, потому что Chrome обновляется в фоновом режиме без вашего вмешательства (получает ваше согласие по умолчанию, как и все хорошие повелители). Р>
Последний момент: день, когда Google Chrome получает полнофункциональный Firebug, - это тот день, когда Firefox в основном умирает для разработчиков, потому что Firefox должен был 3 года, чтобы сделать механизм компоновки Firefox Gecko так быстро, как WebKit , и они не , Извините, что так грубо, но это правда.

Понимаете, теперь все хотят отойти от Flash вместо jQuery, мотивированного мобильной доступностью и интерактивностью (iPhone, iPad, Android), а JavaScript «неожиданно» большой (это сарказм), так что корабль плыл , Fire Fox. И это меня огорчает, как поклонник Mozilla. Chrome - это просто лучший браузер, пока Firefox не обновит свой механизм JavaScript.

___ qstnhdr ___ Firebug-подобный отладчик для Google Chrome ___ answer345368 ___

В Chrome есть встроенный в Firebug инструмент. Просто щелкните правой кнопкой мыши в любом месте страницы и выберите «Осмотреть элемент» в меню. У Chrome есть графический инструмент для отладки (например, Firebug), поэтому вы можете отлаживать JavaScript. Он также хорошо проверяет CSS и может даже изменить рендеринг CSS на лету.

Для получения дополнительной информации см. Ссылка

___ answer8519105 ___

F12

Я люблю короткие клавиши

___ answer1707770 ___

Вы можете установить этот букмарклет в своей «панели закладок», чтобы всегда иметь Firebug lite в браузере Chrome / Chromium (поместите это как URL-адрес):

%pre% ___ answer1924314 ___

Попробуйте это, он называется Firebug Lite и, по-видимому, работает с бета-версией Chrome.

Вы также можете найти его по адресу: Ссылка

___ answer2165361 ___

Официальное расширение Firebug Chrome или вы можете загрузить и упаковать расширение самостоятельно.

Ссылка

___ answer3307526 ___

jQuerify - идеальное дополнение для встраивания jQuery в консоль Chrome и так же просто, как вы можете себе представить. Это расширение также указывает, что jQuery уже встроен в страницу.

Это расширение используется для встраивания jQuery на любую желаемую страницу. Он позволяет использовать jQuery в оболочке консоли (вы можете вызвать консоль Chrome с помощью Ctrl + Shift + j ".).

Чтобы вставить jQuery в выбранную вкладку, нажмите кнопку расширения.

___ answer443726 ___

Или попробуйте сценарии пользователя: Ссылка

___ answer3167449 ___

Это не отвечает на ваш вопрос, но, если вы его пропустили, теперь доступен Веб-разработчик Криса Педерика для Chrome: Ссылка .

___ answer925443 ___

Ну, можно включить скрипты Greasemonkey для Google Chrome, так что, возможно, есть способ сортировать установку Firebug используя этот метод? Firebug Lite также будет работать, но это не то же чувство, что использование полнофункционального: (

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide /

___ answer8519208 ___

F12 (только для Linux и Windows)

ИЛИ р>

Ctrl ⇧ I

( ⌥ ⌘ I , если вы на Mac)

___ answer4756199 ___

Попробуйте Firebug Lite для Google Chrome

___ answer19366197 ___

Забудьте все, что вам нужно, это независимый инспектор браузера, dom updater

Ссылка

просто пометить закладку и перейти на любую веб-страницу и щелкнуть эту закладку ..

На самом деле это проект Mozilla Project Goggles, потрясающий потрясающий ...

___ comment2151250 ___ Увидев, что Chrome теперь поддерживает расширения, можем ли мы пересмотреть это, так как многие из существующих ответов теперь технически неверны. Мы должны обновить этот ответ вместо того, чтобы начинать новый. ___ comment21222149 ___ проверить эту ссылку, чтобы получить firebug в браузере: getfirebug.com/releases/lite/chrome ___ comment3463893 ___ @Nathan Koop: Я мог ошибаться, но я не думаю, что система расширения Chrome достаточно мощна, чтобы позволить что-то вроде Firebug. ___ comment603139 ___ ++ Это достаточно хорошо для устранения неполадок, связанных с Chrome. Если я хочу более глубокую интроспекцию, я могу сделать это с Firebug. Теперь с новым режимом разработчика IE8, у всех основных браузеров есть встроенные режимы. Хорошие времена. ___ answer353387 ___

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

Ссылка

___ answer3922788 ___

Если вы используете Chromium на Ubuntu, используя ночной ppa, тогда вы должны иметь %code%

___ comment1443068 ___ Ах, я немного нашел его, но там есть функция редактирования html firebug, там же, где вы можете отредактировать css, панель инструментов разработчика, дважды щелкните элемент, введите и нажмите enter , и там вы идете, html отредактирован. ___ comment1571069 ___ Инструменты разработчика Chrome (ctrl + shift + j) поддерживают Javascript-отладку, такую как Firebug. Перейдите на вкладку «Сценарии», затем на второй значок внизу (> =), в котором есть всплывающая подсказка «Показать консоль». Оттуда вы можете выполнять команды Javascript, такие как консоль Firebug. ___ comment1584238 ___ Помните, что в какой-то Linux-системе он не устанавливается автоматически, поэтому вам нужно установить его вручную: sudo apt-get install chromium-browser-inspector ___ comment7267533 ___ Мне нравится Firebug лучше, чем предлагает Chrome. Но я ненавижу, как элемент проверки работает в Firefox. Мне жаль, что мне не нужно использовать два отдельных браузера для отладки ... ___ comment2187701 ___ Это также поддерживает заголовки HTTP под «ресурсами» (что очень важно для отладки Ajax). ___ comment47633085 ___ ++, если вы используете только хром для отладки ... / console / inspect element .. Извините mozilla ___ comment185598 ___ Отличная ссылка! Не знаю о версии IE ___ comment51932028 ___ Пока у Chrome есть отладчик ... у него нет мощности и простоты использования Firebug. Я верю в Firefox, если мне нужна мощная отладка, но по-прежнему использую Chrome в качестве основного браузера. : - \ ___ comment2089360 ___ Это официальное расширение для Chrome ___ comment1757708 ___ В текущем dev build 4.0.xxxx есть набор инструментов для разработчиков. Я знал об элементах проверки элементов раньше, но без панели «Сеть» это было недостаточно. Но теперь есть панель «ресурсов», которая, кажется, работает очень хорошо и имеет все те же фильтры, что и firebug (скрипты, xhr, изображения и т. Д.). Я использую сборку Dev в течение недели, и она кажется довольно стабильной. Я просто, наконец, установил свой браузер по умолчанию в chrome - теперь это мой браузер для браузера! :) ___ comment2829085 ___ Просто для ясности: это ссылка на расширение firebug lite, а не расширение firebug. ___ comment23050994 ___ Firefox идет под гору. На данный момент (2013) chrome devtools намного мощнее, чем firebug ... и firefox все фокусирует свои усилия на Firefox OS, который даже не близок к андроидному frodo .. они даже не приложили много усилий для создания js и рендеринга Быстрее. ___ comment28696490 ___ один парень поставил ctrl shift j :) ___ comment35545648 ___ хуже, чем встроенная панель инструментов отладки хрома ... ___ comment8027220 ___ Ранее ссылка была нарушена. Обновите этот ответ с помощью новой ссылки. ___

askdev.info

как установить, настроить и как удалить

Описание

Firebug — отладчик web-приложений, используется как отдельное расширение для браузера Mozilla Firefox, являющееся консолью, отладчиком, и DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest.

Маловероятно, что эта статья заинтересует опытных веб-разработчиков, потому как среди них вряд ли найдется человек, который бы не знал, что такое Firebug и как им пользоваться.

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

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

Вы сможете редактировать, отлаживать и исследовать CSS, HTML и Javascript вживую, на любой веб-странице.

Файрбаг

Речь идет о плагине Firebug, или как его еще называют по-русски «Файрбаг», «Фаербаг», что в переводе с английского означает «огненный жук».

Плагин Firebug – это встроенный в браузер программный продукт, который предназначен для просмотра и редактирования структуры страниц веб-сайта (html-кода, стилей CSS, скриптов и др.). Инструмент этот совершенно не интересен обычным пользователям всемирной паутины, но для тех, кто пробует себя в создании сайтов – вещь совершенно незаменимая.

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

Какие браузеры поддерживают Firebug

Кроме «Огненной лисы» Firebug есть и у браузера Google Chrome.

Скачать для Google Chrome.

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

Есть Firebug и в браузере Opera, но им пользуются намного меньшее число людей.

Скачать Firebug для Opera.

Пользование плагином Firebug кажется сложным только на первый взгляд. После того, как вы более-менее разберетесь с этим инструментом, вопросов будет возникать все меньше.

Вызывается Firebug во всех браузерах стандартно – нажатием кнопки F12, либо правой кнопкой мыши, где из контекстного меню необходимо в зависимости от вашего браузера выбрать пункт «исследовать элемент» или «инспектировать элемент».

После этого на мониторе появится рабочее окно файрбага, в котором мы можем увидеть весь html-код открытой страницы, а также другие ее элементы, включая css-стили.

А теперь, собственно говоря, поговорим для чего все это нужно.

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

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

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

Итак, вот страница нашего сайта. Перед нами стоит задача изменить цвет области вот этого заголовка с синего на какой-либо другой. Эту задачу, конечно, можно выполнить, изменив код непосредственно в файле стилей на сервере. Но ведь после изменения нам захочется посмотреть результат и если он нас не устроит, придется снова лезть в файл и править код. И так несколько раз, пока мы не добьемся нужного результата. Согласитесь, что это неудобно. С Firebug задача существенно упрощается.

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

Разобраться с премудростями работы Firebug не так сложно, как кажется на первый взгляд. И поверьте – оно того стоит. Пройдет буквально несколько недель после того, как вы впервые откроете для себя Firebug, и вам уже будет сложно представить, как можно было раньше обходиться без этого инструмента.

Для работы Firebug 1.4 требуется Firefox 3.0 или выше.

Скачать Firebug

download-browser.ru

Firebug для Firefox! Как пользоваться расширением Firebug?

Всем привет!

Сегодня я расскажу вам об одном очень полезном расширении для браузеров Firebug! Плагин Firebug или в переводе с английского языка «огненный жук», является настоящим прорывом эволюции в мире интернета и заслуживает особого внимания!

firebug для chrome

Возможно, для рядовых пользователей всемирной паутины плагин не принесет никакой пользы. Но, если вы являетесь веб мастером, и имеете в наличии свой собственный ресурс, firebug вам придется по вкусу! А если вы еще и начинающий верстальщик, то он для вас окажется просто незаменимым помощником. Итак, чем же так хорош этот огненный жук?

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

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

А бывают моменты еще интереснее. На одном из ресурсов в сети вам понравился один из элементов, который автор реализовал на своем сайте, и вам очень захотелось нечто подобное сделать у себя на блоге. Но, как подсмотреть, с помощью какого кода у него реализован этот элемент? Ответ прост — плагин Firebug вам поможет! Да-да, вы не ослышались, с помощью расширения Firebug вы можете посмотреть HTML — коды не только страниц своего ресурса, но и любых других.

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

Конечно же, сделать все то, что я перечислил, можно и без плагина. Например, если вам нужно отыскать участок кода, отвечающий за вывод времени и даты, можно нажать на соответствующей странице браузера правую кнопку мышки и выбрать из выпадающего списка пункт «Исходный код страницы» или воспользоваться горячей клавишей Ctrl + U.

Но в этом случае перед вами предстанет HTML — код всего содержимого открытой страницы, а вам нужен только участок, отвечающий за вывод времени и даты. Так как же тогда поступить? Придется внимательно просматривать весь код в поисках нужного. А если вы вообще не разбираетесь в HTML, то поиск будет бесполезен. Что же в этом случае предлагает нам огненный жук?

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

расширение firebug

Firebug вам ту же выведет интересующий вас участок кода, подсветив его синим цветом:

плагин firebug-2

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

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

Каждый пользователь сети интернет отдает предпочтение одному из понравившихся браузеров. Браузер — это программное обеспечение для запроса и просмотра веб-страниц. В наше время наиболее распространенными из них являются Mozilla Firefox и Google Chrome.

Лично я являюсь давним поклонником браузера Mozilla Firefox, хотя Google Chrome мне кажется довольно шустрее и функциональнее. Наверное, это дело привычки.

Так вот, изначально расширение Firebug было разработано специально для браузера Mozilla Firefox, но время не стоит на месте и разработчики распространили «огненного жука» и на другие браузеры. Но все же оригинал остался оригиналом.

И если на Mozilla Firefox плагин устанавливается очень просто, то найти страницу с установочным расширением для Google Chrome немного сложновато. Поэтому я решил показать оба варианта установки этого замечательно плагина. Итак, преступим.

Firebug для Firefox

Скачать firebug для firefox можно на этой странице. На данный момент последней версией плагина является 1.12.6. Как вы уже, наверное, догадались, установка должна производиться из браузера Mozilla Firefox. Для скачивания плагина достаточно нажать на кнопку «+ Добавить в Firefox» и в появившемся окне «Установить сейчас»:

как пользоваться firebug-3

После этого, в верхней или нижней панели навигации, в зависимости от того где она у вас располагается, появится значок жука:

плагин firebug-4

Если вдруг он по каким-то причинам у вас не появился, то запустить расширение можно с помощью «горячей клавиши» (F12).

Firebug для Chrome

Если вы пользуетесь браузером Google Chrome, то в этом варианте установки, открыт, должен быть именно он. Скачать firebug для chrome можно перейдя по этой ссылке. Далее, кликаем по кнопке «+ Бесплатно» и в появившемся меню жмем «Добавить»:

firebug для chrome

После этого расширение будет установлено и в навигационной панели браузера вновь появится изображение жука, но немного отличного от предыдущего пункта:

firebug для opera

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

А теперь, как и обещал, покажу на конкретном примере, как пользоваться этим инструментом. Для запуска firebug достаточно кликнуть по значку жука или, как я уже упомянул выше, воспользоваться «горячей клавишей» F12. После запуска в нижней части страницы появится окно со следующим содержимым:

firebug для opera-8

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

файрбаг-10

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

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

Как видно из скриншота ниже, я навел курсор мышки на участок кода <div> и в верхней части страницы тут же подсветилось основное меню, за которое и отвечает это участок HTML — кода.

плагин firebug-8

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

В этом примере я навел курсор мышки на все то же основное меню блога и плагин подсветил мне участок кода, отвечающий за его вывод:

расширени firebug-9

Что еще хочется сказать? Вы должны знать, что любая современная верстка сайта осуществляется при помощи блоков, заключенных в так называемые контейнеры div (блочная верстка). Вы их можете наблюдать на скриншоте выше.

Причем каждый контейнер зачастую имеет несколько последовательно вложенных друг в друга кодов. Чтобы посмотреть их вложенность вам необходимо в левом окне плагина щелкнуть по плюсику. Так же, работая с любым из кодов, в панели управления плагином вы сможете наблюдать последовательно вложенные друг в друга контейнеры, включая редактируемый контейнер:

расширени firebug-11

Как редактировать HTML — код с помощью плагина Firebug

Для редактирования участка кода, выделите его кликом мышки и нажмите вкладку «Редактировать». Я покажу вам на примере все того же меню. В нем я с помощью плагина изменю название страницы с «Все статьи блога» на «Содержимое ресурса»:

файрбаг-12

Как вы можете наблюдать, любые изменения сразу же отображаются в реальном времени на странице браузера, что очень удобно. Если взять этот пример, то он не вызывает сложностей. Но, все же плагин не всемогущ и при правке кодов, существует одна особенность, в которой начинающим веб мастерам разобраться будет сложно!

Дело в том, что все шаблоны написаны на языке программирования, который носит название php. А при открытии страницы в браузере она преобразуется в HTML — код. И если вам понравится реализованное вами изменение, то для его воплощения придется копаться в файлах шаблона, чтобы отыскать нужный код для редактирования.

Как поступить в этом случае? Для начала, вам необходимо знать, какой из файлов шаблона отвечает за отображение того или иного элемента на блоге. Со структурой шаблона вам поможет разобраться моя прошлая статья, там все подробно расписано.

После того, как нужный файл будет найден, вам потребуется зацепиться за один из классов или id (идентификаторов). Если брать все тот же пример с меню, я бы рассуждал так:

За верхнюю часть ресурса (шапка блога) отвечает файл шаблона header.php. А далее смотрю на код в панели плагина Firebug и вижу, что все меню заключено в контейнер с классом Menu (class="Menu"). И теперь, чтобы отыскать нужный класс, для удобства воспользуюсь бесплатным текстовым редактором Notepad ++. Как пользоваться поиском редактора, я уже писал в статье про уникализацию шаблона. Там все подробно расписано.

Как редактировать CSS — код с помощью плагина Firebug

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

Чтобы увидеть своими глазами, как работает то или иное свойство, запустите firebug, подведите курсор мышки к любому из участков кода в правом окне плагина. Напротив каждой строчки будет отображаться перечеркнутый красный кружок. Если вы нажмете на него, то кружок вместе с прописанным стилем изменит цвет на бледно серый, а на самой странице вы тут же увидите изменение, за которое отвечает это участок кода.

Как видно из примера ниже, я отключил позиционирование основного меню блога (выключил position: absolute;) и меню уехало в верхнюю часть страницы:

расширени firebug-13

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

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

Я запущу Firebug в Firefox и найду нужный мне участок кода, вы уже знаете, как это сделать. За синий цвет ссылки на моем блоге отвечает строчка color: #1821B5 (#1821B5 — это код цвета). Мне нужно изменить 1821B5 (синий цвет) на 2d8324 (зеленый цвет). В итоге я увижу нужные мне изменения:

расширени firebug-14

Если цвет меня полностью устраивает, то я перехожу в файл шаблона style.css и меняю значение старого цвета, на новое. Но как отыскать нужный участок кода в файле style.css, отвечающий именно за цвет строчки «Читать запись полностью >>»?

Все очень просто! Если вы внимательно посмотрите на приведенный выше скриншот, то увидите что плагин firebug дает нам подсказку, которую я выделил красным контуром. В данном примере он нам говорит, что нужный участок кода находится в файле style.css (строка 18).

Так же в редактировании цветов вам поможет одна замечательная программка ColorMania, она способна в считанные секунды определить любой цвет на странице. Как ей пользоваться я уже писал в статье про уникализацию шаблона (ссылку привел выше).

На этом пост про плагин firebug для firefox я буду завершать! Надеюсь, он вам принесет много пользы, и теперь вы с легкостью сможете отредактировать несложные элементы на своем блоге с помощью замечательного инструмента Firebug. Я же с вами прощаюсь и жду вас в следующих статьях! Всем пока!