Возможно ли отладить CSS?

Question

Я новичок в CSS. Есть ли инструмент, который может помочь отладить стили CSS, примененные к веб-странице.

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

Answer 1

По браузеру:

• Firefox есть подключаемый модуль под названием Firebug. Он прост в установке и очень мощный. Это даже лучше, когда в сочетании с «Веб-разработчик» для Firefox.

• Internet Explorer имеет панель инструментов разработчика, которая не так хороша, как Firebug, но достаточно хороша для проверки того, что все еще работает в IE. Дополнительно есть инструмент под названием IE DOM inspector. Существует также версия Firebug для IE, называемая Firebug Lite.

• Google Chrome поставляется со встроенными инструментами, похожими на Firebug. Смотрите опцию «tools-> developer» в выпадающем меню справа от адресной строки. Это позволяет вам видеть правила CSS, используемые каждым элементом. Он также имеет поддержку отладки Javascript.

• Safari использует инструмент под названием Web Inspector.

• Opera имеет встроенную утилиту под названием Dragonfly.

Answer 2

Вы используете Firebug в Firefox, что значительно упрощает отладку.

Answer 3

И встроенный DragonFly в Opera.

Answer 4

Если вы не используете Firefox, теперь вы можете получить Firebug Lite , который вы можете использовать в IE и т. Д.

Answer 5

Вы можете использовать плагин Firebug для Firefox. Это очень полезно для CSS. Вы можете динамически включать и выключать стили и поля из стилей. Это здорово.

Answer 6

Инструменты веб-разработчика, такие как Веб-инспектор Safari или Firebug для Firefox , могут помочь вам отладить ваш CSS. Эти инструменты могут показать вам каскад правил, примененный к определенному элементу, и позволить вам изменять или отключать определенные свойства.

Answer 7

Теперь вы можете использовать мой недавно выпущенный инструмент для этого в большинстве современных браузеров!

HTML Box Visualizer - GitHub

Answer 8

При необходимости отладки IE - конкретные проблемы. Я слышал, что люди говорят, что IE DOM инспектор не так уж плохо Вы также можете попробовать инструменты, описанные в этом посте .

Answer 9

Используйте Firefox, чтобы сначала разработать и протестировать ваш CSS, а затем переключиться на другие браузеры, чтобы протестировать ваш код. Это общепринятый метод ИМХО. Firebug великолепен, но он работает еще лучше, если объединить его с плагином Web Developer для FF.

Существует отличный сайт , который стоит посетить, с большим количеством информации о разработке CSS и HTML.