Отладка CSS. Расширения для Firefox "Firebug", "View formatted Source" и "Web Developer"

Главные вкладки

Аватар пользователя Ромка Ромка 23 сентября 2007 в 1:16

В сложных CMS, работу над которыми ведут одновременно несколько программистов, часто возникают ситуации, когда на странице одновременно подключено несколько CSS-файлов. В таких случаях иногда сложно определить почему тот или иной блок выглядит не так как это было задумано и возникает необходимость в отладке CSS. Для решения этой задачи было написано расширение "View formatted source" для браузера Firefox, с помощью которого можно увидеть какие классы и из каких CSS-файлов влияют на тот или иной блок кода.

Расширение из разряда must have для любого веб-разработчика.

Upd:

Спасибо всем тем, кто отметился в этом топике, благодаря вам я для себя открыл две более достойные альтернативы расширению "View formatted source".

Расширение Firebug работает примерно также как и VFS – позволяет увидеть исходный код страницы и посмотреть какие стили действуют на какой объект на странице, но кроме того расширение показывает какие стили были перекрыты. Также у этого расширения есть очень удобный режим "fastest", который включается нажатием кнопки F12 на клавиатуре и кнопки "Inspect", на появившемся тулбаре. В этом режиме расширение по наведению курсора на тот или иной объект показывает все примененные к нему стили.

Расширение Web Developer предназначено в большей степени не для отладки CSS, по этому в этой области, имхо, уступает двум предыдущим примерам, но зато обладает рядом удобных инструментов для экспериментов со страницей, по этому тоже мастхэв для каждого веб девелопера:))

Кросспост в моем блоге.

Комментарии

Аватар пользователя igdrasil@drupal.org igdrasil@drupal.org 23 сентября 2007 в 9:25

FireBug гораздо удобнее, видно какой стиль где определен, в каком файле последний раз переопределено свойство, и в каких оно вообще задано...

Аватар пользователя vadbars@drupal.org vadbars@drupal.org 23 сентября 2007 в 9:53

FireBug, действительно, более функционален, но у VFS тоже есть своя "ниша" - я оставил его для просмотра исходников страницы в структурированном и расцвеченном виде.
А вот inline-mode у меня почему-то включить не получилось. Или там есть какая-то фишка?
И еще вопрос к тем, кто пользовался VFS. Когда сворачиваешь фрагмент ("плюсы"-"минусы"), то справа появляется строка ввода. Это временные комментарии или что-то еще?

Аватар пользователя Gedler Gedler 23 сентября 2007 в 10:26

да, строка ввода - временные коментарии.
было бы очень удобно если бы они подсвечивались поярче и не исчезали при раскрытии блока, так же недостатком является длина поля - она неоправданно мала, а в целом задумка хорошая.
inline-mode - глючит.
периодически ввергает лису в ступор.

Аватар пользователя Ромка Ромка 23 сентября 2007 в 10:18

Ух ты, здорово! Я вообще до вчерашнего вечера не знал о существовании подобного рода плагинов/расширений, потому и решил найти программу или плагин для себя и первым делом наткнулся на VFS. На Друпал.ру, кстати, поискал решение вопроса и ничего не нашел, потому и запостил то, что сумел найти. Сейчас посмотрел на Firebug и WebDeveloper– шикарные штуки. Сейчас поправлю первый пост, ибо эти два расширения еще более мастхэвнее Smile

Аватар пользователя Gedler Gedler 23 сентября 2007 в 10:53

когда после рекомендации PVasili установил себе Firebug - то уровень эндорфинов просто зашкалило.
от удобства башню сносит при первом же знакомстве с модулем. )

Аватар пользователя Ромка Ромка 23 сентября 2007 в 10:48

Завидую, все удовольствие у вас впереди! Smile На drupal.ru много упоминали FireBug

Эх, знал бы что искать, не было бы такой ситуации Lol Я искал фразы "отладка CSS" или просто "CSS" и по этим запросам ничего не нашел... Может стоит создать на сайте раздел "Джентельменский набор Друпал-разработчика", в котором разместить информацию о самых полезных и часто используемых модулях Друпала, а также об инструментах типа Firebug?

Аватар пользователя Ромка Ромка 23 сентября 2007 в 11:01

когда после рекомендации PVasili установил себе Firebug - то уровень эндорфинов просто зашкалило.

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

Аватар пользователя vadbars@drupal.org vadbars@drupal.org 23 сентября 2007 в 11:36

Да, к хорошему быстро привыкаешь. Чтобы не бегать по браузерам, я пользую дополнение IETab для FF. Можно одним щелчком посмотреть, как страница будет видна в IE, не вылезая из FF. Жаль, что нельзя посмотреть "вживую" после изменений в FireBug, да и просмотр "как в Опере?" не помешал бы. Мечты, мечты..

Аватар пользователя PVasili PVasili 23 сентября 2007 в 11:53

Что-то было. Не такое, правда функциональное... Просто, я уже забыл где осел у меня :). Лежат в папке 5 версий чисто для тестирования.

Аватар пользователя PVasili PVasili 20 ноября 2007 в 10:49

Только в сравнении с FB он мягко говоря никакой... Для Oper-ы тоже есть подобное, название не вспомню с ходу только.

Аватар пользователя igdrasil@drupal.org igdrasil@drupal.org 28 сентября 2007 в 10:18

Оказывается, на сайте firebug есть его js-версия, которая работает и под IE, Opera и т.д.
фиговая эта версия, в ней только консоль есть, как не самый удобный отладчик для скриптов еще годится, а больше ни на что