Firebug на практике


Содержание

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

Здравствуйте, уважаемые читатели! Сегодня речь пойдет об очень важном инструменте верстальщика — бесплатном дополнении Firebug для FireFox. Лозунг на сайте разработчиков гласит — «Эволюция web-разработки». Не верьте этому! Firebug -это настоящая революция web-разработки. После знакомства с Firebug вы будете недоумевать, как обходились без него раньше.

До того, как я связался с web технологиями, моим любимым браузером была Opera. Быстрая, легкая, удобная. И все-то меня в ней устраивало, но чем дальше я погружался в изучение html и css, тем чаще встречал упоминания о бесплатном дополнении Firebug для FireFox. «Подумаешь, какое-то дополнение! Неужели ради него стоит менять браузер?!» — думал я тогда. Практика показала, что стоит. Попробовав один раз в действии Firebug, я уже не мог работать без него. Это действительно очень важный инструмент веб-мастера. Без него, как без рук. Скоро Вы в этом сами убедитесь.

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

Как установить FireBug в FireFox

Браузер FireFox хорош тем, что его функционал легко можно расширить с помощью бесплатных дополнений, коих очень и очень много. Одним из таких дополнений является FireBug.

Устанавливается FireBug очень просто и быстро. Откройте браузер FireFox и зайдите на страницу, посвященную данному дополнению.

На момент написания этих строк дополнением FireBug уже пользуются более 3 миллионов человек. Давайте присоединимся к ним. Нажимаем на кнопку «Добавить в FireFox».

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

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

Включить панель FireBug можно нажатием кнопки F12. По умолчанию она появляется в нижней части экрана. Положение панели можно изменить. Для этого зайдите в опции (иконка жука в левом углу панели) и выберете пункт Положение окна.

Основной закладкой является «HTML». Именно в ней предстоит нам работать большую часть времени. Окно разбито на две части:

  • Слева представлен исходный код страницы;
  • Справа — стили css.

Если навести курсор мышки на какой-нибудь html тэг в левом поле, то он будет выделен цветом на странице. При этом:

  • голубой цвет показывает ширину элемента;
  • темно синий — поля (padding);
  • светло желтый — отступы (margin).

Картинка ниже кликабельна.

При выборе тэга, нажатием левой клавиши мыши, в правом окне отобразятся его css стили. В самом верху будут указаны стили именно этого html тега, ниже пойдут унаследованные стили. Если какой-то атрибут зачеркнут, значит он не работает (переопределен). Кроме этого, указывается файл css и номер строки в нем, где тот или иной стиль определен.

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

А теперь самая главная фишка FireBug, за которую его так любят: вы можете менять структуру страницу и ее стили на лету! Практически никаких ограничений — можете взять тэг и переименовать его, изменить содержание заголовка или абзаца, отредактировать, отключить или добавить атрибут стиля, а можете просто удалить пол страницы. Результат будет тут же отображаться на экране! Только помните: все изменения происходят в самом FireBug , так что после перезагрузки страницы, она вернется к первоначальному состоянию. Таким образом навредить никак нельзя.

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

Что еще есть интересного:

  • На закладке «Консоль» можно посмотреть ошибки JavaScript, HTML и CSS — полезная информация для отладки.
  • На вкладке «Сеть» имеется информация по запросом: статус, размер, удаленный IP и время исполнения.
  • Вкладка «Page Speed» позволяет протестировать скорость загрузки страницы. Оценка ставится по 100 бальной шкале. Кроме этого, даются полезные совету, которые позволят улучшить данную характеристику.

Пример практического использования FireBug

Теперь рассмотрим пример из практики. На моем блоге есть статья, посвященная плагину Mingle Forum для WordPress. В ней рассказывается, как вывести форум на отдельной странице. Ради удобства для нее создается отдельный шаблон, в котором удаляется сайдбар. Подразумевается, что форум займет всю ширину страницу.

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

Ко мне время от времени обращаются люди за помощью. Благодаря FireBug найти злосчастный элемент и его стили несложно.

Последний раз я интегрировал форум в тему Sento . Рассмотрим порядок действий.

1. По инструкции, описанной в той статье, создаем отдельный шаблон pageforum.php, в котором удаляем строчку кода, отвечающую за вывод сайдбара справа. Создав страницу с форумом, получаем следующий результат.


Как видите, сайдбар исчез, но осталось пустое место. Его то и следует убрать.

2. Включаем наш инструмент нажатием кнопки F12.

