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

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

Рис. 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.