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

Статья
02/24/2013

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

При отладке можно использовать интерактивную модель отладки, позволяющую просматривать код HTML, CSS и JavaScript и выполнять операции с отображаемым кодом, чтобы устранить проблемы. Можно также использовать более традиционную модель отладки Visual Studio, которая позволяет выполнять важные задачи, такие как установка точек останова и прохождение кода. Кроме того, можно сочетать обе модели.

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

Проводник DOM	Проводник DOM позволяет увидеть, как страница преобразуется в оболочке, а не оригинальный исходный код. Проводник предоставляет доступ к динамическим сведениям о стилях, макетах и атрибутах элементов, выбранных в настоящее время. Можно изменять стили, макеты и атрибуты и сразу просматривать результаты изменений. Дополнительные сведения см. в следующих разделах: Интерактивная отладка с использованием проводника DOM Проверка правил CSS Просмотр и изменение макета Просмотр прослушивателей событий
Окно консоли JavaScript	В окне консоли JavaScipt можно выполнять операции с отображаемым приложением, отправляя сообщения на консоль, просматривая значения локальных и глобальных переменных и выполняя код JavaScript. На консоли также отображаются ошибки и исключения JavaScript, исключения DOM-модели и среды выполнения Windows. Дополнительные сведения см. в следующих разделах: Интерактивная отладка с использованием окна консоли JavaScript Однострочный и многострочный режим в окне консоли JavaScript Команды консоли JavaScript
Обновление	Обновление позволяет редактировать исходный код, а затем повторно загружать страницы, не останавливая и не перезапуская отладчик. Дополнительные сведения см. в разделе Инструкции по обновлению приложения.
Выбор элемента	В проводнике DOM можно выбирать элементы DOM, щелкая области выполняемого приложения в имитаторе или на главном компьютере. Дополнительные сведения см. в разделе Выбор элементов.
Сеансы отладки	Дополнительные сведения о запуске сеансов отладки и развертывании приложений см. в следующих разделах: Запуск сеанса отладки (JavaScript) Запуск приложений для Магазина Windows из Visual Studio
Точки останова, прохождение кода	Отладчик Visual Studio позволяет задавать точки останова и проходить код, используя команды F5 ("Начать отладку" или "Продолжить") и F11 (Шаг с заходом). При прохождении кода можно выполнять разные действия с приложением в окне консоли JavaScript в зависимости от текущего состояния приложения. Дополнительные сведения см. в следующих разделах: Краткое руководство: навигация по отладчику (JavaScript) Интерактивная отладка и режим приостановки выполнения
Профилировщик	Сведения о поиска проблем производительности в приложении см. в разделе Анализ производительности приложений для Магазина Windows.
Анализатор памяти JavaScript	Дополнительные сведения о поиске утечек памяти в приложении см. в разделе Анализ использования памяти в приложениях для Магазина Windows (JavaScript)

В этом разделе также содержатся сведения о следующих задачах отладки JavaScript: Включение первичных исключений. и Отладка приложений, использующих компоненты среды выполнения Windows.

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

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

Совет

Чтобы не останавливать отладчик, можно внести изменения в исходный код, а затем обновить приложение, нажав кнопку Обновить приложение Windows на панели инструментов "Отладка". Дополнительные сведения см. в разделе Инструкции по обновлению приложения.

Проводник DOM позволяет решать следующие задачи.

Проверка отображаемого кода HTML, CSS и JavaScript и навигация по поддереву элементов DOM.
Динамическое изменение атрибутов отображенных элементов.
Проверка применения CSS-стилей на странице и внесение изменений в динамическом режиме.

В процессе отладки приложений часто требуется выбрать те или иные элементы в проводнике DOM. При выборе элемента значения, отображаемые на вкладках справа, автоматически обновляются, отражая текущее состояние выделенного элемента в проводнике DOM. Это вкладки Стили, Отслеживать стили, Макет, Атрибуты и События. Дополнительные сведения о выборе элементов см. в разделе Выбор элементов.

Совет

Если окно проводника DOM закрыто, последовательно щелкните Отладка > Окна > Проводник DOM, чтобы повторно открыть его. Окно отображается только во время сеанса отладки скрипта.

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

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

Создайте новое решение в Visual Studio, последовательно щелкнув Файл > Создать проект.
Выберите шаблон JavaScript с именем Пустое приложение и введите имя проекта, например FlipViewApp.