3. Первое, что следует сделать — узнать ширину вашего шаблона, конечно, если он не резиновый. Включаем функцию анализа страницы и мышкой ищем элементы, для которых задан параметр width (ширина) в правом столбце, отвечающем за стили css. Найти будет несложно, скорее всего ширина задана для шапки сайта, так что с нее и следует начать поиск.

4. Следующей нашей целью будет элемент, который отвечает за вывод содержания страницы. Главным критерием поиска является заданная в стилях ширина (width). Именно она не позволяет форуму расползтись. Не забывайте про возможность анализировать структуру страницы с помощью мыши. Данная функция значительно упростит поиск. Картинка кликабельна.

В данном случае я нашел тэг div с классом span-16. Заметьте, что стили прописаны не в стандартном файле style.css, который находится в корневом каталоге темы, а в файле screen.css, расположенном в папке css. Так что будьте внимательнее, чтобы не пришлось искать стили там, где их нет.

5. Открыть файл screen.css, найти класс span-16 и поменять параметр width легко, но это будет ошибкой. Другие страницы WP тоже используют div с классом span-16, так что они после таких изменений просто расползутся. Следует открыть шаблон pageforum.php и переименовать класс span-16. Дайте ему новое, нигде не задействованное имя. Для этого нового класса пропишите параметр width в файле со стилями. Таким образом, изменения будут внесены только в страницу для форума.

Вот так быстро и просто FireBug позволяет находить нужные html тэги и их стили.

Напоследок хочу сказать, что FireBug становится абсолютно бесполезным в том случае, если вы не знаете хотя бы основ html и css. Изучить их несложно, нужно только захотеть. Если вы ведете блог или сайт, то рано или поздно эти знания вам понадобятся. Лично я получил их из бесплатного мануала «Самоучитель HTML и CSS» за авторством Влада Мержевича. Конечно, этот мануал не сделает из вас профессионального верстальщика, но базовые знания вы точно получите.

На этом на сегодня все. Спасибо а внимание и до новых встреч.

Лучший способ выразить благодарность автору — поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

Эти статьи Вам могут быть интересны:

Добрый вечер Дмитрий . У себя на сайте подшаманил все супер вышло благодаря надстройке FireBug на базе Mozilla Firefox. Но возникли некоторые вопрос, как в самом форуме при реестрации встроить капчу . Помогите разобратся в следуещей своей стате, буду очень признателен . И еще небольшой дополнительный вопросик к Вам лично как отличному Seo-шнику , почему Вы невнесли свой сайт в каталог Dmoz или хотябы Я.Каталог от етого Ваш сайт только бы прибавел в масе посетителей и рейтенге . что несомнено сказалось на Вашых доходах .

Доброе утро, Олег! Я смотрю, уже включил капчу от Captcha Code. Я как раз ее хотел посоветовать.

Что касается каталогов. В Dmoz дважды подавал заявку, но пока никак не берут. А в ЯК прорваться бесплатно по моей тематики не реально. Только за деньги, а это почти 15 000. Для меня это многовато.

Очень удобное расширение постоянно им пользуюсь. С помощью пейдж спид получилось на много ускорить блог))

Да, очень полезная вещь PageSpeed . Забыл о ней рассказать в этом посте.

Дмитрий добрый вечер . Операция у малой прошла нормально, остается денюшки искать ))) без них никуда. А относительно этой стати хочу посоветовать дополнение СSS Usage 0.3.0 это надстройка к FireBug нажатием одной кнопки можно выяснить какие CSS правила не используются и дают возможность их почистить, это круто Дмитрий

Доброе утро, Олег! Рад, что у тебя все хорошо! Надо будет попробовать этот СSS Usage 0.3.0 в действии.

Отличное расширение. Обязательно попробую. Спасибо.

Осторожно, данное расширение вызывает привыкание.

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

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

Никак не могу установить последнюю версию firebug , пишет не совместим с версией firefox 56.0??

Thanx for sharing such useful post keep it up

Pretty helpful material, much thanks for this article

by visiting this site I found cool stuff here keep it up.

only professional writers can make this kind of material, cheers

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


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

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

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

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

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

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

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

Илон Маск рекомендует:  Прогресс бар в статус баре

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

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

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

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

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

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

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

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

Firebug – полезный инструмент для web-разработчика

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

Также плагин firebug предоставляет следующий функционал:

  • Инспектор ( Inspect )– функция, предназначенная для быстрого обнаружения тега и просмотра всех « привязанных » к нему свойств и стилей;
  • Возможность редактировать HTML -код и таблицы стилей CSS непосредственно в окне браузера. Можно вносить различные изменения в атрибуты тега и сразу же наблюдать результат. Это очень удобно для нахождения нужного оформления;
  • Возможность отладки JavaScript ;
  • Дополнительный функционал, который позволяет просмотреть процесс загрузки страницы.

