Инструментарий разработчика в 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)

В качестве примера изменим размер шрифта в теге div и установим различные шрифты для заголовка и текста.

Для начала выберем тег div и добавим атрибут font-size со значение 20pt.

В результате в окне браузера отобразиться:

(рис 18.15)

Теперь, выберем "Заголовок сайта" и добавим атрибут font-family со значение Impact.В браузере отобразиться заголовок с измененным шрифтом:

(рис 18.16)

И в заключении изменим шрифт текста. Выберем текст и добавим ему атрибут font-family со значением fantasy. В браузере отобразится текст с измененным шрифтом:

(рис 18.17)

Закладка "CSS"

(рис 18.18)

Закладка CSS полностью отвечает за работу с CSS. Здесь можно выбрать все подключенные файлы с CSS:

(рис 18.19)

И после выбора файла редактировать, добавлять, удалять или отключать атрибуты или правила:

(рис 18.20)

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

Рассмотрим две закладки, которые позволяют работать с JavaScript кодом:

(рис 18.21)

Закладка "Консоль"

Это закладка в которой можно запускать пользовательский JavaScript код. К примеру введем "alert ("Hello World");" и нажмем клавишу "Enter":

(рис 18.22)

Можно так же использовать многострочный режим:

(рис 18.23)

Закладка "Сценарий"

(рис 18.24)

В закладке "Сценарий" осуществляется отлаживание JavaScript кода веб-страницы. Поставим точку остановки ( Break Point ) в 15 строчке:

(рис 18.25)

Нажмем на кнопку "Начать отладку":

(рис 18.26)

Введем в калькулятор значения и нажмем кнопку "Рассчитать":

(рис 18.27)

После чего запустится пошаговая отладка JavaScript сценария с точки остановки ( Break Point ):

(рис 18.28)

Прохождение по коду программы осуществляется с помощью кнопок или соотвестующих им горячих клавиш:

(рис 18.29)

Теперь подробнее рассмотрим пять закладок:

(рис 18.30)

1. Закладка "Консоль" аналогична по функциям другой закладки описанной ранее и позволяет запускать пользовательский JavaScript код:

(рис 18.31)

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

(рис 18.32)

3. В закладе "Локальные" можно просмотреть значения всех локальных переменных страницы:

(рис 18.33)

4. В закладке "Стек вызовов" можно просмотреть порядок выполнения всех событий. В нашем случае сначала произошло событие onclick (при нажатии на кнопку "Рассчитать" ) и после произошел вызов функции calculator:

(рис 18.34)

5. В закладке "Точки остановки" можно просмотреть сведения обо всех точках остановки ( Break point ):

(рис 18.35)

Закладка "Профили"

Этот режим позволяет собрать информацию о временных характеристиках работы веб-узла, которая собирается по мере визуализации страниц веб-узла обозревателем Internet Explorer 9. Данная информация помогает оптимизировать участки кода, на исполнение которых уходит слишком много времени.

Запустим создание профилей. Для этого нажмем на кнопку "Запуск создания профилей":

(рис 18.36)

В калькуляторе введем "число 1" с помощью клавиатуры, а "число 2" с помощью кнопок калькулятора:

(рис 18.37)

После чего остановим создания профилей. Результат будет следующий:

(рис 18.38)

Обратите внимание на счетчик функции onclick и onkeyup ( onclick счетчик 3 т.к число трехзначное вводилось с помощью мыши и onkeyup счетчик 2 т.к число двухзначное и вводилось с помощью клавиатуры).

Можно так же перейти на номер строки, где возникло данное событие. К примеру, событие onclick происходило в 63 строчке кода:

(рис 18.39)

Закладка "Сеть"

Закладка "Сеть" позволяет просмотреть информацию о том, как загружается страница и какие ресурсы она использует.

Нажмем на кнопку "Начать сбор":

(рис 18.40)

Обновим страницу:

(рис 18.41)

Результатом будет таблица с различной информацией ( URL -адрес ресурсов, используемый метод и т.д):

(рис 18.42)

Страницы:

(рис 18.1)

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

(рис 18.2)

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

(рис 18.3)