Краткое руководство. Отладка JavaScript с помощью консоли

Статья
07/08/2015

Applies to Windows and Windows Phone

Окно консоли JavaScript можно использовать для взаимодействия и отладки приложений Магазина, созданных с использованием JavaScript. Эти возможности поддерживаются для приложений Магазин Windows и приложений для Магазина Windows Phone. Справочник по командам консоли в разделе Команды консоли JavaScript.

Окно консоли JavaScript позволяет выполнять следующие действия.

Отправка объектов, значений и сообщений из приложения в окно консоли.
Просмотр и изменение значений локальных и глобальных переменных в запущенном приложении.
Просмотр визуализаторов объектов.
Запуск кода JavaScript, который выполняется в текущем контексте скрипта.
Просмотр ошибок и исключений JavaScript в дополнение к исключениям модели DOM и среды выполнения Windows.
Выполнение других задач, таких как очистка экрана. Полный список команд см. в разделе Команды консоли JavaScript.

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

Отладка с помощью окна консоли JavaScript
Интерактивный режим отладки и останова
Однострочный и многострочный режим в окне консоли JavaScript
Переключение контекста выполнения скрипта

Совет

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

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

Отладка с помощью окна консоли JavaScript

Далее приведена процедура создания приложения FlipView и инструкции по интерактивной отладке ошибки кодирования JavaScript.

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

Создайте новое решение в Visual Studio, выбрав Файл > Новый проект.
Выберите JavaScript > Приложения Магазина, выберите Приложения Windows или Приложения Windows Phone и нажмите кнопку Пустое приложение.
Введите имя проекта, например FlipViewApp, и выберите ОК для создания приложения.

В элементе BODY файла Default.HTML замените существующий код 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" data-win-control="WinJS.UI.FlipView" data-win-options="{
    itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
</div>

Откройте файл default.css и добавьте следующий код CSS для селектора #fView:
```
#fView {
    background-color:#0094ff;
    height: 500px;
    margin: 25px;
}
```

Откройте файл default.js и замените код следующим кодом JavaScript:

(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);

})();

Если цель отладки еще не выбрана, выберите Симулятор или Emulator 8.1 WVGA, 4 дюйма, 512 МБ (для Windows Phone) в раскрывающемся списке рядом с кнопкой Устройства на панели инструментов Отладка.
Нажмите клавишу F5 для запуска отладчик.

Приложение выполняется, но изображения отсутствуют. Ошибки APPHOST в окне консоли JavaScript указывают на отсутствие изображений.
Приложение FlipView должно выполняться в симуляторе или эмуляторе телефона; введите Data.items в строке ввода окна консоли (рядом с символом «>>») и нажмите клавишу ВВОД.

В окне консоли отображается визуализатор для объекта items. Это означает, что объект items создан и доступен в текущем контексте скрипта. В окне консоли можно щелкнуть узлы объекта, чтобы просмотреть значения свойств (или использовать клавиши со стрелками). Если щелкнуть объект items._data, как показано на рисунке, можно увидеть, что ссылки на источник изображений являются неправильными, как и ожидалось. Изображения по умолчанию (logo.png) все еще присутствуют в объекте, а отсутствующие изображения перемешаны с нужными.

Также обратите внимание, что в объекте items._data намного больше элементов, чем следовало ожидать.
В командной строке введите Data.items.push и нажмите клавишу ВВОД. В окне консоли отображается визуализатор для функции push, которая реализована в файле проекта Библиотека Windows для JavaScript (WinJS). В этом приложении мы используем push для добавления надлежащих элементов. Выполнив небольшой анализ с помощью 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(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
Data.items.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
Data.items.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
Совет

Если необходимо использовать объект pages вместо Data.items, следует задать точку останова в коде для сохранения объекта pages в области.
Выберите символ зеленой стрелки, чтобы выполнить скрипт.
Нажмите клавиши Ctrl + Alt + M, чтобы переключить строку ввода консоли в однострочный режим, а затем выберите Очистить входную строку (красный значок «X») чтобы удалить код из строки ввода.
Введите Data.items.length = 3 в строке и нажмите клавишу ВВОД. Это позволяет удалить лишние элементы данных.
Проверьте имитатор или эмулятор телефона еще раз, и вы увидите, что необходимые изображения теперь отображаются на соответствующих страницах FlipView.
В обозревателе DOM отображается обновленный элемент DIV, и можно перейти в поддерево, чтобы найти нужные элементы IMG.
Остановите отладку, выбрав Отладка > Остановить отладку или нажав клавиши Shift + F5, а затем исправьте исходный код.

Полную страницу default.html с исправленным примером кода см. в разделе Отладка примера кода HTML, CSS и JavaScript.

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

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

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

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

В файле default.html приложения FlipView, созданного ранее, откройте контекстное меню функции updateImages(), а затем выберите Точка останова > Вставить точку останова.
Выберите Локальный компьютер или Emulator 8.1 WVGA, 4 дюйма, 512 МБ в раскрывающемся списке рядом с кнопкой Начать отладку на панели инструментов Отладка.
Выберите Отладка > Начать отладку или нажмите клавишу 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 для переключения между режимами.

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

В многострочном режиме строка ввода при выполнении скриптов не очищается. При переключении из многострочного режима в однострочный можно очистить строку ввода, нажав клавишу Очистить входную строку (красный значок «X»). Чтобы выполнить скрипт в многострочном режиме, нажмите клавиши Ctrl + Ввод или выберите символ стрелки в правом нижнем углу окна.

Переключение контекста выполнения скрипта

Окно консоли JavaScript позволяет одновременно взаимодействовать с одним контекстом выполнения, который представляет один экземпляр узла веб-платформы (WWAHost.exe). В некоторых сценариях приложение может запускать другой экземпляр узла, например при использовании iframe, контракта совместного доступа, рабочего веб-процесса или элемента управления WebView. Если выполняется другой экземпляр узла, можно выбрать другой контекст выполнения во время запуска приложения, выбрав контекст выполнения в списке Целевой объект.

На следующем рисунке показан список целевых объектов в окне консоли JavaScript.

Target selection in the JavaScript console window

Также можно переключать контекст выполнения с помощью команды cd, но необходимо знать имя другого контекста выполнения и используемая ссылка должна находиться в области. Список Целевой объект предоставляет более удобный доступ к другим контекстам выполнения.

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

Окно консоли JavaScript поддерживается на следующих платформах:

Магазин Windows и приложения для Магазина Windows Phone с использованием JavaScript и HTML
Internet Explorer 11 на платформе Windows 8,1
Internet Explorer 10 на платформе Windows 8

См. также

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

Краткое руководство. Отладка JavaScript с помощью консоли

Отладка с помощью окна консоли JavaScript

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

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

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

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

Переключение контекста выполнения скрипта

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

См. также

Задачи

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

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

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