Это далеко не полный список функций, которые представляет плагин для web-разработчиков. Помимо всего прочего были созданы дополнения к firebug :

  • Firecookie — инструмент для просмотра и управления cookies ;
  • FirePHP — инструмент для отладки PHP -кода при помощи HTTP -заголовков;
  • FireRainbow — инструмент, который выделяет ( подсвечивает ) вставки JavaScript ;
  • Page speed firebug — дополнение, позволяющее измерить и оптимизировать скорость загрузки сайта.

Firebug для firefox

Для того чтобы установить firebug для firefox , необходимо перейти на официальную страницу , на которой представлен список версий данного продукта: следует выбрать последнюю на данный момент.

Если страница была открыта в Firefox , то при наведении курсора на ссылку с версией firebug отобразится предложение в виде кнопки с надписью « +Добавить в Firefox ». Для начала установки плагина необходимо кликнуть по данной кнопке, а после ее окончания перезагрузить браузер:

Использование firebug

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

На данном скриншоте видно, что в окне слева представлен HTML -код страницы, а справа – CSS стили выделенного фрагмента кода. Это ускоряет поиск и отладку. Также в меню присутствуют следующие разделы для обработки:

Редактирование HTML-кода


Для редактирования html -кода достаточно выделить нужный фрагмент и выбрать пункт « Редактировать ». Изменения сразу же отобразятся на web -странице. Если навести курсор на какой либо участок кода, то firebug выделит на странице элемент, описанный данным кодом, как показано на следующем скриншоте:

Редактирование CSS

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

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

Page speed firebug

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

Это расширение для firebug можно найти, перейдя по следующей ссылке: https://developers.google.com/speed/pagespeed/?csw=1 . После установки и запуска нет никаких препятствий для того, чтобы начать анализ:

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

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

Горячие клавиши firebug

Горячие клавиши ( быстрые клавиши ) ускоряют процесс работы в несколько раз. Ниже приведен список некоторых полезных горячих клавиш, действующих в плагине firebug :

Firebug для других браузеров

Чтобы установить firebug для chrome , нужно зайти в настройки браузера, выбрать вкладку « расширения », затем кликнуть на « еще расширения » и с помощью поиска найти плагин:

Установить плагин для opera можно на официальном сайте :

Firebug для safari и для IE можно найти на сайте . Нужно отметить, что версии для браузеров, отличных FireFox , имеют не полный функционал, а являются Lite -версиями плагина.

Firebug является прорывом в сфере web-конструирования. Это отличный инструмент, который дает возможность сделать работу верстальщика более приятной и увлекательной, а самое главное – более быстрой.

Также данный плагин является хорошим вспомогательным инструментом для тех, кто только начинает знакомиться с разработкой сайтов. Для большинства браузеров существует аналог firebug , так что вы можете познать его прелести, даже не используя Firefox .

Практика Javascript: обработка кода, специфичного для Firebug

12 Dan [2009-05-27 15:15:00]

Firebug, безусловно, прекрасный инструмент для отладки javascript; Я использую console.log() широко.

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

javascript jquery firebug

9 ответов

14 Решение Tony Miller [2009-05-27 15:22:00]

Если вы оставите вызовы console.log() в своем производственном коде, пользователи, посещающие сайт с помощью Internet Explorer, будут иметь ошибки JavaScript. Если у этих людей есть дополнительные инструменты отладки, они будут видеть неприятные диалоговые окна или всплывающие окна.

Быстрый поиск показал эту тему, обсуждая методы, чтобы определить, существует ли консоль Firebug: http://www.nabble.com/Re:-detect-firebug-existance-td19610337.html

был укушен этим раньше. В идеале все операторы console.log необходимо удалить перед производством, но это подвержено ошибкам, и разработчики неизменно забывают или тестируют только в FF + Firebug.

Возможное решение — создать фиктивный объект консоли, если он еще не определен.

Одно предостережение: в Safari 10.4 было так, что любой вызов console.log вызовет исключение безопасности, поскольку объект консоли является зарезервированным объектом, используемым в виджетах панели управления Mac OS. Не уверен, что это так, проверит сегодня вечером.

8 annakata [2009-05-27 15:25:00]


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

3 [2009-05-27 15:36:00]

Просто подумал, что добавлю хороший совет для любой отладки js. используйте ключевое слово «отладчик», а его как точку останова в коде, firebug обнаруживает его, и MSIE (если у вас есть визуальная студия) обнаруживает его и, как я говорю, это точка останова.

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

