Краткое руководство: навигация по отладчику (JavaScript)

В этом кратком руководстве продемонстрирована навигация по отладчику Visual Studio, а также способы просмотра состояния программы в ходе сеанса.

Это краткое руководство предназначено для разработчиков, не имеющих опыта отладки решений с использованием Visual Studio и для разработчиков, которые хотят узнать больше о навигации по сеансу отладки Visual Studio. В руководстве не описаны общие принципы выполнения отладки. Функции в примерах кода предназначены только для иллюстрации описанных в разделе процедур отладки. В этих функциях не реализованы передовые практики в области создания приложений и функций. По сути, эти функции, как и само приложение, не решают какие-либо задачи.

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

Сочетания клавиш для работы с отладчиком. Навигацию по отладчику Visual Studio удобно осуществлять с помощью мыши или клавиатуры. Для многих шагов в этом разделе в скобках указано сочетание клавиш, позволяющее быстро выполнить то или иное действие. Например, текст "(клавиша F5)" означает, что нажав клавишу F5, можно запустить или продолжить выполнение отладчика.

Примечание

Шаблон "Модуль"

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

Содержание раздела

Содержание раздела:

Создание примера приложения

Задание точки останова и выполнение программы до точки останова, шаг с заходом в функцию, изучение данных программы

Шаг с заходом, обходом и выходом из функций

Задание условной точки останова, выполнение до текущей позиции и визуализация переменной

Просмотр данных переменной в окне локальных переменных

• Просмотр данных переменных и цепочки прототипов объекта

• Изучение данных о цепочке областей видимости

Навигация по коду с использованием окна стека вызовов

Создание примера приложения

Отладка происходит в коде, поэтому в примере приложения структура приложения для Магазина Windows используется только для того, чтобы создать исходный файл, демонстрирующий принципы навигации по сеансу отладки и способы просмотра состояния программы. Весь используемый код вызывается из функции module файла default.js. Никакие элементы управления не добавляются, события не обрабатываются.

1. Создание пустого приложения JavaScript для Магазина Windows. Откройте Visual Studio. На домашней странице щелкните ссылку Создать проект. В диалоговом окне Создать проект выберите JavaScript из списка Установленные и щелкните Магазин Windows. В списке шаблонов проекта выберите Пустое приложение. Visual Studio создает новые решение и проект и отображает файл default.htm в редакторе кода.

   Обратите внимание, что файлы скриптов загружаются на страницу.

   • Файлы base.js и ui.js создают библиотеку Windows для JavaScript. Библиотека Windows для JavaScript — это набор файлов JavaScript и CSS, упрощающих создание приложений для Магазина Windows с использованием JavaScript. Она используется вместе с HTML, CSS и средой выполнения Windows для создания приложений.

   • Код запускается из файла default.js .

2. Открытие исходного файла default.js. В обозревателе решений откройте узел js и выберите default.js.

3. Замена содержимого страницы примером кода. Удалите все содержимое из файла default.js. Пройдите по ссылке Навигация отладчика в примере кода (JavaScript) и копируйте код, приведенный в разделе JavaScript, в буфер. (Нажмите кнопку Назад в браузере или средстве просмотра справки, чтобы вернуться на страницу краткого руководства.) В редакторе Visual Studio вставьте код в ставший пустым файл default.js. Нажмите клавиши Ctrl+ S, чтобы сохранить файл.

Теперь можно приступить к изучению примеров из этого раздела.

Задание точки останова и выполнение программы до точки останова, шаг с заходом в функцию, изучение данных программы

Самым простым способом запуска сеанса отладки является выбор команды Начать отладку из меню Отладка (клавиша F5). Приложение запускается и выполняется до достижения точки останова, приостановления выполнения вручную, необработанного исключения или завершения приложения.

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

После того как выполнение приложения будет приостановлено (эта операция также называется "переключение в отладчик"), можно контролировать выполнение остального программного кода. Можно продолжить анализ построчно, переходя от вызова функции к самой функции, или выполнить вызываемую функцию одним действием. Эта процедура называется перемещением по приложению. Кроме того, можно возобновить стандартное выполнение приложения и дойти до следующей заданной точки останова или до строки, на которой расположен курсор. Остановить сеанс отладки можно в любое время. Отладчик позволяет выполнять необходимые операции очистки и выходить из режима выполнения.

