Налагодження (debug) ionic додатків - Блог Front-End Developer - а
Після встановлення ionic framework і розгортання проекту, особисто у мене, насамперед постало питання: як правильно робити налагодження написаного коду? Цей процес для гібридних додатків менш очевидний, як нативних. Тому я постараюся описати його далі.
(Загальну інформацію про ionic я писав у попередній статті: Гібридні програми, розробка з Ionic)
Більшість часу розробки ви проведете за роботою з livereload сервером. Для запуску якого необхідно в корені проекту ввести наступну команду:
Ця команда запустить сервер на node.js з gulp watcher'ами, які стежитимуть за змінами вихідних файлів і одразу ж оновлюватимуть їх у вашому браузері.
У цій ситуації робота буде схожа на звичайну розробку сайту. Тобто налагодження (debug), можна робити за допомогою консолі, дивитися stack trace та перевіряти елементи. Рекомендую розробку вести в браузері Google Chrome, тому що движок webkit буде використовуватися як на Android, так і на iOS пристроях.
У chrome devtools можна вибрати режим роботи з responsive design, в якому браузер представиться як один із вибраних пристроїв. І, залежно від типу пристрою, будуть використані різні стилі. В даному випадку вибрано режим iPhone 5, а отже стилі будуть для iOS.
У ionic cli є можливість запустити сервер відразу під три платформи. Для цього необхідно ввести в консоль команду:
І тоді вікно браузера буде виглядати так:
Опції, які можна використовувати із командою serve:
З процесом розробки в браузері все просто, але як дізнатися, в чому причина, якщо помилка відбувається тільки на самому пристрої? нанасправді не складніше, ніж у браузері.
Налагодження (debug) на пристрої з Android
Після встановлення зібраного додатка на пристрій з Android, в першу чергу необхідно увімкнути налагодження через usb. Для цього зайдемо в Налаштування > Для розробників > Налагодження по USB (ставимо галочку).
Починаючи з версії 4.2.x, розділ «Для розробників» необхідно активувати. Для цього:
Після цього підключаємо пристрій до комп'ютера. Запускаємо ionic програму. На робочому комп'ютері запускаємо браузер Google Chrome і відкриваємо devtools.
Вибравши пристрій і натиснувши кнопку inspect побачимо наступний екран:
Зліва буде відображатися екран нашого пристрою та програма в ньому. Тепер робота та налагодження з програмою нічим не відрізняється від роботи з веб-сервером.
Якщо ж проблеми виникнуть на рівні нативної оболонки гібридної програми, то зробити налагодження та знайти в чому проблема можна за допомогою утиліти ddms, яка постачається разом із Android sdk.
Запустити її можна або з папки sdk (Android & sdk & tools & ddms) , або якщо встановлена Android studio (Tools & Android & Device Monitor).
Зліва необхідно вибрати процес і тоді внизу з'являться логи програми, в яких можна виявити помилки, що шукаються.
Налагодження (debug) на iOS пристрої
Для налагодження нативних помилок, програму необхідно запускати через Xcode. Для цього потрібно зайти до папки проекту => platforms => ios => запустити файл формату .xcodeproj з назвою проекту.
Запустивши цей файл, відкриється Xcode. Далі вибираємо наш підключений пристрій та натискаємо Run. Після цього програма буде встановлена на iOS пристрій і запущено. Лог роботи програми буде відображатися в нижнійчастини Xcode.
Тепер ви знаєте, як проводити тестування та налагодження (debug) ionic додатків за допомогою сервера або безпосередньо на самому пристрої.
Якщо вам корисний цей матеріал, підписуйтесь на мій блог, щоб отримувати повідомлення про нові публікації на теми: верстки, javascript та розробки кроссплатформенних мобільних додатків.