2 iamdash [2009-05-27 15:21:00]

У меня было много головной боли, вызванной этим.

Я использую console.log() много, и до недавнего времени обнаружил, что это приведет к сбою всего JS-кода в версиях FF, не используя firebug.

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

2 Kev [2009-05-27 16:12:00]

Некоторые компрессоры вычеркнут любую строку с префиксом;;; (который является юридической последовательностью, состоящей из трех пустых операторов.) Таким образом, вы строго не ограничены ссылками на консоль (т.е. вы можете выполнить некоторые вычисления, а затем console.log() результат в конце, а компрессор может выньте все из них.) Я использую JavaScript:: Minifier для этого.

Я использую это в OOP Javascript, создавая свою собственную оболочку для журнала, которая проверяет, что firebug существует:

Как работать с Firebug

В предыдущем посте мы рассматривали возможности и особенности установки Firebug. Ну, а теперь вкратце рассмотрим панель инструментов Firebug. Почему вкратце?

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

Включение/выключение Firebug

1 — Для включения Firebug нажмите F12 на клавиатуре или кликните по значку Firebug — серому жучку в правом верхнем углу браузера. Жучок станет оранжевым и внизу экрана откроется окно с набором инструментов Firebug.

2 — Для выключения Firebug выполните те же действия – F12 или клик по жучку, жучок станет серым.

Окно инструментов Firebug

3Панель вкладок. В окне инструментов Firebug расположены семь вкладок: КОНСОЛЬ , HTML, CSS, СЦЕНАРИЙ, DOM, СЕТЬ, COOKIES. При наведении курсора на вкладки появляются всплывающие подсказки, поэтому, даже новичку будет не сложно разобраться в том, для каких целей используется та или иная вкладка. В каждой вкладке есть меню, которое можно открыть, кликнув по флажку рядом с вкладкой. С помощью кнопки на панели инструментов ненужные вкладки можно отключить.

4Кнопка со стрелкой – с помощью её вы сможете анализировать любой элемент веб-страницы. Для анализа щёлкните по кнопке. Затем наведите курсор на любой из элементов страницы. Элемент будет заключён в рамку, щёлкните по элементу. Рамка зафиксируется и в окне инструментов Firebug откроется вкладка HTML, где синим цветом будет выделен данный элемент. В правой половине окна вы увидите стиль этого элемента.

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

5Кнопка «Командная строка» — позволит вам ввести любые JavaScript. Работает функция автозаполнения – всплывающее окно показывает список всех доступных свойств, введенного выражения. Для вызова помощи введите в командную строку help и нажмите Enter .

6Кнопка «Выбор панели» — позволит отключать и подключать вкладки.

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

У Вас недостаточно прав для добавления комментариев. Возможно, Вам необходимо зарегистрироваться на сайте.

Лучшая практика Javascript: обработка кода Firebug

Firebug, безусловно, замечательный инструмент для отладки javascript; я использую консоль.журнал() широко.

Я хотел знать, могу ли я оставить код Firebug в производстве. Какая лучшая практика? Комментируя код отладки?

9 ответов

Если вы оставите консоль.вызов log () в вашем производственном коде, а затем люди, посещающие сайт с помощью Internet Explorer, будут иметь ошибки JavaScript. Если у этих людей настроены дополнительные инструменты отладки, они увидят неприятные диалоговые окна или всплывающие окна.


быстрый поиск показал, что этот поток обсуждает методы обнаружения, существует ли консоль Firebug:http://www.nabble.com/Re:-detect-firebug-existance-td19610337.html

был укушен этим раньше. В идеале все консоли.операторы журнала должны быть удалены перед производством, но это подвержено ошибкам, и разработчики неизменно забывают или только тестируют в FF + Firebug.

возможным решением является создание фиктивного объекта консоли, если он еще не определен.

одно слово предостережения: это было в случае Safari на 10.4, что любой вызов консоли.журнал выдаст исключение безопасности, поскольку объект консоли является зарезервированным объект, используемый в виджетах панели мониторинга Mac OS. Не уверен, что это так, проверю сегодня вечером.

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

Илон Маск рекомендует:  Как убрать переносы в Word. Практическое руководство

просто подумал, что я добавлю действительно хороший совет для любой отладки js. используйте ключевое слово «debugger», и его как точку останова в коде, firebug обнаруживает его также MSIE (если у вас есть visual studio) обнаруживает его и, как я говорю, его точку останова.

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

У меня было много головной боли, вызванной этим.

