Firebug: обзор основных функций.

Вторник, 15 января 2013 года в 09:06      Просмотров: 811
Firebug: обзор основных функций.

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

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

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



Видео первое: где нам взять Firebug и обзор основных его функций.



Видео второе: продолжаем обзор функций Firebug.



В третьем видео я рассказываю о Firebug Lite (это облегченная версия Firebug).



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

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

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

Затем открыть или обновить страницу в браузере и активировать Firebug Lite, нажав F12 на клавиатуре.

В видео я привожу пример на шаблоне для MaxSite CMS, где вставляю код, содержащий адрес скрипта в тег head файла main.php.

Но та же самая процедура применима и для сайтов на других CMS и без движка, просто также нужно вставить код скрипта в тег head.

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

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

ЗЫ: Чтобы смотреть ролики в лучшем разрешении, вам нужно поменять в настройках видео качество на 720р HD.

ЗЗЫ: И еще - видео я снимала в первый раз, поэтому уж простите меня, если заметите какие-то ляпы!

Автор статьи: Елена Лощилова.

Комментариев: 10

Привет Друзья!

Наверное Елену можно поздравить с дебютным уроком? Если да! Тогда поздравляю!

Спасибо за ценную информацию, уже установил к себе на комп Firebug, действительно очень много полезного ощутил.

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

... файл браузера).

Но только по наглядности они уступают оригиналу.

Елене спасибо за интересную информацию. Мало знаю FireBug.

Если будет время расскажите какие вкладки FireBug используются чаще?

И почему.

Заранее спасибо.

По-моему у Елены был раньше дебют http://saratov-adsl.ru/page/search-in-header

Развития!

TIMUR! Действительно, инструменты, подобные Firebug есть практически в каждом браузере. Например, такие как Opera Dragonfly, IE Developer Toolbar, очень хорошая функция просмотра кода элемента в Chrome, но их принцип работы по инспектированию вебстраниц все же несколько отличается друг от друга.

В будущих уроках, думаю, рассмотрю некоторые из тех инструментов.

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

ANDY GRAND! Дебют в смысле видео - я первый раз записала видеоурок smile. И спасибо вам большое за пожелание, буду стараться!

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth. Войти через loginza

(обязательно)