Firebug для Firefox



FirebugЗдравствуйте! Сегодняшний пост будет полезен начинающим блогерам с развитым чувством здорового любопытства и стремящихся постичь всё самим, но пока ещё мало разбирающихся в HTML, CSS и разных там Java скриптах. А поможет в ваших экспериментах со своим сайтом расширение Firebug. Как пишут сами разработчики: это не просто дополнение, а эволюция в web-разработке и это верно так же как то, что  за  10 лет из России за границу на заработки выехало 1349 химиков, 5670 физиков, 986 биологов, десятки тысяч рабочих и… ни одного гаишника.

Устанавливать Firebug проще всего открыв Firefox, в этом случае оно установится автоматически, без лишних

Установка расширений

 

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





Используя Файербаг вы можете менять код в любом месте страницы, наглядно видя результаты этих изменений и при этом ничего не испортив, ведь стоит только закрыть Firebug и обновить страницу как всё встанет на свои места. А вы, узнав местоположение кода, при необходимости копируете нужный файл в Notepad ++ и смело редактируете в

Firebug форматирование

 

соответствии с данными Firebug. Чтобы было понятно давайте переместим кнопки социальных сетей слева направо. Щёлкаем по огненному жуку и открываем окно с кодом, где большое окно HTML и окно меньше-Стиль.

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

Share 42, left: 80 px и находится это в файле style.css (строка 1845). Определяем на сколько пикселей нужно передвинуть кнопки, чтобы кнопки переместились как на втором скриншоте. Получилось 1220 px (просто щелкаем по значению, удаляем и

Редактирование страницы

 

подставляем своё, можно брать с потолка и потом корректировать). Как видно теперь кнопки переместились вправо, а мы узнали что для этого необходимо внести соответствующие изменения в файл style.css, конкретно в строку 1845, что легко сделать с помощью упомянутого выше Notepad ++. Так же можно определить как изменить высоту, но только уже в панели HTML.  Впрочем при желании можете попробовать поиграть разными значениями не только на своём, но и на любом другом (в том числе и моём) сайте.

Кстати это тоже отличная идея: вы увидели где то хорошую фишку и определили место расположения кода, подредактировали под дизайн своего блога и ву а ля… Ваш блог стал ещё краше. Конечно можно открыть исходный код практически любым браузером, щёлкнув правой кнопкой и выбрав что то типа “просмотр кода элемента”, но искать так нужный элемент это рутина и большая трата времени, тем более тем, кто в коде пока мало что понимает. С Файербагом же это делается легко и непринуждённо.

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

Рабочая область Firebug

1. Консоль: здесь просматриваем и исправляем ошибки на блоге, выполняем различные команды. Типы отслеживаемых ошибок можно выбрать кликнув по значку со стрелкой. Обычно выбирают ошибки которые нужно выявить на данный момент, а после их исправления  можно проверить ещё раз.

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

3. CSS: полная информация о стилях страницы. Перечислены все файлы стилей, загружаемые со страницей, можно выбирать для редактирования файлы из списка. Причём редактировать можно в режиме “правка кода”- исходный код в том виде, в котором он загружен браузером и “живая правка”- правка в том виде, в котором он извлечён из браузера, но начинающим на этом заморачиваться думаю не стоит.

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

5. DOM: объектная модель документа. Содержит иерархию объектов на открытой странице. Главным в этой системе объектом является window и далее по мере вложенности (иерархии). При надобности можно просматривать свойства объекта или изменять тотчас просматривая результаты таких изменений.

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

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


3 + 2 =

Яндекс поиск