Я использую консоль.log () много, и до недавнего времени, обнаружил, что это приведет к сбою всего кода JS в версиях FF, не использующих firebug.

Я обычно запускаю находку перед выходом в эфир и комментирую ее.

некоторые компрессоры будут удалять любую строку с префиксом ;;; (что является юридической последовательностью, являющейся тремя пустыми операторами.) Таким образом, вы не строго ограничены ссылками на консоль (т. е. вы можете выполнить некоторые вычисления, а затем консоль.log () результат в конце, и компрессор может обнажать их все.) Я использую JavaScript:: Minifier для этого.

Я использую это в ООП Javascript, делая свою собственную оболочку для журнала, который проверяет, что firebug существует:

просто напоминание о том, что IE Dev Tool не поддерживает apply() на консоли.бревно.

консоль вызова.бревно.apply () вызовет исключение в IE8, когда инструмент dev активен.

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

Здравствуйте, уважаемые читатели.

Сегодня я проведу экскурс по одному из практических методов изучения html-разметки и css-стилей. А объектом нашего внимания в данном разрезе станет расширение FireBug. Изначально оно было создано для браузера Mozilla Firefox. На сегодняшний день Фаербаг также можно использовать в Opera, Google Chrome. Мы разберем его основные функции на конкретных примерах.

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

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

Как установить Фаербаг для Мазилы и других браузеров?

Для начала нужно установить дополнение Фаербаг в ваш браузер.

Можно скачать Firebug с официального сайта Мозиллы и установить его. Но проще будет перейти в раздел «Дополнения» браузера и ввести в строку поиска «Firebug», затем нажать «Установить».

В сегодняшней статье я расскажу именно о плагине Фаербаг для Мазилы, потому как это его базовая версия. Для остальных браузеров созданы версии FireBug Lite. Их функционал несколько сокращен.

Можно скачать Фаербаг для Хрома и Opera на официальных сайтах этих браузеров.

Замечу, что в Google Chrome есть собственный встроенный аналог FireBug.

Работать с ним можно, кликнув по странице правой клавишей и выбрать «Просмотр кода элемента», либо нажав F12. Сама я часто пользуюсь этим расширением для Гугл Хром. Однако, по моему мнению, для новичков Фаербаг более понятен и удобен. Кроме того, он переведен на русский язык в отличии от инструмента для просмотра кода в Хроме.

Для чего нужен FireBug?

В первую очередь ФайерБаг – это инструмент для просмотра исходного кода страницы или ее элемента. Этот код будет отличаться от кода в ваших файлах php шаблона WordPress. Однако изучение исходного кода дает понимание того, какие его части отвечают за те или иные элементы страницы.

Кроме того, FireBug позволяет править код прямо в браузере и следить за изменениями элементов. Эти изменения увидите только вы, после обновления страницы все станет как прежде. Если вы решите оставить внесенные вами правки, потребуется искать файлы шаблона, которые отвечают за выбранную вами часть страницы. В идеале, вы должны хорошо знать свой шаблон и за что отвечают все его файлы. Для начала изучите статью про структуру шаблона WordPress. Но если вы все же не можете найти, куда вносить изменения, ниже я расскажу про один из способов поиска необходимых файлов.

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


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

Чтобы его активировать вы можете кликнуть правой кнопкой мыши и выбрать «Инспектировать элемент с помощью FireBug». Либо выбрать в раскрывающемся списке под жучком опцию «Включить на всех страницах». Внизу экрана появится такое окно:

Это и есть рабочая область для просмотра и редактирования элементов страницы.

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

Работа с HTML

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

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

Работает и обратная последовательность: просматривая код в окне Фаербага, на странице будут автоматически выделяться соответствующие ему элементы.

Теперь, если вы хотите поменять, к примеру, размер картинки и посмотреть, как это будет выглядеть, нажмите кнопку «Редактировать».

Здесь вы можете менять любые параметры и сразу же видеть результаты этих изменений.

Например, уменьшим размер картинки вдвое:

Но помните, что стоит обновить страницу и все вернется к исходному виду. Как же сохранить изменения из FireBug? Для этого нужно найти файл шаблона, который отвечает за данный элемент. В моем случае, картинка просто находится в тексте статьи. Но вы, возможно, захотите изменить элемент из шапки или сайдбара, тогда и искать его нужно будет в файлах header.php и sidebar.php соответственно. Затем скопировать измененный в Файрбаге код и заменить соответствующие строки файла.

Работа с CSS

Теперь перейдем к стилям. Возьмем для примера социальные кнопки под статьей.

