Отладка приложения, созданного с помощью Visual Studio Tools для Apache Cordova

Статья
09/13/2015

В Visual Studio 2013 инструменты Cordova выпущены в виде предварительной (CTP) версии. Инструменты Cordova будут выпущены как часть Visual Studio 2015, и рекомендуется использовать Visual Studio 2015 RTM для разработки приложений с помощью инструментов Visual Studio для Apache Cordova. Visual Studio можно скачать из Центра загрузки Майкрософт.

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

Устройство или операционная система	Отладчик Visual Studio поддерживается?	Консольные сообщения поддерживаются?	Решение
Android 4.4 или более поздней версии	Да	Да	—
Android 2.3.3–4.3	Нет (см. раздел Сведения о jsHybugger ниже в этой статье)	Да	—
iOS 6, 7, 8	Да	Да	—
Windows 8.1 (Магазин), Windows Phone 8.1, Windows 10	Да	Да	—
Windows Phone 8	Нет	Нет (используйте подключаемый модуль Console)	Используйте Web Inspector Remote (weinre) или подключаемый модуль Console. См. раздел Отладка Windows 8 и Windows Phone 8 далее в этой статье.

Примечание

Если используется система Windows 7, то приложения можно разрабатывать для iOS и Android, но не для Windows или Windows Phone.Для запуска приложения на Windows Server 2012 R2 необходимо включить параметр Desktop Experience.

Содержание этой статьи

Отладка Android и iOS в Apache Ripple
Отладка Android в эмуляторе на устройстве
Отладка iOS в эмуляторе на устройстве
Отладка Windows 8 и Windows Phone 8

Предупреждение

Видеоролик и соответствующий учебник, в котором указано, какое средство необходимо использовать для отладки: отладчик Visual Studio, проводник DOM или консоль JavaScript, см. в разделе Пошаговое видеоруководство. Отладка с помощью средств диагностики Visual Studio для Cordova.

Отладка Android и iOS в Apache Ripple

Отладчик Visual Studio можно присоединить к приложению, которое выполняется в эмуляторе Apache Ripple.

Отладка в эмуляторе Ripple

Откройте приложение в Visual Studio и выберите iOS или Android из списка Платформы решений, а затем выберите один из целевых объектов развертывания, указывающих эмулятор Ripple.
Нажмите клавишу F5.

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

На следующем рисунке показана точка останова, заданная в редакторе кода.

Здесь отладчик Visual Studio фиксирует точку останова во время отладки в эмуляторе Ripple.

Важно!

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

Следующие кросс-платформенные команды консоли JavaScript в настоящее время поддерживаются Ripple.

$
$$
$0-$4
$_
clear
console.assert
console.clear
console.count
console.debug
console.dir
console.dirxml
console.error
console.group
console.groupCollapsed
console.groupEnd
console.info
console.log
console.time
console.timeEnd
console.warn
dir

Набор поддерживаемых команд консоли и их поведение предоставляются браузером хоста, а не Visual Studio. Дополнительные команды, которые, возможно, поддерживаются Ripple, см. в документации браузера Chrome.

Совет

Консоль JavaScript в Visual Studio предоставляет сведения IntelliSense, чтобы облегчить идентификацию этих команд и других объектов на странице.

Проводник DOM позволяет выполнять отладку HTML и CSS. Функции, доступные на вкладках Стили, Вычисленные и Макет проводника DOM, поддерживаются Ripple.

Примечание

Дополнительные сведения о поддержке процесса отладки см. в разделе Известные проблемы.

Отладка Android в эмуляторе или на устройстве

Отладчик Visual Studio можно присоединить к эмулятору Android или к устройству Android для отладки приложения на платформе Android 4.4.

При использовании версии Android 2.3.3–4.3 можно установить подключаемый модуль jsHybugger, который позволит выполнять диагностику Android (проводник DOM, консоль и отладка). Этот подключаемый модуль локально инструментирует код, что позволяет включить удаленную отладку на устройствах и эмуляторах Android, а также поддерживает Android 2.3.3 и более поздние версии.

Отладка на платформе Android 4.4

Откройте проект в Visual Studio, выберите Android из списка Платформы решений и выберите один из целевых объектов развертывания Android.
Нажмите клавишу F5.

При использовании Android 4.4 можно попадать в точки останова, установленные в коде, взаимодействовать со страницей с использованием консоли JavaScript и использовать проводник DOM.

Важно!

Отладчик Visual Studio не будет останавливаться в точках останова, которые обнаруживаются перед загрузкой первой страницы в эмуляторах Android 4.4 или устройствах Android.Тем не менее, отладчик будет останавливаться в этих точках останова после выполнения следующей команды на консоли JavaScript:window.location.reload()

Отладка в среде Android 2.3.3–4.3 с помощью подключаемого модуля jsHybugger

Откройте проект Cordova в Visual Studio.
Создайте в проекте папку plugins, если она еще не создана. (Для добавления папки откройте контекстное меню для своего проекта в обозревателе решений, выберите Добавить, Новая папкаи укажите имя для папки plugins.)
Загрузите подключаемый модуль jsHybugger и извлеките его содержимое.

Примечание

