Инструментарий разработчика в IE

Для демонстрации инструментов для разработки и отладки сайтов в IE 9 специально был создан сайт с помощью Expression Studio Web 4 и добавлен JavaScript код простого калькулятора:

увеличить изображение
Рис. 18.1.

Запустим сайт в IE 9, и вызовем с помощью клавиши F12 или из меню "Средства разработчика":

Рис. 18.2.

После чего откроется инструментарий для разработки и отладки веб-сайтов:

увеличить изображение
Рис. 18.3.

Отладка CSS средствами IE9

Рассмотрим закладки для работы с CSS:

Рис. 18.4.

Закладка "HTML"

В закладке HTML можно просматривать разметку веб-страниц, выбирать отдельные элементы и просматривать значения их атрибутов, проверять, как изменение значения атрибута повлияет на визуализацию страницы, а также определять, как к отдельным элементам применяются правила CSS.

Для выборки нужно элемента сайта используем специальную кнопку или сочетание клавиш CTRL+B:

Рис. 18.5.

Выберем заголовок и щелкнем на нем правой кнопкой мыши:

Рис. 18.6.

В результате, станет активным выбранный нами элемент:

увеличить изображение
Рис. 18.7.

В левой колонке можно изменять содержимое сайта. В качестве примера изменим текст заголовка с "Heading 2" на "Заголовок сайта":

увеличить изображение
Рис. 18.8.

Примечание: Изменения будут отображаться только в текущем окне браузера.

Рассмотрим четыре закладки:

Рис. 18.9.

1.В закладке "Стиль" отображаются стили, сгруппированные по принципу наследования:

Рис. 18.10.

2.В закладке "Отслеживать стили" отображается аналогичная предыдущему пункту информация, но только информация группируется по свойствам CSS:

Рис. 18.11.

В данной закладке так же можно менять значения CSS свойств или отключать свойства, в качестве примера изменим свойство цвет ( color ) для тега <h2> с темно-красного на зеленый:

увеличить изображение
Рис. 18.12.

Свойства можно менять для любого элемента сайта.

1.В закладке "Раскладка" можно просмотреть информацию о позиционировании выделенного элемента:

Рис. 18.13.

• Значение смещений, то есть расстояния между выбранным элементом и его родительскими элементами. Смещения представлены свойствами offsetLeft и offsetTop.
• Значение величин Margin, Border и Padding, которые соответствуют значениям, установленным на веб-странице.
• Значение высоты и ширины элемента, которые определяются свойствами offsetHeight и offsetWidth.

2.В закладке "Атрибут" можно посматривать атрибуты тегов, а так же добавлять и изменять существующие значения атрибутов:

увеличить изображение
Рис. 18.14.