В поле справа мы видим вкладку «Стиль», которая отвечает за вид данного блока. Можно вносить изменения прямо в этом поле, либо перейти в закладку CSS, кликнув по ссылке, которая указывает на номер строки в файле style.css.

Нужный нам блок будет подсвечен голубой заливкой:

Здесь мы можем поменять толщину, цвет и стиль верхней и нижней границы элемента (border-bottom, border-top), его высоту (height), величину отступа от нижнего края (margin-bottom),ширину полей (padding), позицию элемента относительно окна браузера (position). Кроме того, сюда можно добавлять дополнительные параметры стиля. Значения перечисленных показателей можно увидеть наглядно, если перейти на вкладку «Макет».

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

Как найти необходимые файлы шаблона?

Один из методов поиска файлов шаблона с искомым кодом состоит в использовании Total Commander. В нем есть функция поиска файлов по содержимому («Команды» — «Поиск файлов» или Alt+F7). Скачайте архив с файлами сайта на свой компьютер через FTP-соединение. В этом может помочь статья об архивации файлов на сервере.

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

Например, мне нужно найти такой участок:

Он должен быть относительно уникален, иначе, может быть найдено слишком много файлов с одинаковыми частями кода.

Перехожу в скачанную папку с файлами WordPress и нажимаю поиск в Total Commander.

Нужно поставить галочку в графе «С текстом» и вписать туда искомое значение, по которому мы хотим определить нужный нам файл. Нажимаем поиск. Если файлов оказалось чересчур много, поищите другую часть кода в FireBug, которая будет более уникальной. Если же файлов несколько, открывайте их по одному и в редакторе (например, Notepad ++) и при помощи поиска ищите заданный текст (у меня «zar»). Проверьте, насколько весь блок соответствует тем значениям, которые вы видите с помощью дополнения FireBug. Если все сходится, вносите изменения в код файла и загружайте его на сервер.

Таким образом, с помощью Файрбага вы можете изучать файлы вашего движка и их наполнение. Это поможет вам лучше разбираться в его структуре и содержимом. Кроме того, вы можете использовать Фаербаг для Фаерфокс при изучении других сайтов, стиль которых вам интересен. Так вы сможете почерпнуть много нового в сфере html-верстки, css-классов и стилей, и в сайтостроении в целом.

Если у вас появились вопросы, задавайте их в комментариях к статье. Смотрим видео:

Firebug на практике

Удобно, когда изменять оформление сайта и находить ошибки в его работе можно прямо в браузере в процессе работы с сайтом. Для этого у различных браузеров предусмотрен свой функционал. Например, Средства разработчика в Internet Explorer или Dragonfly в Opera. У браузера Mozilla Firefox для этих целей есть целое меню «Веб-разработка» и замечательное расширение Firebug , которое сделает жизнь любого вебмастера чуть-чуть легче. О возможностях Firebug мы и расскажем в сегодняшней статье, узнаем как пользоваться этим полезнейшим расширением.

Firebug устанавливается как стандартное расширение для Mozilla Firefox и совместимо с последней 8-ой версией этого замечательного браузера. Чтобы добавить Firebug в Firefox достаточно зайти на страничку расширения https://addons.mozilla.org/ru/firefox/addon/firebug/ или официальный сайт Firebug http://getfirebug.com и запустить его установку.


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

Firebug, прежде всего, используется для редактирования CSS и HTML в режиме реального времени, отладки JavaScript и оптимизации загрузки страниц. Для этих целей в Firebug имеется 6 режимов отладки веб-страниц. Каждый режим представлен отдельной панелью в окне Firebug. Рассмотрим их подробнее.

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

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

Если ошибка связана со сценарием JavaScript, то одним кликом по ней можно перейти в режим отладки сценариев.

Отладка JavaScript производится на панели Сценарии. Здесь можно добавлять точки останова, запускать скрипты, отслеживать стек вызовов. Данный функционал незаменим при создании сайтов на Ajax.

Если ошибка на сайте связана с разметкой страницы, то кликнув по ней в консоли, вы попадете на панель HTML. Здесь отображается код страницы, загруженной в данный момент в браузер. Панель позволяет не только просматривать, но и редактировать HTML-код страницы. Для этого дважды кликните по нужному параметру либо кликните правой кнопкой мыши по выделенному коду и в контекстном меню выберите команду «Редактировать HTML».

Для обнаружения ошибок в HTML-коде сайта удобно использовать инструмент «Инспектировать». Нажмите кнопку со стрелкой и подведите курсор мыши к проблемному месту страницы.

