Найкращий спосіб налагодження програми Ionic на пристрої.

Моя впевнена техніка.

TL; DR

  • Переконайтеся, що ви можете розгорнути на свій пристрій.
  • Підключіть пристрій.
  • запустити:
іонна кордова запуск  --device -l --debug
  • Для Android відкрийте Chrome і перейдіть до веб-інспектора.
    Відкрийте ~ ⠇> Інші інструменти> Віддалені пристрої
    Виберіть свій пристрій та натисніть «Оглянути».
  • Для iOS відкрийте Safari та увімкніть програму меню.
    Відкрийте ~ Розробка> мій пристрій> моя ip-адреса.

Авторські безглузді розправи

Скажімо, ви створили найбільш приголомшливий додаток. Все чудово працює, поки ви не захочете додати плагін Cordova, який ви не надто знайомий. Тепер ваш додаток більше не працює у веб-переглядачі. І якщо ви хочете протестувати його на емуляторі чи пристрої, вам доведеться перебудовувати знову і знову, щоб побачити кожну зміну. І хоча реєстрація консолі JS працює, точки відключення налагодження не роблять. Це може зробити останню частину створення та налагодження вашої програми повільною і виснажливою справою.

Налагодження програм правильним шляхом є приголомшливим. Однак це може бути дотичним. Як і поганий допоміжний кабель, який потрібно утримувати в правильному положенні, інакше він перестане працювати. Іноді я можу змусити один раз працювати ідеально. Тоді я зроблю речі в неправильному порядку або торкаюсь чогось кумедного, і це не працюватиме знову.

Я витратив (даремно) тижні, намагаючись удосконалити цю статтю. Я сподіваюся, що на практиці я все-таки виправдую, але ще цього не зробив. Ця інформація дійсно важлива для розробки за допомогою Ionic, і я не міг знайти її в одному місці де-небудь ще. Тож цю статтю потрібно було написати так, як є. Це не ідеально, але принаймні доступно. Іншими словами, я нарешті повинен був сказати: "МАЙТЕ ЙОГО, МИ будемо жити!"

Я почав цю статтю 6 місяців тому, і з тих пір речі стали набагато кращими. XCode трохи менш вибагливий. Іонічне завантаження є стабільнішим. Ionic автоматично додає в білий список вашої IP-адреси. І так далі.

Необхідні інструменти

Обладнання

  • Mac. Я думаю, що існують способи створення iOS-додатків у Linux та Windows. Але давайте поглянемо на це, у Apple все дуже зафіксовано, і ви весь час будете плавати вгору, якщо просто не будете використовувати Mac.
  • Телефон Android або еквівалент iPod Touch на базі Android.
  • IPhone або iPod Touch.
  • (необов’язково) Планшет може бути корисним, але ви можете просто налаштувати розмір екрана за допомогою інструментів розробника у вашому браузері.
  • Жменя кабелів для кожного пристрою. Збережіть собі головний біль і просто викиньте їх та використовуйте інший, коли вони почнуть погано. Я купую їх у 6 пачок від Amazon.
  • (необов’язково) Роз'єм USB з кнопками живлення для кожної розетки дозволить заощадити багато підключення та відключення живлення. Це в свою чергу продовжить термін служби ваших кабелів.

Програмне забезпечення

  • Android Studio
  • XCode
  • Хром
  • Сафарі

Рішення

Перш ніж почати

Дістаньтеся далеко без Кордови. Потім пройдіться трохи далі, використовуючи глузування Кордова. Однак ви хочете протестувати на пристрої рано і часто. Хоча все, що ви робите, може бути основним веб-розробником, з JS не працює у WebView можуть бути дивні проблеми.

Я припускаю, що ви знаєте, як створити додаток Ionic. Якщо ні, то є багато навчальних посібників, тож пропустимо це. Я також припускаю, що ви знаєте, як отримати сертифікати та інше від Apple, і що ви знаєте, як розгорнутись на iOS та Android з командного рядка. Якщо ні, ще раз є підручники.

Вирішення основних проблем розгортання

Насамперед. Потрібно створити та запустити свою програму з Xcode та Android Studio. Якщо ви не можете запустити його в цих додатках, ви можете забути про командний рядок.

Більшість помилок iOS, які я бачив, викликані дозволами на підписання. Іноді їх можна виправити, знявши галочку та повторно встановивши прапорець "Автоматично керувати підписом", а потім повторно обрати команду. Переконайтесь, що ваші сертифікати та профілі резервування в порядку.

Більшість помилок Android викликані поганими кабелями. Якщо у вас є проблеми, відключіть і підключіть кабель від мережі. Потім переконайтесь, що налагодження увімкнено, а для вашого режиму USB встановлено значення PTP (фотографії).

Ніколи не сподівайся, що щось просто спрацює. Вам доведеться трохи закрутити його.

Іонний вигляд, емулятори, ваш пристрій та браузер матимуть різні проблеми з різних причин. Я вважаю за краще використовувати лише веб-переглядач і свій пристрій, щоб не витрачати стільки годин на налагодження проблем, які насправді не існують.

Щойно ви все налаштували і знаєте, що можете успішно розгортати додаток на своєму пристрої, все стає простішим. Виберіть потрібний пристрій та дотримуйтесь інструкцій.

Android

Підключіть свій Android.

З командного рядка запустіть:

іонна кордова запуск Android - пристрій -l --debug

Відкрийте Chrome і перейдіть до веб-інспектора. Клацніть три точки поруч із пунктом "Закрити" X. Перейдіть до Інші інструменти> Віддалені пристрої. Якщо ваш пристрій підключено до мережі, його слід побачити у розділі Пристрої. Смішне місце для цього. Клацніть свій пристрій. Якщо ваш сервер працює і працює, ви побачите IP-адресу сервера. Клацніть Перевірити. Відкриється нове вікно.

iOS

Підключіть свій пристрій iOS.

З командного рядка запустіть:

іонна кордова запуск ios --device -l --debug

Відкрийте Safari і відкрийте налаштування. Перейдіть на вкладку «Додатково» та натисніть «Показати меню« Розвивати »у рядку меню.» Закрийте налаштування. На панелі меню натисніть кнопку «Розвинути» та знайдіть свій пристрій. Знайшовши його, наведіть на нього курсор миші та натисніть IP в підменю. Відкриється нове вікно.

Знайдіть своє Блаженство

У Chrome ви побачите репліку екрана свого пристрою та отримаєте доступ до консолі, де можна побачити помилки. У Safari ви можете принаймні побачити консоль. Спробуйте змінити текст на сторінці, яку ви переглядаєте. Він перезавантажить перегляди так само, як якщо б ви робили іонну подачу. Різниця полягає в тому, що тепер ви можете бачити зміни, які з'являються на вашому пристрої. Ви також можете перервати виконання програми за допомогою налагоджувача та друкувати вихід з пристрою на консоль. Найкраще, що тепер ви можете експериментувати зі своїми плагінами Кордова з усією зручністю базової розробки браузера. І не забувайте, що ви можете вразити пекло своїх клієнтів, завантаживши їх додаток на їх пристрій та інтерактивно працюючи над дизайном.