Добавьте следующий код в элемент ТЕЛО файла default.html.

    <div id="flipTemplate" data-win-control="WinJS.Binding.Template" 
             style="display:none">
        <div class="fixedItem" >
            <img src="#" data-win-bind="src: flipImg" />
        </div>
    </div>
    <div id="fView" style="width:100px;height:100px;background-color:#0094ff" 
        data-win-control="WinJS.UI.FlipView"
            data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>

Замените код в файле default.js следующим кодом:

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var myData = [];
    for (var x = 0; x < 4; x++) {
        myData[x] = { flipImg: "/images/logo.png" }
    };

    var pages = new WinJS.Binding.List(myData, { proxy: true });

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !==
            activation.ApplicationExecutionState.terminated) {
                // TODO: . . .
            } else {
                // TODO: . . .
            }
            args.setPromise(WinJS.UI.processAll());

            updateImages();
        }
    };

    function updateImages() {

        pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
        pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
        pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
    };

    app.oncheckpoint = function (args) {
    };

    app.start();

    var publicMembers = {
        items: pages
    };

    WinJS.Namespace.define("Data", publicMembers);

})();

Примечание

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

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

При этом приложение будет запущено в имитаторе, однако отображаемый экран будет практически пустым, потому что в коде имеется несколько ошибок. Изображение по умолчанию в верхнем левом углу указывает, что что-то загружено. Если щелкнуть в этой области экрана, можно увидеть стрелку FlipView, указывающую, что создан экземпляр элемента управления, но размер элемента управления неправильный.

Совет

Для переключения между Visual Studio и работающим приложением можно использовать сочетание клавиш Alt+Tab или нажать клавишу F12. Если приложение запускается в имитаторе, а не на локальном компьютере, можно нажать кнопки Visual Studio и имитатора на панели задач Windows, чтобы переключиться между окнами.
Перейдите на вкладку Проводник DOM в Visual Studio.
В окне проводника DOM выберите элемент DIV для раздела с идентификатором "fView".

Совет

Кроме того, можно выбрать элемент DIV в левом нижнем углу окна консоли JavaScript, введя select(fView) в запросе на ввод >> и нажав клавишу "Ввод".

Обратите внимание, что ширина и высота в пикселях в проводнике DOM заданы неправильно.

Значения, отображаемые на вкладках в правой части проводника DOM, автоматически обновляются, отражая состояние текущего элемента в проводнике DOM.
На вкладке Атрибуты дважды щелкните атрибут style. Измените значения высоты и ширины, чтобы каждое было равно 100 %. После нажатия клавиши "Ввод" новые значения немедленно отражаются в имитаторе, хотя сеанс отладки не был остановлен.

Важно!

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

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

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

Можно воспользоваться функцией "Обновление", чтобы изменить код HTML, CSS и JavaScript и быстро перезагрузить страницы, не останавливая и не перезапуская отладчик. Дополнительные сведения об использовании функции обновления см. в разделе Инструкции по обновлению приложения.

Обновление приложения во время отладки

Пока приложение выполняется, переключитесь на Visual Studio
Откройте файл default.html и внесите исправления в исходный код, изменив высоту и ширину элемента DIV "fView" на 100 %.
Нажмите кнопку Обновить приложение Windows на панели инструментов "Отладка" (или нажмите клавишу F4). Эта кнопка выглядит следующим образом: .

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

Изображения по-прежнему отображаются неправильно. Можно продолжить отладку этого приложения в следующем разделе.

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

Можно выполнять и обновлять код JavaScript в окне консоли JavaScript. Как и проводник DOM, окно консоли JavaScript позволяет тестировать изменения, не останавливая и не перезапуская отладчик, а также немедленно просматривать результаты изменений на отображаемой странице. Обнаружив место, требующее изменения или изменений, нужно остановить отладчик и внести нужные исправления в исходный код.

Окно консоли JavaScript можно использовать для решения следующих задач.

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

Совет

Если окно консоли JavaScript закрыто, щелкните Отладка > Окна > Консоль JavaScript, чтобы снова открыть его. Окно отображается только во время сеанса отладки скрипта.

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

Отладка кода JavaScript в приложении FlipView

Во время выполнения приложения FlipView в имитаторе введите Data.items в строке ввода окна консоли JavaScript и нажмите клавишу "Ввод".

