Firebug для яндекс браузера как установить
Полезные расширения для браузеров защитят аккаунты от взлома, сохранят нужную информацию и не только. Предлагаем бесплатное скачивание Firebug по прямой ссылке от разработчиков без торрентов и SMS.
Описание
Маловероятно, что эта статья заинтересует опытных веб-разработчиков, потому как среди них вряд ли найдется человек, который бы не знал, что такое Firebug и как им пользоваться.
Но ведь веб-мастерами не рождаются, ими становятся. И каждый гуру сайтостроительства когда-то тоже был новичком, старательно вникающим в пугающие своей сложностью технические премудрости процесса создания веб-сайтов.
Вот для таких людей, которые только начинают постигать азы сайтостроительства и написана эта статья, где мы постараемся рассказать об одном замечательном инструменте и незаменимом помощнике в таком непростом деле, как создание интернет-сайтов.
Вы сможете редактировать, отлаживать и исследовать CSS, HTML и Javascript вживую, на любой веб-странице.
Файрбаг
Речь идет о плагине Firebug, или как его еще называют по-русски «Файрбаг», «Фаербаг», что в переводе с английского означает «огненный жук».
Плагин Firebug – это встроенный в браузер программный продукт, который предназначен для просмотра и редактирования структуры страниц веб-сайта (html-кода, стилей CSS, скриптов и др.). Инструмент этот совершенно не интересен обычным пользователям всемирной паутины, но для тех, кто пробует себя в создании сайтов – вещь совершенно незаменимая.
Общепризнано, что самый удобный и как следствие, самый популярный Firebug — у браузера Mozilla Firefox. Вообще, строго говоря, само название Firebug — это бренд от Mozilla. Но так уж сложилось, что аналогичные продукты других производителей во всем мире тоже стали называть файрбагами.
Какие браузеры поддерживают Firebug
Кроме «Огненной лисы» Firebug есть и у браузера Google Chrome.
В принципе, файрбаги этих двух браузеров на современном этапе наиболее популярны у разработчиков сайтов, впрочем, как и сами браузеры.
Есть Firebug и в браузере Opera, но им пользуются намного меньшее число людей.
Пользование плагином Firebug кажется сложным только на первый взгляд. После того, как вы более-менее разберетесь с этим инструментом, вопросов будет возникать все меньше.
Вызывается Firebug во всех браузерах стандартно – нажатием кнопки F12, либо правой кнопкой мыши, где из контекстного меню необходимо в зависимости от вашего браузера выбрать пункт «исследовать элемент» или «инспектировать элемент».
После этого на мониторе появится рабочее окно файрбага, в котором мы можем увидеть весь html-код открытой страницы, а также другие ее элементы, включая css-стили.
А теперь, собственно говоря, поговорим для чего все это нужно.
А нужно все это для того, чтобы прямо из браузера, веб-мастер мог в тестовом режиме редактировать свой сайт, наблюдая в реальном времени за всеми изменениями, которые происходят на странице.
Допустим, на одной из страниц своего сайта вам захотелось поменять дизайн какого-то элемента. При помощи Firebug это можно сделать прямо из браузера, в «пробном режиме», не затрагивая самих файлов вашего сайта на сервере. Проще говоря, Firebug – это такой безопасный полигон, на котором можно ставить любые эксперименты с кодом вашего сайта, не опасаясь что-либо сломать.
Как пользоваться
В принципе, этот инструмент позволяет экспериментировать со многими другими параметрами сайта или же дает возможность посмотреть, как реализована понравившаяся вам идея на другом ресурсе – ведь Firebug позволяет смотреть код не только собственных сайтов, но и любых других.
Разобраться с премудростями работы Firebug не так сложно, как кажется на первый взгляд. И поверьте – оно того стоит. Пройдет буквально несколько недель после того, как вы впервые откроете для себя Firebug, и вам уже будет сложно представить, как можно было раньше обходиться без этого инструмента.
Для работы Firebug 1.4 требуется Firefox 3.0 или выше.
Ссылки на скачивание ведут на официальные сайты. Если вы сомневаетесь в файле, проверьте с помощью антивирусной программы.
Доброго здоровья всем читателям моего блога! Давно хотел затронуть своим вниманием тему использования расширений на благо вебмастеров и вот, наконец, представляю описание функциональных возможностей одного из самых популярных дополнений для Firefox, а именно, плагина Firebug. К слову, если вы еще не сделали окончательный выбор в пользу какого-то web-обозревателя, возможно, материал о самых популярных браузерах (тут) поможет вам в этом.
Должен признаться, что как инструмент для вебмастера мне больше по душе Google Chrome (бесплатно скачать последнюю версию, установить и настроить), который мне кажется более быстрым и функциональным, да и при серфинге по сети я пользуюсь им. Хотя, возможно, немаловажное значение при выборе браузера для работы с сайтом имеет сила привычки.
Эта сила иногда идет вразрез с очевидными преимуществами, которые предоставляют нам альтернативные варианты, но в случае с плагином Firebug все было иначе, я сразу понял его значение как важнейшего инструмента для вебмастера.
Где скачать и как установить расширение Firebug для Firefox
И несмотря на то, что подобные этому плагину для Мазила Фаерфокс инструменты есть сейчас и в других популярных браузерах (например, в Internet Explorer или в Opera), Firebug остается для меня приоритетным, поскольку в некоторых аспектах более удобен и функционален. Чем же хорош данный плагин?
Если вы используете любой другой веб-обозреватель, то справа появится кнопка «Загрузить сейчас» мышиного цвета, которую и следует нажать. После этого возникнет табличка с линками «Узнать больше о Firefox» и «все равно загрузить». Идя по первой ссылке, получите дополнительную информацию о браузере, если нажмете на вторую, появится стандартное окно загрузки, где получите предложение сохранить файл на компьютере. Выбираете место, куда поместить файл и нажимаете «Сохранить». Затем начнется стандартный процесс загрузки.
После его окончания загрузки открываете Фаерфокс, жмете в левом верхнем углу «Файл»-«Открыть файл». Находите место на жестком диске компьютера, куда определили скачанный файл и активируете его. Начнется установка, после окончания которой необходимо перезагрузить браузер. После перезагрузки в правом верхнем углу браузера Файрфокс увидите изображение жука, который является символом Firebug. Это значит, что плагин установлен и готов к работе.
Вот и весь процесс скачивания и установки. Как видите, ничего сложного нет. Теперь я поведаю, как пользоваться плагином Файрбаг. Конечно, главный упор сделаю на те функции, которые больше всего нужны вебмастеру и которыми пользуюсь я сам. Читайте далее внимательно и постарайтесь понять; поверьте, такие инструменты значительно облегчают жизнь вебмастеру.
Как пользоваться плагином Файрбаг для редактирования HTML кода
Сразу скажу, что Firebug может очень много. Самая необходимая опция, без которой, пожалуй не обойдется ни один вебмастер, это возможность редактировать параметры HTML и CSS прямо в окне веббраузера, наблюдая при этом, как будет меняться соответствующий элемент.
Итак, вызываете к жизни плагин нажатием на значок жука и внизу вам откроется окно, расположение которого можно менять, как вам удобно, простым перетаскиванием (для этого подводите курсор мыши к верхней границе окна Файрбаг пока он не примет вид двойной стрелки и, удерживая левую кнопку мышки, перетаскиваете границу вверх-вниз.)
Кроме того, нажатием на крайнюю левую красную кнопку можно свернуть окно, при клике на среднюю можно открыть расширение в отдельном окне, при нажатии на крайнюю правую отключаем плагин Firebug. Теперь посмотрим, как выглядит окно плагина в браузере Firefox:
С левой стороны располагается структура HTML, справа - элементы каскадных таблиц стилей CSS. Теперь небольшой экскурс в основы языка гипертекстовой разметки. Дело в том, что опытные профессионалы своего дела верстают сайты с помощью так называемых блоков (блочная верстка), используя контейнеры (с помощью тега div), задавая нужное содержание той или иной области вебстраницы. А вот внешний вид элемента верстки призваны определять таблицы стилей.
Причем используется принцип вложенности, то есть более объемные контейнеры могут содержать несколько элементов. Как видно из примера на скриншоте, для того, чтобы раскрыть тот или иной элемент, надо последовательно нажать на плюсик слева рядом с тем или иным фрагментом HTML и вы последовательно получаете вложенные один в другой блоки.
Если подводить курсор мыши к тому или иному элементу HTML-конструкции, то одновременно муаровым оттенком окрашиваются те области страницы, которые соответствуют данному куску кода и тогда можно увидеть, какие элементы входят в данный контейнер. Например, на выше расположенном скриншоте такой областью является один из элементов верхнего меню. Более того, если кликнуть по определенной строчке HTML, то в правой нижней половине отобразятся правила CSS, которые соответствуют этому элементу.
Таким образом, прямо в окне Firebug можно экспериментировать с различными областями страницы в браузере, редактируя их по своему желанию, пока не добьетесь требуемого результата. Причем огромный плюс данного способа заключается в том, что делать это можно, обладая самыми минимальными знаниями гипертекстовой разметки и каскадных таблиц стилей.
Кроме того, производить подобные опыты возможно с любой вебстраницей какого угодно ресурса, нимало не беспокоясь о том, что вы что-то напортачите, поскольку все эти изменения не будут сохранены и при перезагрузке страницы все примет прежний вид. Если, например, вам понравился какой-то ресурс в сети, то можно поэкспериментировать с одной из его страниц, чтобы узнать, какие параметры разметки и какие значения стилей использованы там.
Таким образом, вы будете знать, какую строчку HTML документа или какое свойство CSS надо изменить, чтобы получить требуемый результат. Причем для удобства в верхней строчке показаны последовательно вложенные друг в друга контейнеры, в которые включен данный элемент:
Опять же, если водить по этим контейнерам курсором мыши, то также окрашиваются элементы, которые входят в их состав. Как видите, возможности Firebug экономят кучу времени при приведении в божеский вид своего проекта, причем делать это может даже начинающий вебмастер.
Но это еще не все. Расширение обладает функцией, с помощью которой можно производить действия, обратные описанным выше. То есть если водить курсором мыши по странице, окрашиваться синим цветом уже будут сами элементы HTML в окне плагина Firebug:
Для реализации этой функции необходимо нажать на косую стрелку. Теперь водите мышкой по странице, а в левой нижней части будете наблюдать, как соответствующие участки HTML, отвечающие за создание элементов страницы, заключаются расширением в рамку.
Теперь можно перейти в левую часть окна расширения Файрбаг с тем, чтобы заняться непосредственно редактированием. Покажу на конкретном примере. Для того, чтобы изменить тот или иной элемент, например, положение верхней навигационной панели моего блога, изменю ID одного из тегов div. Для этого подвожу курсор к выбранному контейнеру:
и кликаю по нему мышкой, чтобы выделить (можно саму строчку не выделять, просто так легче редактировать). Он окрасится в синий цвет. Затем нажимаю левой кнопкой мышки на "access", в результате само слово окрасится синим и будет доступно для редактирования.
Теперь, если просто удалить атрибут "id access", то увидите, что верхняя навигационная панель приобретет непрезентабельный вид. Давайте используем другое значение "id" и вместо "acsess" используем "acsess1". Сразу увидите, что принципиально изменился вид верхнего меню моего блога:
Можете сразу попробовать именно с этим примером, чтобы почувствовать, как работает расширение Firebug (если кто еще не понял или невнимательно читал статью, можно проделывать такие штуки с любой вебстраницей любого сайта в интернете!). При этом, как я уже сказал, реальных изменений в файлах CMS (движка сайта) не случится, поэтому редактируйте смело. И уже только после того, как результат в виде вновь смоделированного HTML кода вас удовлетворит, можно переходить к действительному изменению.
Однако здесь и наступает основная сложность для начинающих вебмастеров. Дело в том, что файлы темы вашего движка WordPress, как, впрочем и любой другой CMS, написаны на языке PHP, которые при отображении страницы сайта в браузере преобразуются в HTML код. Поэтому придется копаться в файлах движка, чтобы найти именно тот, который необходимо отредактировать.
Здесь необходима какая-то зацепка, которая помогла бы в этом деле. Можно посмотреть, какой CSS класс или ID прописан в том или ином контейнере (он заключается в тег DIV). Кстати, в предыдущем примере я уже на это указал (будем искать файлы в документах PHP с ).
Теперь, когда зацепка есть, нужно как-то найти тот необходимый файл темы Вордпресс, при изменении которого добьемся необходимого нам результата. Рассуждаем следующим образом. За образование всех элементов темы в шапке блога обычно отвечает файл HEADER.PHP, поэтому ищем в его составе .
Если файл небольшой, как в моем случае, то не составит отыскать нужное место вручную. Если тема у вас сложная, то на помощь приходит опция «Поиск» бесплатного HTML и PHP редактора notepad ++, который способен отыскать нужный файл.
Для этого соединяемся по протоколу FTP с сервером с помощью вышеупомянутого редактора Нотпад и загружаем документ HEADER.PHP на компьютер. После этого выбираем из верхнего меню «Поиск»-«Найти» и в поле «Найти» вносим слово или словосочетание, по которому будем осуществлять поиск (напомню, для данного примера это ):
И через некоторое время поиск успешно заканчивается, NotePad plus plus выдает все строчки кода с искомым словом, выделив особым образом:
Теперь спокойно можно тут же должным образом изменить значение id (в нашем случае меняем "access" на "access1"). Сохраняем файл, после этого реальные изменения вступят в силу. Конечно, это простенький пример, гораздо чаще бывает так, что файлов с искомым словом наберется не один и не два, придется вносить несколько изменений.
В этом случае необходимо с помощью FTP клиента FileZilla (или аналогичного) загрузить на компьютер все файлы движка вашего сайта, затем также воспользоваться редактором NotePad++ для их поиска и редактирования. Но, думаю, принцип поиска необходимых файлов для их последующего изменения вы уловили.
Каким образом использовать Firebug для редактирования CSS стилей
Здесь все значительно проще, если сравнивать с редактированием HTML. Как я уже писал в начале статьи, выделенному в левой половине окна расширения Firebug куску гипертекстовой разметки соответствуют свойства CSS, которые находятся справа. Они определяют, как будет выглядеть этот участок в браузере. Для того чтобы вы поняли, как можно изменять стилевые свойства, подведите курсор мыши к какому-нибудь участку кода. Рядом тотчас появиться перечеркнутый кружок красного цвета:
Если кликнуть по нему левой кнопки мыши, то он поменяет цвет на серый, также вся строчка, которая описывает данное CSS правило, станет бледно-серой. Таким образом можно отключать то или иное свойство, естественно, изменения сразу отобразятся в браузере. Для включения применяем обратную операцию. Чтобы изменить значение того или иного элемента, также кликаете по нему левой кнопкой мыши:
Причем, обратите внимание, чуть выше расположена ссылка на документ, в котором нужно будет произвести изменения и даже указана строчка, где находится этот искомый элемент. Само собой разумеется, что перед редактированием вы увидите все его результаты в браузере Firefox.
Ну, вот, это, пожалуй, все, о чем я хотел сегодня рассказать. Надеюсь, что оказался полезен предоставленной информацией, описав подробно функциональные возможности такого полезного для вебмастера инструмента как расширение Firebug для браузера Firefox. Конечно, были рассмотрены не все опции этого плагина, а лишь те, которые я использую в своей работе с блогом.
Firebug – это многофункциональный плагин для браузера FireFox , который призван упростить процесс разработки и отладки web-страниц. Данное расширение позволяет в режиме реального времени инспектировать код страницы, выявлять в нем ошибки и тут же их исправлять.
Также плагин firebug предоставляет следующий функционал:
- Инспектор ( Inspect )– функция, предназначенная для быстрого обнаружения тега и просмотра всех « привязанных » к нему свойств и стилей;
- Возможность редактировать HTML -код и таблицы стилей CSS непосредственно в окне браузера. Можно вносить различные изменения в атрибуты тега и сразу же наблюдать результат. Это очень удобно для нахождения нужного оформления;
- Возможность отладки JavaScript ;
- Дополнительный функционал, который позволяет просмотреть процесс загрузки страницы.
Это далеко не полный список функций, которые представляет плагин для web-разработчиков. Помимо всего прочего были созданы дополнения к 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 . Этот инструмент предназначен для анализа загрузки веб-страницы. При правильном использовании полученных данных, можно повысить скорость загрузки сайта.
Результатом анализа является список советов по оптимизации обрабатываемой страницы, пример которого представлен на следующем скриншоте:
Выполнение данных рекомендаций значительно повысит скорость загрузки web -страниц. Красные кружки указывают на то, что соответствующие пункты оказывают большое влияние на скорость, а советы, помеченные желтыми треугольниками, не так важны для оптимизации.
Горячие клавиши firebug
Горячие клавиши ( быстрые клавиши ) ускоряют процесс работы в несколько раз. Ниже приведен список некоторых полезных горячих клавиш, действующих в плагине firebug :
Firebug для других браузеров
Чтобы установить firebug для chrome , нужно зайти в настройки браузера, выбрать вкладку « расширения », затем кликнуть на « еще расширения » и с помощью поиска найти плагин:
Установить плагин для opera можно на официальном сайте :
Firebug для safari и для IE можно найти на сайте . Нужно отметить, что версии для браузеров, отличных FireFox , имеют не полный функционал, а являются Lite -версиями плагина.
Firebug является прорывом в сфере web-конструирования. Это отличный инструмент, который дает возможность сделать работу верстальщика более приятной и увлекательной, а самое главное – более быстрой.
Также данный плагин является хорошим вспомогательным инструментом для тех, кто только начинает знакомиться с разработкой сайтов. Для большинства браузеров существует аналог firebug , так что вы можете познать его прелести, даже не используя Firefox .
Работа со стилями с помощью Firebug. Как пользоваться и где скачать Firebug для Firefox, Chrome и Opera
Расширение Firebug, как любое расширение служит для увеличения возможностей браузера. В данной статье я расскажу: где скачать Firebug для популярных браузеров Mozilla Firefox, Google Chrome и Opera, как его установить, а также постараюсь подробно описать, как пользоваться Firebug.
Изначально, плагин или расширение Firebug было создано группой разработчиком для Mozilla Firefox, поэтому в данном браузере расширение имеет самый мощный функционал.
Для остальных популярных интернет браузеров, таких как: Google Chrome, Opera и Internet Explorer, была разработана упрощенная версия — Firebug Lite, которая существенно уступает оригиналу, но тем не менее является вполне работоспособной.
Не зря авторы Firebug сравнили выход своего детища с эволюцией в веб-разработки, ведь это действительно так! Вы в этом сами сможете убедится, если дочитаете статью до конца.
С использованием дополнения, отпадает необходимость копаться в файлах шаблона, пытаясь определить какой class или id задан для определенного участка страницы.
В общем, работа с внешним видом сайта становится гораздо легче, быстрее и приятней. Поехали!
Где скачать и как установить расширение Firebug
Чтобы скачать расширение Firebug для Mozilla Firefox, необходимо открыть данный браузер и перейти по этой ссылке. Попадаем мы на страничку, где надо нажать на кнопку — «Добавить в Firefox»:
Затем откроется такое окошко:
Нажимаем на кнопку — «Установить сейчас» и начнется недолгий процесс установки. Если после перезагрузки браузера в верхнем правом углу появится значок с изображением жука, то значит Firebug успешно установился.
Установка на Chrome и Opera очень схожа и я думаю Вы разберетесь. Вот ссылочки на страницы для скачивания
Выше я уже писал, что в браузерах Google Chrome и Opera, расширение представлено в сокращенном виде и чтобы более полно описать функционал Firebug, я запущу его в браузере Mozilla Firefox.
Работа со стилями. Как пользоваться Firebug
Недавно мне пришло письмо от одного моего постоянного читателя, в котором он попросил меня помочь справится с «непослушной» формой подписки. Ну вот у меня теперь есть прекрасная возможность продемонстрировать работу Firebug и заодно помочь человеку.
Вот как на данный момент выглядит форма на блоге автора письма:
В браузере я нажимаю на значок жука и внизу страницы откроется «рабочая зона» расширения:
Далее, на панели управления выбираю иконку с изображением стрелочки (на скриншоте я ее обвел красным). C помощью этой функции можно выделить любой объект на странице и его код отобразится во вкладке — «HTML».
После нажатия на иконку, отвечающую за выделения, передвигаю курсор на край формы подписки и границы зоны очерчивается рамкой:
Ну вот и код формы подписки, с которым мне предстоит поработать. Чтобы закрепить выделенную область, надо щелкнуть, по появившейся рамке, левой клавишей мыши и тогда код формы должен подсветится синим фоном:
Итак, в любом шаблоне есть файл style.css и как правило все стили прописываются именно в этом файле, но бывают и исключения. В форме подписки от feedburner стили заложены в сам код и мне надо найти слово style (с англ — стиль), после которого прописаны селекторы и их значения, отвечающие за различные параметры:
Давайте разберем, что за селекторы заданы для данной формы.
Селектор border (с англ. — граница) выводит рамку вокруг формы, толщиной в 2px (два пикселя).
Значение solid (можно перевести, как сплошная линия) задает вид рамки, т.е. если задать другое значение, например: dashed (пунктирная линия), то рамка станет пунктирной.
Селектор padding (с англ. — набивка) отвечает за внутренние отступы, т.е. в данном случаи селектор задает расстояния в пикселях от самой формы до рамки.
Селектор text-align (с англ. — выравнивание текста) выравнивает текст, относительно страницы. Значение center (с англ. — центр) дает команду браузеру выравнивать данные элемент по центру страницы.
Конечно я не буду перечислять все селекторы, которые используются в CSS. Делаю я это, так сказать, для наглядности и облегчения восприятия. В будущем я обязательно выпущу бесплатный, для своих подписчиков , видеокурс по основам HTML и CSS.
Итак, с заданными стилями мы разобрались, теперь я буду приводить форму подписки в надлежащий вид.
Для этого я применю еще один селектор margin (с англ. — край), который отвечает за внешние отступы, т.е. расстояния от рамки до краев расположенных рядом элементов.
Видно, что форма растянута и с помощью внешних отступов можно сделать ее немного компактней.
Делаю двойной клик левой копкой мыши по нужному участку кода и теперь, прямо в рабочей зоне расширения Firebug, можно вносить изменения в уже существующие параметры или задавать новые:
В самый конец кода формы подписки я добавляю селектор margin и задам для него следующие значения:
Немного поясню, что за цифры я тут написал. Цифры — это расстояния внешних отступов в пикселях, начиная с верхнего и далее по часовой стрелки. Т.е. для верхнего и нижнего отступов — значение ноль, а для левого и правого, задано расстояние в 180 пикселей.
Если есть одинаковые значения, то их можно «склеить», тем самым немного сократив код:
Вот что в итоге должно получится:
И вот оно чудо! Форма подписки моментально приняла другой вид.
Все изменения внешнего вида сайта, сделанные с помощью расширения Firebug, для пользователей будут незаметны, и после обновления страницы исчезнут.
Если навести курсор на синий фон кода, то на странице подсветятся: внешние отступы — желтым цветом, внутренние — фиолетовым.
Другое дело! Только вот кнопочка «Подпишитесь» уж как-то сильно прижалась к полю ввода e-mail, надо ее немного опустить. Выделяю кнопку с помощью вышеописанных действий и вот ее код:
Но теперь, для наглядности, я пойду другим путем и воспользуюсь вкладкой «Редактировать», где задам следующие отступы для кнопки:
У меня получились одинаковые значения для правого и левого отступа и надо «склеить» нули:
Смотрим на результат:
Firebug не только с легкостью находить коды, отвечающие за то или иной участок веб-страницы, но и предоставляет возможность предосмотра будущих изменений.
Но что же делать, если стили прописаны в отдельном файле? Давайте разберем и эту ситуацию.
Теперь для примера я выбрал блок с хлебными крошками со своего блога. Выделяю его, и в правом окне рабочей зоны отобразятся стили, которые прописаны в файле style.css:
Итак, что мы видим. Мне открылись все стили, прописанные в файле style.css, для идентификатора breadcrumbs.
Допустим, я хочу изменить цвет текста, и размер шрифта. Для этого мне понадобиться внести изменения в значения для селекторов: color (с англ. — цвет) и font-size (с англ. — размер шрифта).
Делаю двойной клик по значению селектора и появляется поле для правки:
Хочу, чтобы текст, который не является ссылкой стал красным, а размер шрифта немного побольше. Вуаля:
Теперь мне не нравиться тени шрифта, надо их убрать. За тени отвечает селектор text-shadow (с англ. — тень текста). Навожу курсор на селектор и слева от него появляется красный значок:
Если кликнуть на этот значок, то селектор исчезнет и отменяться все его значения. Смотрим:
Тени, как не бывало! Следуя своим внезапным капризам, я решил сделать текст немного жирнее. Ага, а такого селектора здесь нет. Ну что же, придется его добавить.
За «жирность» текста в CSS отвечает селектор font-weight (с англ. — начертание шрифта).
Делаю двойной по символу «;» (можно кликать по любой строчке), который находится в конце каждой строки или по символу «>» и появится поле для ввода нового селектора и его значений:
Сначала, в появившемся поле, я прописываю сам селектор, потом нажимаю клавишу Tab и вписываю значение bold (с англ. — отчетливый):
Наверное Вы заметили, что Firebug показывает порядковый номер строки, начиная с которой в файле style.css прописаны стили для выделенного идентификатора или класса:
И если кликнуть по номеру, то в правом окне рабочей зоны, откроется файл style.css и стили для идентификатора, с которыми я работал, подсветятся голубоватым фоном.
Также для правки стилей можно пользоваться вкладкой CSS, где будет отображаться файл style.css целиком:
Если выделить объект и воспользоваться вкладкой «Маркет», расположенной в правом окне рабочей зоны, то мы увидим следующую картину:
Как Вы уже догадались, в этой вкладке наглядно демонстрируется размеры самого выделенного элемента (690х41 пикселей), а также: внутренние отступы (padding), рамка (border) и внешние отступы (margin).
Надо закруглятся, а то я так статью никогда не закончу. Надеюсь я доходчиво объяснил использовать Firebug для работы со стилями, но если какие-то моменты Вам остались непонятны, задавайте свои вопросы в комментариях и постараюсь точечно разобрать ситуацию.
P.S. Как видите, если немного знать английский язык, то изменение стилей окажется не таким уж и сложным занятием.
13 июля, одновременно с выходом новой версии Firefox, было объявлено о новой версии Firebug (установить) — наиболее продвинутого и признанного отладчика фронтенда. Вместе с тимлидом разработки Jan 'Honza' Odvarko (его блог и прочие статьи о Firebug, где немало интересного) рассмотрим его новые возможности. Это тем более интересно, потому что сам браузер потихоньку набирает силы в отладке, и куда деваться — конкурент Хром подгоняет и обгоняет, и теперь даже вполне достаточно штатных средств отладки — показ и хождение по DOM, например, в 10-й версии уже такое, что для исследования багов аддон Firebug ставить не обязательно, а в 15-й версии обещается отладчик JS, быстрый и не влияющий на производительность страницы, со средствами удалённой отладки (важно для мобильных устройств). По тому же пути идёт Опера. (--прим. перев.).
Позвольте рассказать о новых возможностях вышедшего релиза Firebug 1.10.
В первую очередь, уточним, к каким версиям Firefox относятся последние версии Firebug:
Firefox 5.0 – 13.0 работает с Firebug 1.9,
Firefox 13.0 – 16.0 работает с Firebug 1.10.
Firebug 1.10 — настоящий коллективный продукт, поэтому позвольте представить всех разработчиков:
Jan Odvarko Farshid Beheshti
Sebastian Zartner Leon Sorokin
Simon Lindholm Florent Fayolle
Harutyun Amirjanyan Vladimir Zhuravlev
Steven Roussey Hector Zhao
Joe Walker Bharath Thiruveedula
Stampolidis Anastasios Nathan Mische
Heather Arthur
Инсталляция без перезагрузки браузера
Установили, нажали F12 — и он готов к работе.
При обновлении с версии 1.9 браузер, всё же, придётся перезапустить.
Задержанная загрузка аддона
Теперь Firebug не тормозит браузер при запуске! Он включается, если только пользователь будет в нём нуждаться. Теперь его запускают только кнопка старта и команды меню.
Управление куками
Подсветка синтаксиса в многострочной консоли ввода
Её ещё называют «командный редактор» (Command editor) — теперь и там есть подсветка синтаксиса.
Автозавершение переменных
Автозавершение в Firebug ещё никогда не было таким продвинутым. Оно работает при редактировании CSS, при поиске переменных в Watch при трассировке, при поиске точек останова — любые числа, цвета, шрифты и т.д.. Попробуйте просто изменить вашу страницу через Firebug, и всё увидите сами.
На рисунке — при вводе символов в панель Watch автозавершение предлагает доступные переменные из текущего окружения Javascript (scope).
Трассировка стилей
Посмотрите на все места в вычисленных стилях, на которые повлияло определённое правило CSS, через меню HTML -> Computed на правой части панели. Она теперь содержит также подсказки цветов, рисунков и шрифтов.
Видите 3 места, в которых правило пытается установить размер шрифта? В одном месте это ему удалось. Синий текст справа — кликабелен, ведёт на описания правил. См. подробное описание (англ.). (Аплодисменты — информативность этой панели возрастает --прим.перев.)
Консольная команда help
Чтобы показать описания встроенных в командную строку команд Firebug (да-да, есть такие, пара десятков, рекомендую посмотреть --прим. перев.), наберите в консоли "help". Появится список команд с кратким описанием.
Зелёные имена команд — это ссылки на вики Firebug с подробностями и примерами.
Ссылка на описание веб-шрифтов в CSS
Чтобы сделать быстрый переход к описанию кастомных, пользовательских шрифтов, нужно щёлкнуть правой кнопкой мыши по имени шрифта, выбрать Inspect Declaration, и вы попадаете в панель "CSS", аккуратно на объявление шрифта, как показано на рисунке.
Поддержка запросов @ import
Медиа-запросы CSS @ import отображаются в панели "CSS" и их можно редактировать. Работает, конечно, и автозавершение строки, и управление стрелками. Например, я нажал на «400px», когда делал скриншот, а затем клавишу — стрелку вверх; получилось «401px».
Варианты показов Entities
В меню "HTML" появились 3 пункта, чтобы изменять формат представления Entities (описаний специальных символов).
Поддерживаются также entities MathML.
Отображение формата цвета
В 3 меню: "CSS", HTML -> Style и HTML -> Computed меняем формат просмотра цвета (Hex, RGB, HSL):
Подсказки к элементам меню
Мелочь, но полезная для ориентирования: к каждой строке меню появились подсказки.
Поддержка псевдокласса CSS ":focus"
Кроме давно существовавших псевдоклассов :hover и :active, в меню HTML -> Style появился :focus. Это помогает увидеть результат действия стилей без самого действия: не надо наводить на элемент, чтобы увидеть все применяемые к нему правила :hover. Не надо фокусироваться, чтобы увидеть все стили :focus для этого элемента в правом блоке в разделе (панели) "HTML". Крайне полезно, если с фокусированием одновременно захотим скопировать отдельные правила — ведь, кликнув по панели Firebug, мы теряем фокус или наведение в окне браузера.
Чтобы увидеть эти запросы, нужно, чтобы была установлена настройка Show BFCache Responses.
Удаление правил CSS Delete CSS Rule
Щелчок правой кнопкой мыши по правилу, ещё щелчок — и нет его… (А раньше надо было перещёлкивать по всем свойствам — прим. перев.)
Всего в этой версии сделано 79 исправлений из багтрекера. Следите за нашим твиттером, чтобы быть в курсе новостей.
Читайте также: