ShowMeHow.Ru

Доброго времени суток уважаемые.

Прежде всего поздравляю всех с днём знаний! Дорогих учителей, которые иногда посещают мой сайт, а так же учеников и студентов с началом учебного года. Учится, учится и ещё раз учится, как завещал дедушка Ленин. Пожалуй это лучшее, что он сказал!

От поздравлений к полезной, надеюсь, информации.

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

Сегодня я расскажу вам о расширении которое очень полезно для сайтостроителей, как профессионалов в HTML, так и (особенно) для начинающих и только осваивающих HTML вэбмастеров.

Расширение это называется FireBug. Оно позволяет зайдя на сайт удобным образом изучать всю его HTML подноготную, при этом каждый HTML контейнер подсвечивается в обозревателе при выделении его в HTM коде. Как это выглядит я покажу скриншотом и небольшим видео.

Итак начнём.

Для начала, необходимо установить сам браузер, если вы этого ещё не сделали. Для этого зайдите на страничку http://www.mozilla.ru, где сразу на первой же странице вам будет предложено (хоть и по английски) скачать самую последнюю русскую версию. Думаю со скачиванием и установкой у вас проблем не возникнет. На момент написания заметки самая последняя версия 3.0.1

Далее устанавливаем само дополнение. Для этого идём в меню Инструменты\Дополнения


В открывшемся окне переходим на вкладку "Поиск дополнений" и вводим в строке поиска слово firebug (как это показано на изображении)


Затем нажимаем кнопку "Добавить в Firefox" и в открывшемся окне нажимаем "Установить сейчас"



В завершении потребуется перезагрузит  браузер. После перезагрузки браузера вы увидите иконку с изображением жука свежеустановленного расширения в строке статуса браузера.



Теперь зайдите на любой сайт, например тот над которым вы работаете, и нажмите эту самую иконку с жуком. Внизу окна браузера откроется панель с отображением кода текущей HTML страницы открытой в браузере. Если код не отображается нажмите кнопку HTML на панели инструментов Firebug.



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

Для пущей наглядности я отснял небольшое видео (всего на одну минутку).

Посмотреть его онлайн можно здесь
Так же вы можете скачать это видео (1024x768, 3,6 Mb Teora OGG, пожато в RAR)
Формат не совсем привычный для пользователей Windows, но он успешно проигрывается любым проигрывателем если у вас установлены более-менее свежие кодэки (например набор Klite).

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

На этом на сегодня всё. До новых встреч. Удачного сайтостроительства!