В окне консоли отобразится средство визуализации для объекта items. Это означает, что создан экземпляр объекта items и что он доступен в контексте скрипта. В окне консоли можно просмотреть значения свойств, последовательно щелкая узлы объекта (или используя клавиши со стрелками). Если щелкнуть объект items._data, как показано на данном рисунке, можно увидеть, что ссылки на источник изображений неверны, как и ожидалось. Изображения по умолчанию все еще присутствуют в объекте, а отсутствующие изображения перемешаны с нужными.
В командной строке введите Data.items.push и нажмите клавишу "Ввод". В окне консоли показана функциональная реализация элемента push из файла проекта Библиотека Windows для JavaScript (WinJS). Выполнив небольшой анализ с помощью IntelliSense, можно установить, что для замены изображений по умолчанию нужно использовать setAt.
Чтобы устранить эту проблему в интерактивном режиме, не останавливая сеанс отладки, откройте файл default.js и выделите следующий код в функции updateImages.
```
pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
Скопируйте и вставьте этот код в строке ввода консоли JavaScript.

Совет

При вставке многострочного кода в строке ввода на консоли JavaScript автоматически выполняется переключение в многострочный режим. Для включения и отключения многострочного режима можно использовать сочетание клавиш Ctrl+Alt+M. Чтобы выполнить скрипт в многострочном режиме, нажмите клавиши CTRL+ВВОД или щелкните символ стрелки в правом нижнем углу окна.
Исправьте вызовы функции push в запросе, меняя pages.push на Data.items.setAt, а затем щелкните символ стрелки, чтобы выполнить скрипт. Исправленный код должен выглядеть следующим образом.
```
Data.items.setAt.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
Data.items.setAt.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
Data.items.setAt.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
Нажмите клавиши Ctrl+Alt+M, чтобы переключиться на однострочный режим в запросе на ввод на консоли, а затем нажмите клавиши Ctrl+A, чтобы выбрать введенные ранее данные и удалить их.
В запросе введите Data.items.length = 3 и нажмите клавишу "Ввод". В результате лишние элементы данных будут удалены.
Снова проверьте имитатор — нужные изображения теперь отображаются на соответствующих страницах FlipView.
В проводнике DOM отображается обновленный элемент DIV. Кроме того, можно перейти в поддерево, чтобы найти нужные элементы IMG.
Остановите отладку, последовательно щелкнув Отладка > Остановить отладку или нажав клавиши Shift+F5, а затем исправьте исходный код.

Полную страницу default.html с исправленным примером кода см. в разделе Отладка примера кода приложения (JavaScript).

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

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

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

Задание точки останова и отладка приложения

В файле default.html ранее созданного приложения FlipView щелкните правой кнопкой мыши функцию updateImages() и последовательно щелкните Точка останова > Вставить точку останова.
Выберите Локальный компьютер в раскрывающемся списке рядом с кнопкой Начать отладку на панели инструментов Стандартная.
Последовательно щелкните Отладка > Начать отладку или нажмите клавишу F5.

Приложение входит в режим приостановки выполнения, когда выполнение достигает функции updateImages() и текущая строка выполнения программы выделяется желтым.