Пример 1

В этом примере точка останова задается в теле функции module в файле default.js, потому что именно она вызывает первое из используемых пользовательских инструкций. Выполните вход в функцию, просмотрите значения переменных в подсказках по данным в отладчике и остановите отладку.

1. Задание точки останова. Установите точку останова на инструкцию callTrack = "module function";, выполняемую сразу после вызова метода app.start(). Выберите строку в затененной области редактора исходного кода (либо поместите курсор на строку и нажмите клавишу F9).

   

   Значок точки останова отобразится в этой области.

2. Выполнение до точки останова. Запустите сеанс отладки, щелкнув Начать отладку в меню Отладка (клавиша F5).

   Приложение начинает выполнение и приостанавливает его непосредственно перед инструкцией, на которой задана точка останова. Значок текущей строки в рабочей области указывает на место выполнения отладки, а выполняемая в настоящее время инструкция выделяется.

   

   Теперь можно контролировать выполнение приложения и отслеживать состояние программы в ходе перемещения по инструкциям программы.

3. Шаг с заходом в функцию. В меню Отладка выберите Шаг с заходом (клавиша F11).

   

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

4. При заходе в строку кода отладчик выполняет одно из следующих действий.

   • Если следующая инструкция не является вызовом функции в решении, отладчик выполняет инструкцию, переходит к следующей, а затем приостанавливает выполнение.

   • Если инструкция является вызовом функции в решении, отладчик перемещается к первой строке вызываемой функции и приостанавливает выполнение.

   Продолжайте выполнять шаги с заходом в инструкции функции example1 до достижения точки выхода. Отладчик выделяет закрывающую фигурную скобку функции.

5. Просмотр значений переменных в подсказках по данным. Продолжайте выполнять шаги с заходом в инструкции функции example1 до достижения точки выхода. Отладчик выделяет закрывающую фигурную скобку функции. При остановке указателя мыши на имени переменной в подсказке по данным отображаются имя и значение переменной.

   

6. Добавление контрольного значения для переменной callTrack. Переменная callTrack используется в данном кратком руководстве, чтобы показать функции, вызываемые в примерах. Чтобы просматривать значение переменной было удобнее, добавьте ее в окно "Контрольное значение". Щелкните имя переменной в редакторе, а затем выберите Добавить контрольное значение из контекстного меню.

   

   В окне контрольных значений можно просматривать несколько переменных. Значения просматриваемых переменных, как и значения в окне подсказок по данным, обновляются всякий раз, когда выполнение приостанавливается. Просматриваемые переменные сохраняются на протяжении всех сеансов отладки.

7. Остановка отладки. В меню Отладка выберите Остановить отладку (клавиши Shift+F5). Это позволит завершить сеанс отладки.

Шаг с заходом, обходом и выходом из функций

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

Обход строки кода, не содержащей вызов функции, выполняет строку так же, как при заходе в строку.

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

При обходе функции и выходе из нее функция выполняется.

Пример 2

В этом примере показан заход в функции, обход функций и выход из них.

1. Вызовите функцию example2 в модульной функции. Отредактируйте функцию module и замените строку, следующую за var callTrack = "module function", строкой example2();.

   

2. Выполнение до точки останова. Запустите сеанс отладки, щелкнув Начать отладку в меню Отладка (клавиша F5). Отладчик приостанавливает выполнение в точке останова.

3. Шаг с обходом строки кода. В меню Отладка выберите Шаг с обходом (клавиша F10). Отладчик выполняет инструкцию var callTrack = "module function" так же, как и при выполнении шага с заходом.

4. Шаг с заходом в example2 и example2_a. Нажмите клавишу F11, чтобы выполнить шаг с заходом в функцию example2. Продолжайте заходить в инструкции функции example2 до достижения строки var x = example2_a();. Войдите в данную строку, чтобы переместиться в точку входа функции example2_a. Продолжайте входить в каждую инструкцию функции example2_a до тех пор, пока вернетесь к функции example2.

   

5. Шаг с обходом функции. Обратите внимание, что следующая строка функции example2, var y = example2_a();, практически совпадает с предыдущей. Эту строку вполне можно обойти. Нажмите клавишу F10, чтобы переместиться от возобновленной функции example2 ко второму вызову функции example2_a. Обратите внимание, что строка callTrack указывает, что функция example2_a была исполнена дважды.

6. Шаг с выходом из функции. Нажмите клавишу F11, чтобы выполнить шаг с заходом в функцию example2_b. Обратите внимание, что функция example2_b отличается от example2_a несущественно. Чтобы выйти из этой функции, выберите Шаг с выходом в меню Отладка (клавиши Shift+F11). Обратите внимание, что переменная callTrack указывает, что функция example2_b была выполнена и что отладчик вернулся к точке, в которой возобновляется выполнение функции example2.

7. Остановка отладки. В меню Отладка выберите Остановить отладку (клавиши Shift+F5). Это позволит завершить сеанс отладки.

Задание условной точки останова, выполнение до текущей позиции и визуализация переменной

Условная точка останова задает условие, при соблюдении которого отладчик приостанавливает выполнение. Условие задается любым выражением кода, которое может принимать значение true или false. Например, условную точку останова можно использовать для контроля состояния программы в часто вызываемой функции только по достижении переменной определенного значения.

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

Иногда сложно просмотреть значение переменной в строке окна подсказок по данным или другого окна данных. Отладчик может отображать строки, код HTML и Xml в средстве визуализации текста, которое является форматированным представлением значения в прокручиваемом окне.

Пример 3

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

1. Вызовите функцию example3 в модульной функции. Отредактируйте функцию module и замените строку, следующую за var callTrack = "module function";, строкой example3();.

   

2. Выполнение до точки останова. Запустите сеанс отладки, щелкнув Начать отладку в меню Отладка (клавиша F5). Отладчик приостанавливает выполнение в точке останова функции module.

3. Шаг с заходом в функцию example3. Выберите Шаг с заходом в меню Отладка (клавиша F11), чтобы переместиться к точке входа функции example3. Продолжайте выполнять шаги с заходом в функцию, пока не будут пройдены один или два цикла блока for. Обратите внимание, что для прохождения всех 1000 итераций потребуется много времени.

4. Установка условной точки останова. В левой области окна с кодом щелкните строку s += i.toString() + "\n"; правой кнопкой мыши и выберите Условие в контекстном меню.

   Установите флажок Условие и введите i == 500; в текстовом поле. Выберите вариант Верно и нажмите кнопку ОК. Точка останова позволяет проверить значение в пятисотой итерации цикла for. Значок условной точки останова хорошо заметен благодаря белому кресту на нем.

   

5. Выполнение до точки останова. В меню Отладка выберите Продолжить" (клавиша F5). Приостановите выполнение на переменной i, чтобы убедиться что текущее значение i равно 500. Также обратите внимание, что переменная s представлена как одна строка и ее длина превышает размер ширину окна подсказки данных.

6. Визуализация строковой переменной. Щелкните значок лупы в подсказке по данным объекта s.

   Отобразится окно средства визуализации текста, а значение строки теперь представлено в виде многострочного блока.

   

7. Выполнение до текущей позиции. Выберите строку callTrack += "->example3";, а затем щелкните Выполнение до текущей позиции в контекстном меню (клавиши Ctrl+F10). Отладчик завершает итерации цикла, а затем приостанавливает выполнение на строке.

8. Остановка отладки. В меню Отладка выберите Остановить отладку (клавиши Shift+F5). Это позволит завершить сеанс отладки.

Используйте команду "Выполнить до текущей позиции", чтобы вернуться в код и удалить точку останова.

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

1. Задание точки останова в вызове app.start. В функции module задайте точку останова в строке app.start()

2. Выполните приложение до точки останова и выполните вход в библиотечную функцию.

   При вхождении в функцию app.start() редактор отображает код в файле base.js. Войдите в еще несколько строк.

3. Шаг с обходом и выходом из функций. При обходе кода (F10) и выходе из кода (SHIFT+F11) в файле base.js иногда приходят к выводу, что, по сути, анализ сложности и продолжительности выполнения функции запуска — не есть конечная задача отладки.