Вы увидите код подсвеченного на странице элемента, а чуть правее – стили CSS, применяемые к данному элементу.

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

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

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

Редактирование CSS происходит в двух режимах:

Правка кода – правка исходного кода CSS в том виде, в котором он загружен браузером;

Живая правка — правка исходного кода CSS в том виде, в котором он извлечен из браузера.

Второй режим целесообразно использовать, если CSS формируется «на лету», например в результате выполнения сценариев.

Илон Маск рекомендует:  Анимация фона

DOM – Document Object Model или Объектная Модель Документа. Данная панель содержит иерархию объектов на открытой в браузере веб-странице. Как вы, вероятно, знаете самый главный объект в этой системе – объект window (окно). Далее объекты располагаются по мере вложенности — иерархии. При необходимости можно просматривать свойства того или иного объекта, и даже изменять их по клику мыши, тотчас видя результаты внесенных изменений на экране.

И, наконец, панель Сеть. Она показывает загрузку всех файлов на веб-странице, будь то каскадные таблицы стилей, запросы, сценарии JavaScript или обычный HTML. Здесь же можно оценить время загрузки тех или иных файлов, которое отображается в виде индикатора и измеряется в миллисекундах и секундах.

При наведении мыши на индикатор вы увидите точную раскладку по количеству потраченного на загрузку времени.

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

Как видите, расширение Firebug для браузера Mozilla Firefox предоставляет вебмастеру удобные и функциональные инструменты не только для решения проблем, но и проведения экспериментов с веб-страницами в реальном времени. Например, изменению стилей CSS и HTML-кода сайта. Мы узнали как пользоваться Firebug для Moziila Firefox. Ждем вопросы на форуме.

Расширение firebug. Как пользоваться Firebug

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

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

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

Возможности Firebug

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

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

С Firebug можно делать все то же самое, но только проще и намного круче. Плагин Firebug — отличный инструмент для корректировки HTML-разметки, отладки CSS и JavaScript.

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


Перейдите в браузере Mozilla Firefox «Инструменты» —> «Дополнения» и в поисковом окошке введите Firebug, затем нажмите «Enter». Должен появиться список расширений, в которых присутствует слово Firebug. Найдите из этого списка плагин Firebug, а затем щелкните правее от него «Установить».

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

Редактирование стилей CSS

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

Щелкните по жучку в правом верхнем углу экрана, чтобы запустить Firebug. Если Вы нажмете «Ctrl» + «F12» — также запустится Firebug, а если нажать «F12», то Firebug откроется в новом окне браузера.

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

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

1. Кликните по кнопке «Анализировать». После этого подведите курсор к оранжевой полосе, как показано на скриншоте.

2. Теперь щелкните по оранжевой полосе левой клавишей мыши. Но перед этим убедитесь чтобы был выделен рамкой именно тот элемент в шаблоне, который Вы собираетесь редактировать.

3. В правом окошке отобразился стиль CSS, а в левом HTML разметка этого элемента. Найдите в правом окошке HTML-цвет, который отвечает за цвет этой полосы.

Смотрите на скриншот выше. Стрелка №3 указывает на этот код. Если подвести курсор мыши на этот код – появится образец этого цвета. Так Вы можете убедиться, что этот цвет идентичен полосе, которую мы собираемся изменить.

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

Таким образом, мы можем отключать и включать определенные функции CSS. Теперь Вы знаете, если удалить эту строчку из файла style.css, то оранжевая полоса в шаблоне пропадет.

Сейчас Вы можете изменить цвет полосы меню прямо из браузера. Для этого в правом окошке Firebug надо щелкнуть по коду, на который указывает стрелка №3 и ввести новый цветовой код. Так как я хочу изменить цвет полосы на черный цвет, то мне нужно ввести код #0000000. С помощью программы HTML Colors 2000, Вы можете подобрать нужный Вам цвет. В уроке 74 я писал об этой программе. В этом же уроке Вы найдете ссылку для ее скачивания.

Изменения можно производить с помощью курсорных клавиш – стрелка вверх и вниз.

Изменив цвет, Вы сразу же увидите готовый результат в шаблоне. Заметьте, что даже не пришлось редактировать файл style.css. На самом деле плагин Firebug изменил полоску цвета только в памяти компьютера, но не в самом файле стилей. Если вы сейчас обновите страницу, то полоса меню примет свой первоначальный оранжевый цвет.

4. Зеленая стрелка №4 показывает, в каком файле нужно редактировать цвет и в какой строке. Теперь нам остается только открыть файл стилей style.css и отредактировать цвет в строке border-bottom: 4px solid #EE6007;

