Инструменты отладки CSS в Internet Explorer

Question

Существуют ли другие инструменты, кроме Firebug Lite, которые могут помочь проникнуть в заблуждение маленького Internet Explorer и точно определить, где и почему он так плохо работает с моим CSS?

Firebug Lite - это, конечно, полезный инструмент, но в нем, похоже, отсутствует важнейшая функция (присутствует в «полноценном» плагине Firebug), которая позволяет вам увидеть, какие части каких объявлений игнорируются в пользу других объявлений.

Например, используя Firefox с Firebug, я вижу, что .foo {color: red} переопределяется на .bar {color: blue} позже в таблице стилей.

Но Firebug lite, кажется, только показывает окончательный, рассчитанный стиль - я не могу сказать, какие объявления игнорируются, которые переопределяются, которые вообще не поддерживаются и которые просто глючат.

Есть ли другой инструмент, который может быть полезен здесь?

Answer 1

Я использую IE8 Developer Tools (входит в комплект поставки), он может отображать стиль трассировки.

IE7 имеет также поставляемую Microsoft надстройку под названием IE Dev Toolbar . Не использовал это широко хотя.

Какую версию IE вы используете?

Answer 2

Да. В IE8 ударил F12. В предыдущих версиях установите this .

Answer 3

Я обнаружил, что jQuery помогает выяснить, что происходит, так сказать, "под капотом". Например, недавно у меня возникла ситуация, когда я обнаружил, что не могу доверять инструментам разработчика, которые поставляются с IE 8 (который, кстати, я работал в IE 7, стандарты, а не причуды, режим совместимости. Некоторые свойства CSS объявлены в таблица стилей не отображалась как вычисленная, в дополнение к другим странным особенностям IE, с которыми я сталкивался. Итак, я просто бросил некоторый javascript на страницу, включая jQuery, который позволил бы мне напечатать некоторый код и проверить его, не полагаясь на Инструменты разработчика IE, Firebug или веб-инспектор в Safari. Вы можете оценить такие утверждения, как:

$('body').css('background-image');

, который может вернуть:

'/images/default_background.png'

или что угодно.

YMMV, но стоит попробовать.

Answer 4

Инструменты разработчика, включенные в IE8, работают довольно хорошо.

Answer 5

Я не знаю, есть ли у него возможность проверять определенные переопределения CSS, но я бы запустил Панель инструментов Internet Explorer Developer

Answer 6

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

Визуализатор HTML Box - GitHub

Answer 7

Еще одна строка - Debug . Работает в IE 7 или 8; и похоже на Firebug