Пошаговое видеоруководство. Отладка с помощью средств диагностики Visual Studio для Cordova

  • Статья

При разработке приложений Apache Cordova в Visual Studio можно использовать средства диагностики, такие как отладчик Visual Studio, проводник DOM и консоль JavaScript для устранения неполадок в приложениях.

В этой статье приведены этапы процедуры из видеоучебника по отладке приложения Cordova. Этапы соответствуют содержимому видеозаписи, которое следует за описанием средств и функций (примерно четыре минуты с начала ролика).

Предварительные требования

Для выполнения процедур в этом учебнике необходимо выполнить следующие действия:

  1. установить Visual Studio 2015 с Инструментами Visual Studio для Apache Cordova;

  2. загрузить пример приложения ToDoList AngularJS, распаковать его и открыть решение (SLN-файл) в Visual Studio.

Отладка с помощью средств диагностики

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

  1. Откройте пример приложения ToDoList AngularJS в Visual Studio и выберите Android в списке Платформы решения.

  2. Выберите в качестве целевого объекта отладки Ripple Nexus (Galaxy).

  3. Нажмите клавишу F5 для запуска отладчик.

  4. После загрузки приложения ToDoList в Ripple добавьте другой элемент задачи, чтобы проверить правильность работы приложения.

  5. В controllers.js добавьте точку останова в var text = $scope.newToDoText; в функции addToDo, щелкнув серое поля слева.

    $scope.addToDo = function () {
    var text = $scope.newToDoText; 
    if (!text) { 
    return; 
};

    С добавленной точкой останова окно редактора выглядит примерно следующим образом:

    Задание точки останова

  6. В запущенном приложении добавьте еще один элемент задачи ToDoList.

    Теперь при вводе элемента отладчик прерывает выполнение кода.

    Пошаговое выполнение кода

    В этой точке можно:

    • навести указатель мыши на переменные, чтобы увидеть их текущие значения (см. рисунок выше);

    • нажать клавишу F10, чтобы обойти код, что позволяет проверить обновленные значения;

    • открыть контекстное меню для выбранной переменной и выбрать Добавить контрольное значение;

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

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

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

  7. Во время выполнения приложения перейдите на вкладку Проводник DOM.

    В левой части проводника DOM имеется представление Live DOM.

  8. Нажмите кнопку Выбрать элемент и выберите что-нибудь, например элемент списка, в эмуляторе Ripple.

    Выбор элемента из DOM Explorer

    При выборе элемента соответствующий элемент выделится в проводнике DOM.

    Справа отображаются значения свойства CSS для выбранного элемента.

    • На вкладке «Стили» отображаются стили CSS, связанные с элементом (стили упорядочены по имени селектора CSS).

    • Вкладка «Вычисляемый» показывает значения свойства стиля CSS в режиме реального времени для элемента.

    • На вкладке «Макет» отображается рамочная модель элемента.

    Внести изменения в пользовательский интерфейс можно прямо в проводнике DOM (в представлении Live DOM, на вкладках «Стили» и «Макет»): изменения будут немедленно отражаться в запущенном приложении. Это упрощает отладку пользовательского интерфейса.

    Например, можно изменить размер шрифта для элемента списка (элемент <input>) на вкладке «Стили».

    Редактирование значения на вкладке "Стили"

  9. Выберите элемент, например расположение, в элементе «Список дел» (элемент <h3>) и измените значение.

    Изменения отобразятся в приложении в эмуляторе Ripple.

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

  10. Сообщения отображаются в выходных данных окна консоли JavaScript.

    Примечание

    Список команд, таких как console.log, см. в статье Команды консоли JavaScript.

  11. Чтобы проверить сценарий JavaScript, введите код JavaScript в поле ввода. Например, введите «document.», чтобы просмотреть сведения IntelliSense для объекта документа текущей страницы HTML, отображаемой в Ripple (Chrome).

    Использование консоли JavaScript

    Можно запустить код, нажав клавишу ВВОД (однострочный режим) или кнопку с зеленой стрелкой (многострочный режим).

  12. Нажмите клавишу ВВОД, чтобы просмотреть значение объекта документа в окне консоли.

    Совет

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