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

Но побудила написать этот пост просьба от автора блога SEO-Stories.ru разобраться, почему у него смайлики на блоге отображаются не так, как хотелось бы. Думаю, после прочтения этого поста Zusicks438 (уже совсем не подглядывая пишу ник) воскликнет: «Факин щит!» Хотя я намекал ему на этот инструмент. 😉

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

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

Если такое разделение не удобно, можно нажать на панели плагина красную кнопочку, которая несколько левее кнопки «Off». Тогда плагин будет работать в отдельном окне.

А дальше будут кнопки ещё веселее.

Нажимаем на кнопку, которую на картинке вам показывает красная стрелка, и водим мышкой по нашей странице, отладкой которой мы занимаемся, пока не найдём нужный нам элемент. Допустим, это заголовок поста. Элемент под курсором выделяется при этом синей рамочкой (оранжевая стрелка), а в окне огненного жука мы при этом видим HTML-код выделенного элемента (зелёная стрелка). Более того, в окошке справа ещё и все стили, которые влияют на отображение элемента (жёлтая стрелка). Те стили, которые перекрыты другими стилями, отображаются зачёркнутыми. Есть информация о том, какие стили написаны именно для этого элемента, а какие наследованы от объектов, в которые вложен наш элемент. Правила сопровождаются информацией об их местонахождении в файлах стилей, например: «style.css (строка 100)».

Уже видя это можно кричать: «Эврика!» Но мы на этом не остановимся, потому что я расскажу о том, как огненный жук позволяет проводить ещё и отладку, помимо анализа кода.

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

Вот я отключил цвет для посещённой ссылки, и нажал по тексту «1.2em» соседнего стиля. О, чудо! Текст превратился в поле для ввода, теперь я могу ввести своё значение высоты строки для элемента класса «cx» и тут же увидеть результат на странице. Можно экспериментировать как угодно, все изменения происходят локально, их видим только мы.

Если щёлкнуть по названию свойства стиля (например, по line-height), то можно также переписать его в нечто другое. Работает автоподстановка текста, что делает написание имён свойств быстрее.

Нажмём же теперь правой кнопкой мыши в окошке со стилями: в открывшемся меню есть возможность создать «Новое свойство...» — нет повода не сделать это. Создаём и тут же смотрим, как это повлияло на отображение элемента, ведь любые изменения тут же воспроизводятся на странице. Кстати, можно редактировать и HTML-код в соседнем фрейме (там, куда я зелёной стрелкой указывал).

Следующий интересный момент. Рядом со вкладкой «Стиль» есть вкладка «Макет». Переключимся туда и поводим мышкой в этой зоне.

Как видно на рисунке, мы можем видеть макет выбранного элемента (который мы выбрали, например, оранжевой стрелкой). Т.е. информацию о его размерах и отступах, заданных параметрами margin, padding, а также параметром padding того контейнера, в который вложен наш выбранный элемент (здесь это offset). Можно больше не ломать голову над тем, откуда взялся незапланированный отступ: смотрим макет и идём на соседнюю вкладку править нужный стиль.

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

Как скачать видео из контакта?

Кто как это делает, а мне в этом помогает огненный жук. Вот мне делать нечего стало, зашёл на страницу видео «Ольга Угарова » Видео » Розовый слон». Предварительно активировал панель жука, да перешёл на вкладку «Сеть».

Только нажал на «плэй» в окне видео, как в панели жука обнаружился элемент, выделяющийся своим размером (красный эллипс), да и циферки забегали с краю (зелёный эллипс) — знак того, что идёт загрузка элемента. Навёл на эту строчку курсор, тут ссылка и спалилась:

Осталось лишь правой кнопкой нажать и выбрать «Копировать адрес». Этот адрес вставляется в любой менеджер закачек. Если такого менеджера под рукой нет, то можно хоть в поле «Адрес:» любой папки Windows вбить — у меня при этом открылось окно, предлагающее сохранить файл.

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

Money всякие нужны, мани всякие важны. Случается, что нужно WMB обменять на WMR. Можно, конечно, воспользоваться встроенной в Webmoney Keeper системой обмена, но мы же опытные манимейкеры. Мы свои вебмани потом и кровью зарабатывали, нежели не потратим минуту времени на поиск более выгодного курса? А тут, к счастью, имеется система мониторинга обменных пунктов BestChange.ru. Что делать дальше — знаем.

А ещё случается, пользуешься услугами своего сотового оператора, потом зайдёшь к нему на сайт, и такое ощущение, что не пользовался совсем услугами, а просто звонил и sms-ки слал. Чтобы использовать прелести технического прогресса на все 100%, следует иногда посещать сайт своего оператора и знакомиться с полным перечнем услуг. Например, мтс услуги: у меня есть «Локатор», возможность сообщить всем «Мой новый номер», звонить родителям «За их счёт», получить пакеты MMS и SMS — а мог бы просто сидеть и ни о чём таком не подозревать.

А теперь, дорогой читатель, ставь плагин для FireFox Firebug и засыпай меня вопросами, начиная от «как поставить?» и заканчивая «что за глюк?» в комментариях. Ведь каждый комментарий добавляет популярности этой статье, так дерзай же! Только не дерзи. 🙂

Запись опубликована 16 августа 2010 года. Пост окончен, но в рубрике «Web-кодинг» есть не менее интересные посты:

Подписка на RSS канал блога RSS подписка (как это?) поможет вам не пропустить ничего интересного на этом блоге.