5. Эта стрелка показывает, какой HTML-блок отвечает за вывод этой полосы меню.

Давайте теперь рассмотрим, за что у нас отвечать строка ниже height: 60px;. Эта строка отвечает за ширину бордюра меню, где написаны рубрики блога. Чтобы в этом убедится, подведите курсор к началу этой строки и щелкните по красному значку в виде красного перечеркнутого кружка. Белая полоса меню с названием рубрик исчезнет.

Теперь, мы точно знаем, что эта строка отвечает за белую полосу меню с рубриками блога. Если в этой строке изменить значение 60px, например на 90, то полоса станет шире. Точно также Вы можете поэкспериментировать со строками, которые находятся ниже.

Изменение размеров шаблона с помощью плагина Firebug

Изменить размер шаблона довольно просто, но повозиться придется. Все не так просто, как может показаться

Щелкните по кнопке анализировать, а затем щелкните в шаблоне на блок, например на левый сайдбар. Если хотите изменить размер сайдбара, то щелкать надо не в середину сайдбара а по краю, чтобы выделить именно сайдбар, а не то что находится внутри. Потом в правом окошке Firebug кликните по вкладке «Макет», а затем нужно менять размер, куда указывает синяя стрелка. Вкладка «Макет» показывает размер блока и отступы.

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

В левом HTML-окошке стрелка указывает на блок

Как изменить размер и цвет текста заголовков

Тренироваться можете прямо на моем блога , на главной странице. Почему именно на главной? Потому что я менял размер шрифта заголовка и его цвет на главной странице.

Нажмите анализировать, а потом щелкните по любому заголовку в статье. В правом окошке стилей CSS Вы увидите приблизительно следующие коды CSS.

title <
color: #353434;
font-family: Arial,Helvetica,Sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 24px;
margin: 0 0 10px;
padding: 0 ;

В строке color: #353434 ; щелкните по коду и впишите другой HTML-цвет. Кликать нужно в зону, которая отмечена желтым цветом. После щелчка по коду, можете менять цвет заголовка курсорными клавишами – стрелка вверх и вниз.


Теперь мы изменим шрифт заголовков. Щелкните в строке font-family: Arial,Helvetica,Sans-serif; в зоне желтого цвета. Теперь курсорными клавишами вверх или вниз подберите шрифт, который Вам нравится больше.

В строке font-size: 24px; можете изменить в заголовке размер шрифта.

В строке font-weight: bold; можно изменить толщину шрифта.

Изменяя значение в этой строке line-height: 24px; , меняется расстояние заголовка между строками.

Изменяя три значения в этой строке margin: 0 0 10px; , текст заголовка можно отодвинуть от левого края, поднять выше или опустить.

Можно еще привести множество примеров редактирования шаблона, но поверьте, все в одном уроке не напишешь, да и смысла в этом нет. Все это можно найти на русскоязычном сайте firebug.ru. Я этот сайт посещал пару раз, но ничего там не изучал. Все, что я Вам показал в этом уроке – это из личного опыта.

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

Firebug на практике

(Кликайте на вкладки выше, чтобы посмотреть скриншот каждой.)

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

Просто и доступно

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

Инспектируй и редактируй HTML

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

Построй супер-совершенный CSS

Вкладка CSS в Firebug расскажет Вам все, что нужно знать о стилях на странице, и если Вам что-то не очень нравится, можно сделать изменения, которые отобразятся сразу же.

Смотри на CSS метрики

Когда CSS-контейнеры не выстраиваются нужным образом — иногда сложно понять, почему. Позвольте Firebug быть Вашими глазами, и он измерит и покажет все сдвиги, margin, padding, рамки и размеры для Вас.

Мониторинг сетевых запросов

Иногда страницы загружаются очень долго, но почему? Может, Вы написали чересчур много javascript? Забыли сжать изображения? Или серверы рекламодателей отдыхают в сторонке? Firebug покажет все с точностью до файла.

Отлаживай и профилируй JavaScript

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

Быстро находи ошибки

Когда что-то идет не так, Firebug мгновенно информирует Вас и дает детализированную полезную информацию об ошибках в Javascript, CSS и XML.

Исследуй DOM

Document Object Model — громадная иерархия объектов и функций. Firebug позволит Вам быстро находить нужные DOM-объекты и на лету редактировать их.

Выполняй JavaScript на лету

Командная строка — один из древнейших инструментов программиста. Firebug дает Вам старую добрую командную строку для javascript, дополненную некоторыми современными удобствами.

Логирование для JavaScript

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL