Firebug для браузера Firefox — где скачать, как установить и как пользоваться. Firebug для Firefox! Как пользоваться расширением Firebug
Доброго времени суток, уважаемые читатели сайт!
— один из самых полезных инструментов для веб-мастера. С его помощью можно решать множество задач, например, можно посмотреть структура сайта (исходник смотреть сложно, а с этой программой можно посмотреть структуру исходных элементов -какой элемент что выводит- сразу видно наглядно) или править веб-страницы прямо в реальном времени. Firebug для Firefox
позволяет прямо в браузере мы изменять (html, CSS и т.д.), и сразу смотреть результат наших действий, хотя реально сам код на сервере и не изменялся. Ещё проще: например, нужно изменить размер шрифта в заголовке поста. Используя Firebug, просто выделяем мышкой нужный нам текст, высвечивается соответствующий элемент и можно сразу вносить изменения в размер шрифта и сразу смотреть результат. Посмотрели, как выглядит веб-страница и потом уже вносим изменения в соответствующий код. Удобно? Не то слово!
Этот плагин, как дополнение есть в разных вариантах. Так его можно установить в браузер Chrome (как установить Хром, написано в статье , настроить и работать. Как установить этот плагин для chrome -читайте ), а можно и в рассмотрим этот вариант.
Как установить плагин firebug для firefox
Открываем Mozilla Firefox
(он естественно уже установлен на нашем компьютере), скачать firebug для firefox можно по
Нажимаем зеленую кнопку +Добавить в Firefox
.
Обратите внимание, что кнопка Установить не активна. Чтобы она стала активной — кликните мышкой по записи (указано стрелкой) и затем кликаем Установить.
Всё. приложение установлено. В правом верхнем углу видим серенького жучка.
А серенький потому, что он неактивный, т.е. не включён. Если расширение установили, то следующий раздел не читаем — смотрите как пользоваться.
________________________________________________________________________
Вариант, если браузер Firefox ещё НЕ УСТАНОВЛЕН
на компьютере
. Сначала закачиваем расширение Firebug с браузера Chrome, а затем устанавливаем сам Firefox.
Для начала заходим на сайт дополнений . Открывается страница загрузки.
Нажимаем кнопку Загрузить сейчас
. Открывается окно.
Хотите узнать больше про Фаефокс? нажмите соответствующую кнопку. Но мы нажмём ссылку всё равно загрузить
. Производится загрузка дополнения.
В левом нижнем углу браузера Firefox видим скачанный файл. Этот файл (цифры в названии могут отличаться, т.к. эта актуальная версия на момент написания статьи). Устанавливаем браузер Firefox и затем добавляем в него скачанное расширение Firebug.
——————————————————————————
Как пользоваться Firebug
Сначала его нужно активировать. Делается это так:
— кликнуть левой кнопкой мыши по иконке жучка в правом верхнем углу браузера: либо
— использовать горячие клавиши вызова F12
.
Открывается рабочая область (обведена красным).
Начинаем анализ сайта (пример сайт). Сначала нажимаем на значок в рабочей области (находится справа от жучка).
Теперь, если двигать мышью по сайту, то будут подсвечиваться области, а внизу будет выделен код, который и выводит эту область на веб-странице.
Пример использования плагина Firebug
Разберём конкретный пример -посмотрим код заголовка статьи и изменим его цвет в реальном времени. Открываем веб-страницу и видим статью названную Программа для чтения PDF- файлов - Stduviewer. Запустили программу (нажали F12) и подвели мышку к этому заголовку
В рабочей области внизу видим, что за вывод этого элемента отвечает код:
Программа для чтения PDF- файлов — Stduviewer
И в этой же рабочей области справа видим СSS:
A, a:link, a:visited, #sidebar a, #sidebar ul, .post-title, .page-title, .post-title a:link, .post-title a:visited, #slideshow .post-title a {
}
Видно, что заголовок статьи выводится с цветом #265076. Попробуем, а как будет смотреться заголовок с таким цветом #00FFFF? Для этого в рабочей области выделяем #265076 и вместо этого цвета прописываем #00FFFF и видим результат.
Цвет заголовка изменился. Но дело в том, что на сервере сам код не изменился и необходимо вручную ввести правку в код CSS.
Таким образом можно править любой элемент кода и смотреть результат правки. Стоит сказать, что возможности веб-отладчика намного превосходят описанные в статье — имеется огромное количество возможностей у этого расширения.
Доброго здоровья всем читателям моего блога! Давно хотел затронуть своим вниманием тему использования расширений на благо вебмастеров и вот, наконец, представляю описание функциональных возможностей одного из самых популярных , а именно, плагина Firebug
. К слову, если вы еще не сделали окончательный выбор в пользу какого-то web-обозревателя, возможно, материал о самых популярных браузерах () поможет вам в этом.
Должен признаться, что как инструмент для вебмастера мне больше по душе Google Chrome (), который мне кажется более быстрым и функциональным, да и при серфинге по сети я пользуюсь им. Хотя, возможно, немаловажное значение при выборе браузера для работы с сайтом имеет сила привычки.
Эта сила иногда идет вразрез с очевидными преимуществами, которые предоставляют нам альтернативные варианты, но в случае с плагином Firebug все было иначе, я сразу понял его значение как важнейшего инструмента для вебмастера.
Где скачать и как установить расширение Firebug для Firefox
И несмотря на то, что подобные этому плагину для инструменты есть сейчас и в других популярных браузерах (например, в или в ), Firebug остается для меня приоритетным, поскольку в некоторых аспектах более удобен и функционален. Чем же хорош данный плагин?
Прежде всего, он позволяет "на лету" находить и править необходимые элементы и кода. Особенно это полезно для начинающих вебмастеров, поскольку позволяет редактировать блоки страниц, даже не владея в должной степени языками гипертекстовой разметки (HTML) и каскадных таблиц стилей (CSS).
Теперь рассмотрим вопрос установки Firebug. Скачать плагин можно с официальной страницы , где вы сможете найти самую последнюю версию. Причем гораздо проще установить это расширение можно, пользуясь непосредственно Мазилой. В этом случае, если вы подведете курсор к ссылке на последнюю версию (именно ее и следует загружать), то справа от нее появится зеленая кнопка «+Добавить в Firefox». При нажатии на эту кнопку напрямую начнется установка. После этого необходимо перезагрузить браузер, чтобы активировать расширение.
Если вы используете любой другой веб-обозреватель, то справа появится кнопка «Загрузить сейчас» мышиного цвета, которую и следует нажать. После этого возникнет табличка с линками «Узнать больше о 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 с id="access").
Теперь, когда зацепка есть, нужно как-то найти тот необходимый файл темы Вордпресс, при изменении которого добьемся необходимого нам результата. Рассуждаем следующим образом. За образование всех элементов темы в шапке блога обычно отвечает файл HEADER.PHP, поэтому ищем в его составе id="access".
Если файл небольшой, как в моем случае, то не составит отыскать нужное место вручную. Если тема у вас сложная, то на помощь приходит опция «Поиск» , который способен отыскать нужный файл.
Для этого соединяемся по протоколу FTP с сервером с помощью вышеупомянутого редактора Нотпад и загружаем документ HEADER.PHP на компьютер. После этого выбираем из верхнего меню «Поиск»-«Найти» и в поле «Найти» вносим слово или словосочетание, по которому будем осуществлять поиск (напомню, для данного примера это id="access"):
И через некоторое время поиск успешно заканчивается, NotePad plus plus выдает все строчки кода с искомым словом, выделив особым образом:
Теперь спокойно можно тут же должным образом изменить значение id (в нашем случае меняем "access" на "access1"). Сохраняем файл, после этого реальные изменения вступят в силу. Конечно, это простенький пример, гораздо чаще бывает так, что файлов с искомым словом наберется не один и не два, придется вносить несколько изменений.
В этом случае необходимо с помощью (или аналогичного) загрузить на компьютер все файлы движка вашего сайта, затем также воспользоваться редактором NotePad++ для их поиска и редактирования. Но, думаю, принцип поиска необходимых файлов для их последующего изменения вы уловили.
Каким образом использовать Firebug для редактирования CSS стилей
Здесь все значительно проще, если сравнивать с редактированием HTML. Как я уже писал в начале статьи, выделенному в левой половине окна расширения Firebug куску гипертекстовой разметки соответствуют свойства CSS, которые находятся справа. Они определяют, как будет выглядеть этот участок в браузере. Для того чтобы вы поняли, как можно изменять стилевые свойства, подведите курсор мыши к какому-нибудь участку кода. Рядом тотчас появиться перечеркнутый кружок красного цвета:
Если кликнуть по нему левой кнопки мыши, то он поменяет цвет на серый, также вся строчка, которая описывает данное CSS правило, станет бледно-серой. Таким образом можно отключать то или иное свойство, естественно, изменения сразу отобразятся в браузере. Для включения применяем обратную операцию. Чтобы изменить значение того или иного элемента, также кликаете по нему левой кнопкой мыши:
Причем, обратите внимание, чуть выше расположена ссылка на документ, в котором нужно будет произвести изменения и даже указана строчка, где находится этот искомый элемент. Само собой разумеется, что перед редактированием вы увидите все его результаты в браузере Firefox.
Ну, вот, это, пожалуй, все, о чем я хотел сегодня рассказать. Надеюсь, что оказался полезен предоставленной информацией, описав подробно функциональные возможности такого полезного для вебмастера инструмента как расширение Firebug для браузера Firefox. Конечно, были рассмотрены не все опции этого плагина, а лишь те, которые я использую в своей работе с блогом.
Возможно, я не раз еще вернусь к этой теме в своих последующих публикациях. А, вы, уважаемые читатели, надеюсь, отметите мой труд, используя кнопки социальных сетей. Кроме того, призываю вас подписаться на свежие статьи, использовав для этого ниже расположенную форму.
Чтобы установить FireBug непосредственно в браузер, перейдите сюда , и нажмите кнопку "Загрузить". FireBug интегрируется в Firefox и предоставляет широкий выбор инструментов разработки, доступных вам «на кончике пальца». Вы можете редактировать, отлаживать и просто просматривать документы CSS, HTML, и JavaScript вживую на любой странице. Скачать и пользоваться расширением вы можете совершенно бесплатно.
Ключевые особенности и функции
- только удобным для вас способом…
Вы можете открыть FireBug в отдельном окне или в виде панели внизу браузера. FireBug предоставляет многофункциональный "точечный" контроль над сайтом;
- изучение и редактирование HTML документов.
FireBug позволяет легко находить HTML элементы, находящиеся в середине больших документов. Как только вы нашли то, что искали FireBug дает вам расширенную информацию об элементе и вы можете редактировать его вживую;
- отшлифовка CSS до идеала.
СSS таблицы FireBug дают вам всю информацию о стилях в вашей веб-странице, и если вас что-то не устраивает, вы можете это изменить и просмотреть эффект мгновенно;
- визуализация CSS измерений.
Если CSS блоки не становятся корректно, бывает сложно понять почему это происходит. Разрешите FireBug быть вашими глазами, и он измерит и отобразит все смещения, отступы, границы, заполнения, и все размеры;
- монитор сетевой активности.
Ваши страницы долго грузятся, но почему? Написали очень много скриптов? Забыли сжать изображения и они много весят? FireBug поможет разобраться и исправить все эти проблемы;
- отладка JavaScript.
FireBug содержит мощный отладчик для JavaScript, который позволить остановить выполнение в любой момент, разобраться и отшлифовать скрипт. Если вы чувствуете что ваш код медленный, воспользуйтесь профилировщиком JavaScript для измерения производительности и найдите слабые места;
- быстрый поиск ошибок.
Когда что-то идет не так, FireBug сообщит об этом немедленно и даст максимум информации об ошибках в коде JavaScript, CSS, и XML;
- исследование DOM.
Document Object Model – это большая иерархия объектов и функций, которые ждут своего использования скриптами Java. FireBug поможет быстро найти нужные объекты DOM и потом отредактировать их «на лету»;
- выполнение JavaScript «на лету».
Командная строка – это один из самых старых инструментов в пакете FireBug, однако есть и такая возможность;
- логирование информации JavaScript.
Иметь хороший отладчик для JavaScript это безусловно хорошо, но иногда самый быстрый способ для поиска проблем – это сбрасывание в консоль как можно больше информации. FireBug дает вам набор мощных функций логирования, которые помогаю найти решения проблем.
Здравствуйте, уважаемые читатели! Сегодня речь пойдет об очень важном инструменте верстальщика — бесплатном дополнении . Лозунг на сайте разработчиков гласит — «Эволюция 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
Теперь рассмотрим пример из практики. На моем блоге есть статья, посвященная плагину . В ней рассказывается, как вывести форум на отдельной странице. Ради удобства для нее создается отдельный шаблон, в котором удаляется сайдбар. Подразумевается, что форум займет всю ширину страницу.
Проблема заключается в том, что во многих ширина блока под контент фиксирована. Удаление сайдбара не приводит к тому, что форум расползается на всю страницу, на месте сайдбара остается просто пустое место. Чтобы исправить это, нужно найти и отредактировать стиль элемента, отвечающего за вывод содержания страницы.
Ко мне время от времени обращаются люди за помощью. Благодаря 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. Изучить их несложно, нужно только захотеть. Если вы ведете блог или сайт, то рано или поздно эти знания вам понадобятся. Лично я получил их из за авторством Влада Мержевича. Конечно, этот мануал не сделает из вас профессионального верстальщика, но базовые знания вы точно получите.
На этом на сегодня все. Спасибо а внимание и до новых встреч.
В этом уроке мы с вами рассмотрим шикарное дополнение Firebug
для Firefox
необходимое для вебмастера. Оно поможет найти и исправить нужное место в коде Html, а также найти и отредактировать стили CSS. При этом весь процесс поиска и исправления увеличивается в разы. Все это может расширение для Firefox под названием Firebug. Давайте рассмотрим его поподробнее.
Установка Firebug для Firefox
Установить его можно с сайта разработчика http://firebug.ru/ . Все делается просто. Справа мы видим кнопку «Установить Firebug».
Жмем ее и нас отправляют на страницу addons.mozilla.org.
Так же его можно увидеть, если перейти в меню «Инструменты – Дополнения – Расширения» в Firefox.
Firebug
- не просто дополнение к браузеру расширяющее его возможности, а как вы прочитали на сайте разработчика Firebug – это эволюция web-разработки
. И это действительно так.
Как использовать Firebug для Firefox
Что бы запустить плагин Firebug достаточно щелкнуть правой кнопкой мыши на интересующем нас фрагменте сайта и в выпадающем меню нажать на «инспектировать элемент с помощью Firebug»
После этого внизу страницы откроется окно плагина Firebug с кодом Html отвечающим именно за этот участок сайта. Сам же участок сайта подсвечивается синим как на фото внизу. Шикарно правда?. Но это еще не все его возможности.
Вы можете вносить изменения в код Html, а результат увидеть сразу. При этом необходимо отметить, что изменения будут видны только до тех пор пока открыто окно Firebug, то есть сам ресурс на сайте он не затрагивает. Таким же способом можете поэкспериментировать и с файлом CSS. Изменить цвет шрифта или его размер, ну т.д. Об этом расскажу чуть ниже более подробнее.
Итак, вы определили, какой участок кода вам нужен и требуется его изменить не только визуально но и физически. Но как это сделать? Для начала, необходимо определить в каком файле PHP Joomla 2.5 его искать. Тут нам Firebug не помощник, но он нам подскажет за что можно зацепиться при поиске.
Рекомендую использовать ID или CSS класс в контейнерах. Контейнер это то, что заключено в теги DIV. Как производить поиск, рассказано в разделе Поиск по файлам в Тотал Командере
. Не все сразу будет получаться. Однако «единой таблетки» тут нет. Как правило, вам придется править код в шаблоне Джумлы. У разных разработчиков шаблонов свои правила по наименованию CSS классов и ID.
Использование Firebug для правки CSS
Как уже обратили внимание в правом окне плагина описаны стили CSS отвечающие за оформление Html блока изучаемого блока. Как уже говорил выше с ними можно также экспериментировать без ущерба для сайта, так как все изменения исчезнут после того как вы закроете Firebug. При наведении курсора на правило CSS появится серый перечеркнутый кружок. Щелкнув мышкой вы отключаете это правило и при этом изменения будут сразу видны на сайте.
Можете вводить свои значения и отслеживать как это выглядит. Это очень важно при редактировании шаблона Joomla 2.5 так как уверен, что не все в этом шаблоне будет устраивать вас.
И так, подобрали нужное значение и визуально все устраивает, но где теперь искать нужный нам файл или файлы CSS.
Тут все намного проще. Тут указано название файла CSS и строка, где это правило находится.
Если вы не помните где находится в шаблоне этот файл или их может быть несколько, то путь к нему можно узнать щелкнув провой кнопкой мыши на названии файла и открыть его в новой вкладке браузера и там посмотреть путь к нему.
Измерение скорости загрузки сайта с помощью Firebug
Скорость загрузки сайта очень важный фактор. Можно проверить этот показатель и на сторонних сервисах в интернете но можно проверить и с помощью плагина Firebug для Firefox
.
Жмем кнопку «Сеть» в окне плагина и обновляем (F5) нашу открытую страницу и видим результат. Далее работаем с особо тормозными элементами.
И на последок хочу отметить что данный плагин может работать с сайтом как на хостинге, так и расположенном на локальном сервере Денвер (Denwer)
.
Удачи Вам в ваших начинаниях.
Похожие публикации