Как работать с Firebug - видеоуроки

Как работать с Firebug - видеоуроки

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

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

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

Тренинг по вёрстке сайта на HTML5 и CSS3


Видео первое: где нам взять 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.

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

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

Комментариев: 12 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

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

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

Комментариев: 12
  •  Игорь | 15 января 2013 в 14:52:44

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

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

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

  •  Елена | 15 января 2013 в 14:58:31

    Спасибо за поздравление! И пожалуйста в ответ на благодарность! smile

  •  Серёга | 15 января 2013 в 15:12:26

    А еще не забывайте жать на кнопки социальных сетей smile

  •  Timur | 15 января 2013 в 23:14:13

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

  •  Timur | 15 января 2013 в 23:25:25

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

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

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

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

    И почему.

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

  •  Andy Grand | 16 января 2013 в 02:08:09

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

    Развития!

  •  Елена | 16 января 2013 в 07:36:23

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

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

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

  •  Елена | 16 января 2013 в 07:37:02

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

  •  Ольга | 28 февраля 2013 в 11:18:20

    +1 к спасибо)

  •  Елена | 28 февраля 2013 в 11:23:17

    Пожалуйста, Ольга! smile

  •  Timur | 7 декабря 2013 в 13:21:45

    Вот просмотрел ещё раз эти уроки и снова убедился - следует не просто посмотреть, но и применить НЕСКОЛЬКО раз на практике полученные знания. Иначе всё уходит сквозь пальцы.

    Почему?

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

    Хотя сейчас вовсю Firebug использую, проходя тренинг у Елены.

    -------------

    P.S. Елена, Ваш уровень подачи материала очень вырос. И голос стал звучать гораздо увереней по сравнению с этими (замечу очень хорошими) уроками smile .

  •  Елена | 7 декабря 2013 в 16:18:48

    Спасибо большое, Тимур! Очень приятно.

    Да, без практики никуда, вы правы. По-английски есть такая фраза даже: "practice makes perfect" - практика делает совершенным. smile Да и по-русски похожих фраз полно. Главное - применять! wink