4. Установка курсора в код и выполнение до текущей позиции. Вернитесь к файлу default.js в редакторе кода. Выберите первую строку кода после app.start() (невозможно выполнить приложение до комментария или пустой строки). Выберите Выполнить до текущей позиции из контекстного меню. Отладчик продолжает выполнение функции app.start и приостанавливает выполнение в точке останова.

Просмотр данных переменной в окне локальных переменных

Окно локальных переменных — это представление в виде дерева параметров и переменных в цепочке областей видимости выполняемой в настоящее время функции.

Просмотр данных переменных и цепочки прототипов объекта

1. Добавление объекта массива в модульную функцию. Отредактируйте функцию module и замените строку, следующую за var callTrack = "module function", строкой var myArray = new Array(1, 2, 3);.

   

2. Выполнение до точки останова. Запустите сеанс отладки, щелкнув Начать отладку в меню Отладка (клавиша F5). Отладчик приостанавливает выполнение в точке останова. Выполните шаг с заходом в строку.

3. Открытие окна локальных переменных. В меню Отладка выберите пункт Окна и щелкните Локальные. (клавиши Alt+4).

4. Анализ локальных переменных в модульной функции В окне локальных переменных отображаются переменные выполняемой в настоящее время функции (функция module) в виде узлов верхнего уровня дерева. При вводе функции JavaScript создает все переменные и присваивает им значение undefined. Значением функций, определенных в данной функции, является текст.

   

5. Прохождение определений callTrack и myArray. Найдите переменные callTrack и myArray в окне локальных переменных. Выполните шаг с обходом (F10) двух определений и обратите внимание, что поля Значение и Тип изменились. В окне локальных переменных выделены значения переменных, которые изменились с момента последнего прерывания.

6. Анализ объекта myArray Разверните переменную myArray. Каждый элемент массива перечислен в узле [прототип], содержащем иерархию наследования объекта Array. Разверните этот узел.

   

   • В узле Методы перечислены все методы объекта Array.

   • Узел [прототип] содержит прототип объекта Object, от которого наследуется Array. Узлы [прототип] могут быть рекурсивными. Каждый родительский объект в иерархии объектов описывается в узле [прототип] его дочернего элемента.

7. Остановка отладки. В меню Отладка выберите Остановить отладку (клавиши Shift+F5). Это позволит завершить сеанс отладки.

Изучение данных о цепочке областей видимости

Цепочка областей видимости функции включает все активные переменные, доступные функции Глобальные переменные являются частью цепочки областей видимости, равно как и любые объекты (включая функции), определенные в функции, которая определяет выполняемую в настоящее время функцию. Например, переменная callTrack, указанная в функции module default.js доступен любой функции, которая определена в функции module. Каждая область в окне локальных переменных перечислена отдельно.

• Переменные в выполняемой в настоящее время функции перечислены в верхней части окна.

• Переменные каждой области функции в цепочке областей видимости перечислены под узлом [Область] для соответствующей функции. Функции области перечислены в цепочке в порядке следования от функции, определяющей текущую функцию, до самой удаленной функции в цепочке.

• Узел [Глобальные] содержит глобальные объекты, определенные за пределами какой-либо функции.

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

Пример 4

1. Вызовите функцию example4 в модульной функции. Отредактируйте функцию module и замените строку, следующую за var callTrack = "module function", строкой example4().

   

2. Выполнение до точки останова. Запустите сеанс отладки, щелкнув Начать отладку в меню Отладка (клавиша F5). Отладчик приостанавливает выполнение в точке останова.

3. Открытие окна локальных переменных. При необходимости в меню Отладка выберите пункт Окна и щелкните Локальные. (клавиши Alt+4). Обратите внимание, что в окне перечислены все переменные и функции из функции module и содержится узел [Глобальные].

4. Анализ глобальных переменных. Разверните узел [Глобальные]. Объекты и переменные в узле "Глобальные" были заданы библиотекой Windows для JavaScript. В глобальную область можно добавить собственные переменные.

5. Шаг с заходом в функцию example4 и просмотр локальных переменных и переменных области видимости Выполните шаг с заходом (клавиша F11) в функцию example4. Поскольку example4 определен в функции module, функция module будет родительской областью. example4 может вызвать любую из функций в функции module и обращаться к ее переменным. Разверните узел [Область] в окне локальных переменных и обратите внимание, что он содержит те же самые переменные и переменные функции module.

   

6. Шаг с заходом в функцию example4_a и просмотр локальных переменных и переменных области видимости Выполните шаг с заходом в функцию example4 и в вызов функции example4_a. Обратите внимание, что теперь используются локальные переменные из функции example4_a и что узел [Область] по-прежнему содержит переменные функции module. Несмотря на то что переменные функции example4 активны, функция example4_a не имеет к ним доступа, и они более не являются частью цепочки областей видимости.

7. Шаг с заходом в функцию multipyByA и просмотр локальных переменных и переменных области видимости Пройдите остальную часть функции example4_a и выполните шаг с заходом в строку var x = multilpyByA(b);.

   Переменная функции multipyByA установлена равной функцииmultiplyClosure, которая является замкнутым выражением. multipyClosure определяет и возвращает внутреннюю функцию mulitplyXby и фиксирует (закрывает) ее параметр и переменную. В замкнутом выражении возвращенная внутренняя функция имеет доступ к данным внешней функции и, следовательно, создает собственный уровень области видимости.

   При заходе в var x = multilpyByA(b); выполняется перемещение на строку return a * b; во внутренней функции mulitplyXby.

8. В окне локальных переменных только параметр b перечислен как локальная переменная в multiplyXby, однако был добавлен новый уровень [Область]. Развернув этот узел, можно увидеть, что он содержит параметры, функции и переменные multiplyClosure, включая переменную a, вызываемую в первой строке multiplyXby. Быстрая проверка второго узла [Область] позволяет просмотреть переменные модульной функции, к которой в следующей строке обращается функция multiplyXby.

   

9. Остановка отладки. В меню Отладка выберите Остановить отладку (клавиши Shift+F5). Это позволит завершить сеанс отладки.

Навигация по коду с использованием окна стека вызовов

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

Помимо отображения пути вызова выполняемой в настоящее время функции окно стека вызовов можно использовать для навигации по коду в редакторе кода. Эта функция полезна при работе с несколькими файлами, если нужно быстро переместиться к конкретной функции.

Пример 5

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

1. Вызовите функцию example5 в модульной функции. Отредактируйте функцию module и замените строку, следующую за var callTrack = "module function";, строкой example5();.

   

2. Выполнение до точки останова. Запустите сеанс отладки, щелкнув Начать отладку в меню Отладка (клавиша F5). Отладчик приостанавливает выполнение в точке останова модульной функции.

3. Откройте окно "Стек вызовов". В меню Отладка последовательно щелкните Окна и Стек вызовов (клавиши Alt+7). Обратите внимание, что в окне "Стек вызовов" отображаются две функции:

   • Глобальный код — это точка входа функции module в нижней части стека вызовов.

   • Анонимная функция показывает строку функции module, на которой было приостановлено выполнение. Это верхняя часть стека вызовов.

4. Шаг с заходом в функции с целью доступа к функции example5_d. Выберите Шаг с заходом в меню Отладка (клавиша F11), чтобы выполнять вызовы в пути вызовов до тех пор, пока не будет достигнута точка входа функции example5_d. Обратите внимание, что каждый раз, когда функция вызывает функцию, номер строки вызывающей функции сохраняется, а вызываемая функция помещается вверху стека. Номер строки вызывающей функции — это точка, в которой вызывающая функция приостановила выполнение. Желтая стрелка указывает на выполняемую в настоящее время функцию.

   

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

6. Шаг с заходом в функции и выполнение до точки останова. Продолжайте заходы в функцию example5_d. Обратите внимание, что при возврате из функции она удаляется из стека вызовов. Нажмите клавишу F5, чтобы продолжить выполнение программы. Выполнение останавливается в точке останова, созданной в предыдущем шаге.

7. Остановка отладки. В меню Отладка выберите Остановить отладку (клавиши Shift+F5). Это позволит завершить сеанс отладки.

См. также

Основные понятия

Запуск сеанса отладки (JavaScript)

Краткое руководство: навигация по отладчику (JavaScript)

Краткое руководство: отладка приложений (JavaScript)

Вызов событий приостановки, возобновления и фоновых событий в приложениях для Магазина Windows

Отладка приложений для Магазина Windows