Дополнительные сведения о данном подключаемом модуле см. на веб-сайте jsHybugger.Подключаемый модуль можно использовать без лицензии, но сеансы отладки будут ограничены и длиться не более двух минут.Для обеспечения неограниченной отладки необходимо приобрести лицензию на jshybugger.Следующие инструкции предполагают, что вы приобрели лицензию и загрузили файл лицензии jshybugger_license.xml.
Поместите распакованную папку jshybugger-plugin-x.x.x в папке plugins своего проекта.
Поместите файл jshybugger_license.xml в корне своего проекта.

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

Можно взаимодействовать со страницей с помощью консоли JavaScript и использовать проводник DOM для изучения кода HTML и CSS.

Важно!

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

Подключаемый модуль не оказывает никакого влияния эффекта, когда вы используете эмулятор Apache Ripple или выполняете отладку на устройствах и эмуляторах Android 4.4. Поэтому, при переключении между целевыми объектами Android во время тестирования удалять его не нужно.

Следующие кросс-платформенные команды консоли JavaScript в настоящее время поддерживаются для Android.

$
$$
$0-$4
$_
clear
console.assert
console.clear
console.count
console.debug
console.dir
console.dirxml
console.error
console.group
console.groupCollapsed
console.groupEnd
console.info
console.log
console.time
console.timeEnd
console.warn
dir

Набор поддерживаемых команд консоли и их поведение предоставляются браузером хоста, а не Visual Studio. Дополнительные команды, которые, возможно, поддерживаются Android, см. в документации браузера Chrome для Android.

Совет

Функции, доступные на вкладках Стили, Вычисленные и Макет проводника DOM, поддерживаются в Android.

Предупреждение

Другие инструменты отладки и диагностики, доступные для Windows, в настоящее время для Android отсутствуют.Мы продолжим совершенствовать поддержку процесса отладки для Android в последующих версиях.Дополнительные сведения о поддержке процесса отладки см. в разделе Известные проблемы.

Отладка iOS в эмуляторе или на устройстве

Отладчик Visual Studio можно присоединить к эмулятору или устройству iOS. Поддерживаются версии iOS 6, 7 и 8.

Примечание

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

Отладка в среде iOS

Убедитесь, что на компьютере Mac установлен агент remotebuild, агент запущен, а среда Visual Studio настроена для подключения к агенту.
Если отладка выполняется на фактическом устройстве, перейдите на устройство и выберите Параметры, Safari, Дополнительно, а затем включите веб-инспектор.

Это позволит осуществлять удаленную отладку на устройстве (это действие не требуется для отладки в эмуляторе iOS).
Откройте приложение в Visual Studio и выберите iOS в списке Платформы решений, а затем выберите целевой объект развертывания.

Для отладки устройства, подключенного к удаленному агенту на компьютере Mac, в качестве целевого объекта развертывания выберите Удаленное устройство. Для устройства, подключенного к ПК, выберите Локальное устройство.
Нажмите клавишу F5.

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

Важно!

Отладчик Visual Studio не будет останавливаться в точках останова, которые обнаруживаются перед загрузкой первой страницы в эмуляторах iOS или на устройствах iOS.Тем не менее, отладчик будет останавливаться в этих точках останова после выполнения следующей команды на консоли JavaScript:window.location.reload()

Следующие кросс-платформенные команды консоли JavaScript в настоящее время поддерживаются для iOS.

$
$$
$0-$4
$_
clear
console.assert
console.clear
console.count
console.debug
console.dir
console.dirxml
console.error
console.group
console.groupCollapsed
console.groupEnd
console.info
console.log
console.time
console.timeEnd
console.warn
dir

Набор поддерживаемых команд консоли и их поведение предоставляются браузером хоста, а не Visual Studio. Дополнительные команды, которые, возможно, поддерживаются iOS, см. в документации браузера iOS Safari.

Совет

Функции, доступные на вкладках Стили, Вычисленные и Макет проводника DOM, поддерживаются iOS.

Предупреждение

Мы продолжим совершенствовать поддержку процесса отладки в последующих версиях.Дополнительные сведения о поддержке процесса отладки см. в разделе Известные проблемы.

Отладка Windows и Windows Phone

Для приложений Windows 8, Windows 8.1 и Windows Phone 8.1 можно использовать те же средства отладки Visual Studio, что и для любого приложения Магазина Windows, созданного с использованием HTML и JavaScript. Дополнительные сведения см. в разделе Отладка приложений из магазина в Visual Studio в центре разработчиков Windows.

Невозможно присоединить отладчик Visual Studio для приложений Windows Phone 8. Вместо этого можно использовать инспектор Web Inspector Remote (weinre), который описан в блоге по открытым технологиям Майкрософт.

Кроме применения weinre для отладки Windows Phone 8, к своему приложению можно добавить подключаемый модуль Console, построить свое приложение, а затем открыть в Visual Studio созданный собственный проект Windows Phone 8. Собственный проект можно найти в папке platforms\wp8. В открытом собственном проекте для просмотра выходных данных на консоли можно использовать окно вывода. Дополнительные сведения о доступе к собственным проектам см. в разделе Доступ к собственному проекту Cordova.

Предупреждение

Изменения, внесенные в собственный проект, будет перезаписываться при перестроении приложения Cordova.

Загрузка средств Получить средства Visual Studio Tools для Apache Cordova или узнать больше