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

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.
ЗЗЫ: И еще - видео я снимала в первый раз, поэтому уж простите меня, если заметите какие-то ляпы!
Автор статьи: Елена Лощилова.
Привет Друзья!
Наверное Елену можно поздравить с дебютным уроком? Если да! Тогда поздравляю!
Спасибо за ценную информацию, уже установил к себе на комп Firebug, действительно очень много полезного ощутил.
Спасибо за поздравление! И пожалуйста в ответ на благодарность!
А еще не забывайте жать на кнопки социальных сетей
Сейчас для многих современных браузеров есть подобные дополнения(хотя может это тоже FireBug, только уже встроенный в установочный).
... файл браузера).
Но только по наглядности они уступают оригиналу.
Елене спасибо за интересную информацию. Мало знаю FireBug.
Если будет время расскажите какие вкладки FireBug используются чаще?
И почему.
Заранее спасибо.
По-моему у Елены был раньше дебют https://expert-css.com/page/search-in-header
Развития!
TIMUR! Действительно, инструменты, подобные Firebug есть практически в каждом браузере. Например, такие как Opera Dragonfly, IE Developer Toolbar, очень хорошая функция просмотра кода элемента в Chrome, но их принцип работы по инспектированию вебстраниц все же несколько отличается друг от друга.
В будущих уроках, думаю, рассмотрю некоторые из тех инструментов.
Насчет самых распространенных вкладок я рассказала в видеоуроке - это HTML и вкладка стилей СSS. Используются они чаще, потому что эти два языка - основа любого сайта.
ANDY GRAND! Дебют в смысле видео - я первый раз записала видеоурок
. И спасибо вам большое за пожелание, буду стараться!
+1 к спасибо)
Пожалуйста, Ольга!
Вот просмотрел ещё раз эти уроки и снова убедился - следует не просто посмотреть, но и применить НЕСКОЛЬКО раз на практике полученные знания. Иначе всё уходит сквозь пальцы.
Почему?
Да потому, что сегодня смотрел и видел как впервый раз некоторые возможности Firebug.
Хотя сейчас вовсю Firebug использую, проходя тренинг у Елены.
-------------
P.S. Елена, Ваш уровень подачи материала очень вырос. И голос стал звучать гораздо увереней по сравнению с этими (замечу очень хорошими) уроками
.
Спасибо большое, Тимур! Очень приятно.
Да, без практики никуда, вы правы. По-английски есть такая фраза даже: "practice makes perfect" - практика делает совершенным.
Да и по-русски похожих фраз полно. Главное - применять! 