Отладка сценариев с помощью средств разработчика

В состав средств разработчика Internet Explorer 8 входит встроенный упрощенный отладчик Microsoft JScript, который позволяет разработчикам устанавливать точки останова и пошагово исполнять код JScript на стороне клиента, не выходя из браузера. В этом документе кратко описаны функции высокого уровня из отладчика JScript. Ознакомительную информацию о других возможностях средств разработчика в Internet Explorer 8 см. в статье Знакомство со средствами разработчика в Internet Explorer 8; полный справочник по командам интерфейса средств разработчика см. в статье Справочник по пользовательскому интерфейсу средств разработчика.

• Введение
• Начало отладки
• Установка точек останова
• Управление выполнением
• Проверка значений переменных
• Проверка стека вызовов
• Использование консоли для выполнения операторов кода
• Использование консоли для ведения журнала предупреждений и сообщений об ошибках
• Замечания
• См. также

Введение

Отладка JScript — это важнейший этап в разработке веб-приложений. Благодаря интуитивно понятному упрощенному отладчику JScript средства разработчика позволяют существенно упростить весь процесс отладки JScript. Установив Internet Explorer 8, разработчики могут отлаживать JScript на любом сайте, загруженном в Internet Explorer.

Чтобы открыть средства разработчика в Internet Explorer 8, нажмите клавишу F12 либо щелкните кнопку "Средства разработчика" на панели команд "Сервис".

Примечание. Несмотря на то что отладчик JScript можно использовать для отладки любой подсистемы с реализацией интерфейсов IActiveScriptSite (аналогично Microsoft Visual Basic Scripting Edition (VBScript)), поддерживается только отладка JScript.

Начало отладки

Рис. 1. Пользовательский интерфейс вкладки "Сценарий"

С помощью средств разработчика на вкладке "Сценарий" начните процесс отладки нажатием кнопки "Начать отладку" или клавиши F5. При нажатии этой кнопки инициируются следующие события:

• В диалоговом окне "Для отладки требуется обновление веб-страницы" вам предоставляется возможность обновить страницу. Если нажать кнопку "ОК", начнется отладка и обновится страница; если нажать кнопку "Отмена", отладка не начнется и страница не обновится.
• Если окно средств разработчика закреплено за экземпляром Internet Explorer 8, то сразу после начала отладки это закрепление снимается. По окончании отладки окно снова можно закрепить за экземпляром Internet Explorer 8.

Чтобы остановить отладку, нажмите кнопку "Остановить отладку" или сочетание клавиш SHIFT+F5.

Примечание. Диалоговое окно "Для отладки требуется обновление веб-страницы" появляется только в том случае, если не включена отладка сценариев для Internet Explorer. При нажатии в диалоговом окне кнопки "ОК" отладка сценариев для данного экземпляра Internet Explorer временно отключается и остается отключенной до тех пор, пока окно не закроется. Чтобы включить отладку сценариев для всех экземпляров Internet Explorer, в меню "Свойства обозревателя" перейдите на вкладку "Дополнительно". Затем в категории "Обзор" снимите флажок "Отключить отладку сценариев (Internet Explorer)" и нажмите кнопку "ОК". Чтобы изменения вступили в силу, закройте все экземпляры Internet Explorer, а потом откройте их снова.

Примечание. Все сценарии на странице, расположенные как в отдельных файлах, так и во встроенных блоках, доступны в раскрывающемся списке сценариев независимо от того, начата отладка или нет. Переключение между этими файлами возможно в любое время на вкладке режима "Сценарий". Источник выбранного файла отображается в основной области содержимого.

Установка точек останова

Из области основного содержимого, в которой отображается код сценария, можно установить точки останова одним из следующих способов:

• Щелкнуть номер строки, чтобы вставить или удалить точку останова.
• Щелкнуть правой кнопкой мыши строку кода и выбрать команду "Вставить точку останова".
• Поместить курсор на строку кода и нажать клавишу F9, чтобы вставить или удалить точку останова.

Точки останова можно устанавливать независимо от того, запущен отладчик или нет. Как только точка останова установлена, рядом с номером строки кода появляется значок точки останова и код в этой строке выделяется.

Точка останова позволяет приостановить выполнение сценария непосредственно перед строкой, на которой установлена эта точка, при этом в отладчике выделяется следующая строка, которую нужно выполнить. Во время отладки любая ошибка выполнения приводит к тому, что отладчик останавливается в месте возникновения ошибки. Чтобы предотвратить остановку выполнения при ошибке, отмените выбор переключателя "Остановка при ошибке" или нажмите сочетание клавиш CTRL+SHIFT+E. Когда выполнение приостановлено отладчиком, браузер не реагирует на пользовательский ввод.

Рис. 2. Установка точек останова и управление ими

На вкладке "Точки останова" в отладчике отображается список всех доступных точек останова. Здесь можно посмотреть расположение всех точек останова, а также имя файла и номер строки, на которой установлена точка останова. Чтобы перейти к месту расположения точки останова в исходном коде, дважды щелкните точку останова в списке. Чтобы отключить точку останова, не удаляя ее, снимите флажок рядом с точкой останова. Чтобы удалить точку останова, щелкните ее правой кнопкой и в контекстном меню выберите команду "Удалить". Информация о точках останова сохраняется в Internet Explorer до тех пор, пока не будут закрыты средства разработчика, даже если вы переходите со страницы текущего веб-сайта.

Примечание. Во многих сценариях точка останова может стать недействительной. Недействительная точка останова отключается, и над значком точки останова появляется значок предупреждения. Точка останова становится недействительной, если вы уходите с веб-сайта, на котором она установлена. Она может стать недействительной, если устанавливается в неправильном месте в режиме, отличном от режима отладки, или процесс отладки начинается там, где отладчик не находит соответствующий код. Она может также стать недействительной, если обновляется страница, на которой она установлена, и при этом изменяется исходный код.

Когда установлена точка останова, выполнение приостанавливается в этой точке всякий раз, когда она встречается. Если требуется приостановить выполнение в точке останова только при соблюдении определенного условия, задайте условие для этой точки останова. Чтобы задать условие точки останова, сделайте следующее:

1. Щелкните правой кнопкой мыши точку останова в основной области содержимого или в области "Точки останова". Появится контекстное меню.
2. Выберите команду "Условие...". Откроется диалоговое окно.
3. В диалоговом окне "Условная точка останова" введите условие и нажмите кнопку "ОК".

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

Управление выполнением

С помощью точек останова приостанавливается выполнение сценария, чтобы можно было проверить состояние кодов в этой точке. Когда выполнение остановлено в точке останова, вы можете проверить ход выполнения с помощью любой из следующих кнопок:

• Продолжить

  Продолжить выполнение сценария без приостановки, пока не встретится другая точка останова или ошибка сценария. Назначенная клавиша: F5.

• Приостановить все

  Приостановить выполнение непосредственно перед выполнением следующего оператора сценария. Щелкните кнопку или нажмите сочетание клавиш CTRL+SHIFT+B для активации этой команды, затем выполните необходимые действия по отладке.

• Остановка при ошибке

  Приостановить выполнение в точке, где произошла ошибка. Эта команда активна по умолчанию. Если вы не хотите, чтобы выполнение приостанавливалось в точках возникновения ошибок, нажмите эту кнопку, чтобы отключить команду; однако в любом случае для каждой возникающей ошибки на консоли будет появляться сообщение об ошибке. Сочетание клавиш для включения/отключения команды: CTRL+SHIFT+E.

• Шаг с заходом

  Выполнить следующую строку сценария и приостановить выполнение, даже если следующая строка находится внутри нового метода. Назначенная клавиша: F11.

• Шаг с обходом

  Продолжить выполнение до следующей строки сценария в текущем методе, а затем приостановить выполнение. Полезно для обхода вызовов методов. Назначенная клавиша: F10.

• Шаг с выходом

  Продолжить выполнение сценария до следующей строки в методе, вызванном текущим методом. Полезно для выхода из циклов и вызовов методов. Сочетание клавиш: SHIFT+F11.

Проверка значений переменных

В области "Локальные" и области "Смотреть" можно посмотреть значение любой переменной. Для проверки значений переменных выполните следующие действия:

• Запустите отладчик нажатием кнопки "Начать отладку".
• Установите точки останова на пути выполнения.
• Выполните сценарии.

Во время выполнения отладчик приостановится в первой обнаруженной точке останова. Как только выполнение приостановлено, можно проверить и изменить переменные в области "Локальные" и области "Смотреть".

В области "Локальные" отладчика отображаются имена, значения и типы всех переменных, доступных в текущей области видимости сценария. Если переменная находится вне области видимости, она недоступна и не отображается в области "Локальные". Наблюдать за такими переменными и объектами, находящимися "вне области видимости", можно в любое время в области "Смотреть".

Можно просматривать переменные из различных областей видимости, добавляя их в область "Смотреть". Добавить переменные в область "Смотреть" можно несколькими способами.

1. В основной области содержимого выберите текст сценария, затем щелкните правой кнопкой мыши, чтобы активировать контекстное меню, и выберите команду "Добавить контрольные значения". Выбранный текст добавится в список контрольных значений.
2. В области "Локальные" щелкните правой кнопкой мыши переменную или объект, а затем выберите команду "Добавить контрольные значения".
3. В области "Смотреть" щелкните "Щелкните для добавления", а затем введите имя переменной, которую собираетесь отслеживать. Текст "Щелкните для добавления" можно найти внизу списка контрольных значений как последний элемент списка в области "Смотреть".

Рис. 3. Проверка переменных в области "Локальные"

При каждом выполнении строки кода отладчик обновляет значения переменных в областях "Локальные" и "Смотреть". Обновленные значения обозначаются текстом красного цвета. Чтобы изменить значение переменной в области "Локальные" или "Смотреть", дважды щелкните значение, введите новое значение и нажмите клавишу ВВОД. Можно также щелкнуть правой кнопкой мыши объект и выбрать команду "Изменить значение", чтобы начать изменение. По завершении нажмите клавишу ВВОД для фиксации или ESC для отмены изменения.

Проверка стека вызовов

В области "Стек вызовов" предоставляется список контекстов выполнения всякий раз, когда отладчик приостанавливает выполнение в точке останова. Для перехода к какому-либо элементу стека дважды щелкните элемент. Отладчик предоставит этот метод для просмотра в основной области содержимого. Отсюда можно проверить переменные контекста выполнения в областях "Локальные" и "Смотреть".

Использование консоли для выполнения операторов кода

В области "Консоль" отладчика предоставляется консоль для оперативного выполнения операторов сценария. Введите какой-либо допустимый оператор или имя переменной и нажмите клавишу ВВОД (или щелкните "Запустить сценарий"), чтобы выполнить этот оператор в контексте текущей страницы и в том месте, где приостановлено выполнение.

Для задания значений переменных используйте стандартный синтаксис назначения:

s = 'my query string';

При нажатии кнопки "Многострочный режим" окно ввода увеличивается, позволяя ввести несколько строк. Изменяется также режим работы клавиши ВВОД, так что при нажатии этой кнопки не выполняется сценарий, а создается новая строка. Здесь можно ввести несколько строк кода, а затем выполнить их нажатием кнопки "Запустить сценарий". В окне ввода, размер которого можно изменять, предлагаются дополнительные элементы управления в контекстном меню.

