Приветствую, всех читателей — Sozdaiblog.ru!
Сегодня, я покажу, как пользоваться Firebug.
Firebug – это специальная программа, которая помогает при вёрстки сайта. Знаю, что «Вёрстка сайта», у многих вызывает не только негативные мысли, но и даже страх. Думаю, что Вы сами понимаете, если мы хотим заниматься сайтостроением или просто желаем приукрасить наш блог, то учиться этому всё равно придётся.
Если Вы, как и я ведёте свой блог то думаю, давно столкнулись со словом – «Вёрстка». И всегда, делая эту злополучную вёрстку, сталкиваетесь с кучей проблем.
Одна из этих проблем – постоянный поиск нужного кода, отвечающего за элементы страницы. Решить данную проблему, нам поможет плагин – «Firebug (фаербаг)».
Как установить программу для вёрстки сайта – Firebug (Фаербаг).
Для того чтобы установить плагин firebug, нужно перейти по ссылке, на официальный сайт. Здесь, в правом верхнем углу нажать на большую красную кнопку:
В открывшемся окне, выбираем рекомендуемую версию фаербага и нажимаем кнопку – «Download»:
Вас, тут же перебрасывают в новое окно, где нужно нажать на большую зелёную кнопку с надписью – «+ Add too Firefox»:
После этого начнётся загрузка фаербага. Вам будет нужно разрешить его установку и по завершению перезагрузить браузер.
Теперь в одном из углов Вашего браузера должен появиться маленький значок с изображением жука:
Ну а дальше, нужно разобраться, как пользоваться фаербагом.
Вёрстка сайта — как пользоваться Firebug (Фаербаг).
Для того чтобы начать использовать Firebug, нужно перейти на ту страницу Вашего сайта, где Вы хотите производить изменения. Затем, просто нажать на описанный выше значок с изображением жука.
После этих действий, внизу браузера появится рабочее окно данного дополнения:
Далее, в левом верхнем углу этого окна, нажимаем на иконку в виде прямоугольника со стрелочкой:
Затем, указателем мыши, выбираем тот элемент, который мы хотим изменить и кликаем по нему. Во время выбора, элемент будет подсвечиваться голубой рамкой:
Теперь, в окне Firebug, в правой его части, будут отображаться – CSS свойства выделенного объекта, а в левой, можно посмотреть HTML-код и его местонахождение:
Во время вёрстки сайта или Вашего блога, не обязательно каждый раз меняя различные коды, обновляться и смотреть, что из этого получилось.
В окне фаербага, Вы смело можете менять и тестировать различный код, не боясь, что-то испортить. Всё происходит, в режиме реального времени и Firebug сразу будет показывать Ваши изменения. Во время изменений можете не пугаться, всё происходящее никоим образом, не повлияет на Ваш ресурс.
Надеюсь Вы поняли, как пользоваться Firebug (фаербаг) и страшные слова – «Вёрстка сайтов», больше Вас не пугают.
Перед тем, как делать вёрстку в обязательном порядке прочитайте – «Как сделать бэкап базы данных».
Так же можете почитать:
Если понравилась статья, то подписывайтесь на блог и будьте в курсе последних обновлений.
А Вы, самостоятельно верстаете свои сайты или обращаетесь к специалистам?
С уважением, Денис Черников!
Отличный материал, для новичков которые только знакомятся с версткой и имеют желание разбираться, править верстку самим.
Думаю, этот совет должен быть одним из первых пунктов в пособии для новичка: поставить firebug.
Но возможности этого плагина, да иных инспекторов для других браузеров, не ограничиваются только правкой и просмотром кода и стилей.
Например, вкладка «Сеть» позволит, в наглядной форме увидеть сколько и какие файлы загружаются во время загрузки сайта, с помощью этого инструмента можно отследить время загрузки файлов, со своего сайта и с внешних сайтов, определить общее время загрузки сайта и отдельно каждого сайта, тем самым определив узкие места в вашем сайте. Для опытных пользователей, просмотреть какие запросы и ответы получает браузер от сайта с этим плагином легче простого.
С помощью Консоли можно отследить ошибки и замечания, как на странице, так и исполняемом коде javascript. Выполнить различные команды, которые будут полезны для веб-разработчиков и программистов.
Все конечно, это для продвинутого пользователя и никак не входит в формат этой записи, но все же кому-то будет полезно знать и о других возможностях этого инструмента.
На конкурс.
Хороший материал, буду использовать, спасибо
Спасибо! Пожалуйста используйте, он для Вас!
Очень нужное приложение. Сам в дизайне пока слаб, может хоть поможет разобраться.
Да тут все через это приложение разбираются, как что ставьте и вперёд!
Скажите, а как определить какой файл выводит данную страницу? например нашел с помощью этой проги место которое надо подредактировать, как определить имя файла где надо изменить? но только не стили
Вот здесь, всё сложно, нужно проявить смекалку и по похожим тегам догадываться, иногда в панели путь правильный показывается, чуть выше окошка.
Непонятно как определять местонахождения файлов…
Да, немного тяжеловато сначала, здесь нужно немного смекалки включать! Со временем, Вы всё поймёте и разберётесь!
а ответить слабо? если не знаете, то так и скажите. я уже пятый сайт просматриваю по этой теме, везде один и тот же вопрос: как найти файл, но никто не может ответить((
Не могут ответить, это потому-что нет прямого ответа. Дополнение работает хорошо, но оно не указывает прямой путь к файлам. Вам придётся включать логику и учить html для понимания. К примеру, для css всё понятно там номера строк есть.
опять включить логику)))Люди и спрашивают хоть какой-то алгоритм. Дополнение суперское. я им давно пользуюсь. я знаю HTML и CSS. Но бывает, что не знаешь в каком файле данный код лежит. Просто иногда лучше ничего не отвечать или писать честно: не знаю!! А то включите логику))
Не знаю, это не ответ на этот вопрос, вот если «Не могу уточнить, как именно Вам включить логику» так будет более точно!
ставил я этот плагин, но не понравился он мне. Как мне кажется лучше всего через стандартный «просмотр кода элемента» на хроме, намного проще и удобнее
Это не совсем верно, Валентин! С багером проще элемент выделить и по строчкам понять, что за код за него отвечает.
Хм, Денис, а этот «жучок» работает только на «мозилле»? У меня «хром»…
Светлана, честно не помню, по-моему там есть своё приложение!
у “Download Now”.
у «Install Firebug on Firefox»:
После этого, проверяем, установился ли плагин правильно, открыв окно инструментов разработчика Firebug:
Теперь мы можем использовать Firebug для работы с кодом сайта и его вёрстки. Он позволяет быстро находить нужные элементы страницы, просматривать и изменять их свойства. Это очень удобно и экономит много времени при вёрстке.
Надеюсь, что информация о программе Firebug была полезной для вас. Удачной работы с вашими сайтами и блогами!