Отладка (debug) ionic приложений

836
views

ionic debug

После установки ionic framework и разворачивания проекта, лично у меня, первым делом возник вопрос: как правильно делать отладку написаного кода? Данный процесс для гибридных приложений не столь очевидный, как для нативных. Поэтому я постараюсь доступно описать его далее.

(Общую информацию про ionic я писал в предыдущей статье: Гибридные приложения, разработка c Ionic)

Web-сервер

Большую часть времени разработки вы проведете за работой с livereload сервером. Для запуска которого необходимо находясь в корне проекта ввести следующую команду:

ionic serve

Данная команда запустит сервер на node.js с gulp watcher’ами, которые будут следить за изменениями исходных файлов и сразу же обновлять их в вашем браузере.

serve

В данной ситуации работа будет схожа с обычной разработкой сайта. То есть отладку ( debug ), можно делать с помощью консоли, смотреть stack trace и инспектировать элементы. Рекомендую разработку вести в браузере Google Chrome, так как движок webkit будет использоваться как на android, так и на iOS устройствах.

В chrome devtools можно выбрать режим работы с responsive design, в котором браузер представится как одно из выбранных устройств. И в зависимости от типа устройства, будут использованы различные стили. В данном случае выбран режим iphone 5, а следовательно стили будут для iOS.

В ionic cli присутствует возможность запустить сервер сразу под три платформы. Для этого необходимо ввести в консоль команду:

ionic serve --lab

И тогда окно браузера будет выглядеть следующим образом:

lab

Опции, которые можно использовать с командой serve:

[--consolelogs|-c] ...... Выводить console log в Ionic CLI 
[--serverlogs|-s] ....... Выводить логи сервера в Ionic CLI 
[--port|-p] ............. Задать HTTP порт сервера (8100 default) 
[--livereload-port|-i] .. Задать порт live reload (35729 default) 
[--nobrowser|-b] ........ Отключить запуск браузера
[--nolivereload|-r] ..... Не запускать live reload 
[--noproxy|-x] .......... Не использовать прокси

С процессом разработки в браузере все просто, но как узнать в чем причина, если ошибка происходит только на самом устройстве? На самом деле не сложнее чем в браузере.

Отладка (debug) на устройстве с Android

После установки собранного приложения на устройство с Android, в первую очередь необходимо включить отладку через usb. Для этого зайдем в Настройки > Для разработчиков > Отладка по USB (ставим галочку).

Начиная с версии 4.2.x раздел «Для разработчиков» необходимо активировать. Для этого:

  1. Заходим в меню телефона
  2. Запускаем «Настройки».
  3. Скроллим вниз до раздела «О телефоне» или «О планшете»,
  4. Находим пункт «Номер сборки» и тапаем по нему 7 раз.
  5. После этого раздел для разработчиков появится в настройках.

После этого подключаем устройство к компьютер. Запускаем ionic приложение. На рабочем компьютере запускаем браузер Google Chrome и в нем открываем devtools.

Далее в меню devtools (три точки справа), выбираем more tools => inspect devices. Или же введите в адресной строке браузера:

chrome://inspect/#devices

Выбрав устройство и нажав кнопку inspect увидим следующий экран:

chrome inspect devices

Слева будет отображаться экран нашего устройства и приложение в нем. Теперь работа и отладка с приложением ничем не отличается от работы с веб-сервером.

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

Запустить ее можно либо из папки sdk (Android > sdk > tools > ddms) , либо если установлена Android studio (Tools > Android > Android Device Monitor).

android ddms

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

Отладка (debug) на iOS устройстве

Тестировать и производить отладку приложения на iPhone схожа с Android устройством. Для инспектирования необходимо запустить приложение на iOS устройстве и Safari  на компьютере. Подключить устройство с помощью шнурка. После подключения телефона, в браузере в разделе «Разработка» появится раздел iPhone в котором можно начать инспектирование. После этого запустится обычная консоль разработчика и далее все как с обычным сайтом.

Стоит обратить внимание, что браузер увидит телефон и приложение только в случае, если приложение было установлено с компьютера. Если же запустить приложение установленное с App store или TestFlight, то браузер не увидит приложение из соображений безопасности.

Для отладки нативных ошибок, приложение необходимо запускать через Xcode. Для этого необходимо зайти в папку проекта => platforms => ios => запустить файл формата .xcodeproj с названием проекта.

Запустив этот файл, откроется Xcode. Далее выбираем наше подключенное устройство и нажимаем Run. После этого приложение будет установлено на iOS устройство и запущено. Лог работы приложения будет отображаться в нижней части Xcode.

Итог

Теперь вы знаете, как производить тестирование и отладку (debug) ionic приложений с помощью сервера или непосредственно на самом устройстве.

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

Подписаться на блог по эл. почте