Можно изменить значения переменных, чтобы немедленно изменить состояние программы, не завершая текущего сеанса отладки.
Введите updateImages в командной строке и нажмите клавишу "Ввод". Реализация функции отображается в окне консоли.
Скопируйте одну строку функции в командную строку и измените значение индекса на 3:
```
pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
Нажмите клавишу "Ввод", чтобы выполнить строку кода.

Если нужно выполнить пошаговое прохождение кода, нажмите клавишу F11 или клавишу F5, чтобы продолжить выполнение программы.
Нажмите клавишу F5, чтобы продолжить выполнение программы. Отобразится приложение FlipView, и теперь на всех четырех страницах будет отображаться одно из изображений не по умолчанию.

Чтобы вернуться к Visual Studio, нажмите клавишу F12 или сочетание клавиш ALT+TAB.

Однострочный и многострочный режим в окне консоли JavaScript

Строка ввода в окне консоли JavaScript поддерживает как однострочный, так и многострочный режим ввода. Процедура интерактивной отладки, описанная в этом разделе, демонстрирует использование обоих режимов. Для переключения между режимами достаточно нажать сочетание клавиш Ctrl+Alt+M.

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

При выполнении скриптов в многострочном режиме строка ввода не очищается. При переключении из многострочного в однострочный режим для очистки строки ввода можно нажать клавиши Ctrl+A и ввести любой символ. Чтобы выполнить скрипт в многострочном режиме, нажмите клавиши CTRL+ВВОД или щелкните символ стрелки в правом нижнем углу окна.

Выбор элементов

Во время отладки приложения элементы модели DOM можно выбирать одним из трех способов:

нажатием элементов непосредственно в окне проводника DOM (или с помощью клавиш со стрелками);
с помощью кнопки Выбор элемента;
с помощью команды select, входящей в Команды консоли JavaScript.

При выборе элементов с помощью окна проводника DOM и наведении указателя мыши на элемент соответствующий элемент выделяется в имитаторе или в устройстве. Чтобы выбрать элемент, необходимо щелкнуть его в проводнике DOM (или воспользоваться для выбора элементов клавишами со стрелками). Элементы в проводнике DOM можно также выбирать с помощью кнопки Выбор элемента. На следующем рисунке показана кнопка Выбор элемента.

Кнопка "Выбор элемента" в проводнике DOM

При нажатии кнопки Выбор элемента (или сочетания клавиш CTRL+B) меняется режим выделения, то есть элемент в проводнике DOM можно выделить, щелкнув его в приложении или имитаторе. По щелчку режим возвращается в нормальный режим выделения. При нажатии кнопки Выбор элемента приложение отображается на переднем плане, а вид курсора меняется в соответствии с новым режимом выделения. В этом режиме при наведении указателя мыши на элементы в имитаторе или в устройстве вокруг элемента появляется цветной контур. Если щелкнуть выделенный элемент, проводник DOM снова отображается на переднем плане, а указанный элемент выделен. Пример выбора элементов с использованием кнопки Выбор элемента см. в разделе Проверка правил CSS.

Отладка приложений, использующих компоненты среды выполнения Windows

При отладке приложений Магазина Windows с JavaScript, ссылающихся на файлы WinMD C# или Visual Basic или включающих компоненты среды выполнения Windows C++ (файл WinMD и библиотека DLL), можно задавать используемый отладчик. Невозможно выполнять отладку кода JavaScript и управляемого или машинного кода одновременно.

Используемый отладчик задается на странице свойств "Отладка" проекта. Дополнительные сведения см. в разделе Запуск сеанса отладки (JavaScript).

Развертывание приложений

В некоторых сценариях отладки приложений Магазина Windows, разработанных для Windows с использованием JavaScript, может потребоваться развернуть приложение, не запуская его в Visual Studio. Например, приложения, предназначенные для получения общедоступного содержимого, могут запускаться из пользовательского интерфейса области общего доступа. В этом случае потребуется выполнить отладку из приложения, обеспечивающего общий доступ к содержимому. Для приложения, получающего общедоступное содержимое, на странице свойств "Отладка" проекта можно задать для свойства Запустить приложение значение Нет. Дополнительные сведения о сценариях развертывания приложений см. в разделе Запуск сеанса отладки (JavaScript).

Включение первичных исключений.

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

Включение первичных исключений

В Visual Studio последовательно щелкните Отладка > Исключения.
В диалоговом окне Исключения разверните узел JavaScript Runtime Exceptions.
Установите флажок Вызванное для всех исключений, на которых отладчик должен приостанавливать выполнение, и нажмите кнопку ОК.

Поддержка браузерами и платформами

Инструменты Visual Studio для JavaScript, проводник DOM и окно "Консоль JavaScript" поддерживаются в следующих платформах:

Приложения Магазина Windows, построенные для Windows 8 с использованием JavaScript.
Internet Explorer 10 в Windows 8.

Чтобы загрузить Windows 8 и Visual Studio, перейдите сюда.

См. также

Поделиться через

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

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

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

Обновление приложения во время отладки

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

Отладка кода JavaScript в приложении FlipView

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

Задание точки останова и отладка приложения

Однострочный и многострочный режим в окне консоли JavaScript

Выбор элементов

Отладка приложений, использующих компоненты среды выполнения Windows

Развертывание приложений

Включение первичных исключений.

Включение первичных исключений

Поддержка браузерами и платформами

См. также

Задачи

Ссылки

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

Другие ресурсы

Дополнительные ресурсы