Область "Консоль" можно использовать в любое время, даже если отладчик не запущен. Когда выполнение останавливается в точке останова, введенные в этой области команды выполняются в области видимости точки останова; когда выполнение не приостановлено, команды выполняются в глобальной области.

Использование консоли для ведения журнала предупреждений и сообщений об ошибках

Все ошибки сценария в конкретном экземпляре Internet Explorer регистрируются в области "Консоль", когда открыто окно "Средства разработчика". Чтобы перейти к месту ошибки, щелкните информацию об исходном коде, указанную для ошибки.

Для регистрации сообщений в области "Консоль" можно также использовать API console.log. Вместо того чтобы использовать вызов window.alert() и создавать бесчисленные диалоги, вызовите console.log для вывода строк в область "Консоль". Чтобы отличать сообщения, используйте разные API console.log, например:

• console.log
• console.info
• console.warn
• console.error
• console.assert

Эти команды консоли можно вызывать со списком аргументов, которые объединяются для создания выходной строки. В формате аргументов можно использовать подстановочные шаблоны в стиле printf. Например, для вызова console.log можно использовать один из следующих способов:

• console.log("Переменная x = " + x + ", а переменная y = " + y)
• console.log("Переменная x = ", x, ", а переменная y = ", y)
• console.log("Переменная x = %d, а переменная y = %d", x, y)

Однако в команде console.assert в качестве первого аргумента необходимо выражение для оценки истинности или ложности. Если выражение оценивается как истинное, то сообщение проверочного утверждения не выводится на консоль; в противном случае сообщение выводится на консоль. Пример:

var x = 1;
var y = 1;
//This expression evaluates to TRUE, so the message will not show up in the console
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);
//This expression will evaluates to FALSE so the message will show up in the console
y = 2;
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);

Сообщения консоли можно фильтровать, чтобы показать или скрыть их в области консоли. Чтобы выбрать сообщения, которые нужно показать или скрыть в области "Консоль", задайте "Фильтр" следующим образом: щелкните правой кнопкой мыши область "Консоль" и переместите курсор на элемент "Фильтр". Появляется список доступных фильтров, в котором отмечен активный фильтр.

Помимо этого объект консоли можно расширить, чтобы добавить новые функциональные возможности для нужд разработки. Например, можно видоизменить метод для вывода сообщений отладки на консоль. Для добавления команды console.debug можно добавить в код JScript следующие фрагменты кода:

console.debug = function(name, value){
	console.warn("DEBUG: " + name + "==" + value);
}

В предыдущем примере принимаются два аргумента и просто выводятся в область "Консоль" с минимальным форматированием. После определения команды console.debug можно видоизменить аргументы функции и режим работы так, как вам нужно. Таким образом, объект консоли можно использовать для добавления любого количества новых команд, которые необходимы.

Примечание. Поскольку в новой команде вы используете существующие команды консоли, "Фильтр" по-прежнему применим. Например, в команде console.debug из предыдущего примера используется команда console.warn для вывода сообщений в область "Консоль". Если снять флажок "Предупреждения консоли" в списке "Фильтр", никакие сообщения из команды console.warn не появятся в области "Консоль".

Замечания

• Чтобы очистить все сообщения console.log, используйте функцию console.clear() в коде или в командной строке области "Консоль". Функция console.clear() не удаляет ни сообщения об ошибках сценария, ни коды, введенные в командной строке области "Консоль".
• Чтобы полностью очистить область "Консоль", щелкните правой кнопкой мыши в области "Консоль" и выберите команду "Очистить консоль". При этом удаляются все сообщения из области "Консоль".

См. также

• Знакомство со средствами разработчика в Internet Explorer 8
• Отладка сценариев HTML и CSS помощью средств разработчика
• Профилирование сценариев с помощью средств разработчика
• Справочник по пользовательскому интерфейсу средств разработчика (возможно, на английском языке)
• Справочник по сочетаниям клавиш для средств разработчика (возможно, на английском языке)