Як побачити помилки javascript програми PhoneGap у Xcode?

Я хочу налагодити свою програму PhoneGap у Xcode, але її консоль не може відображати помилки JavaScript.

Найелегантніший спосіб перегляду та налагодження помилок JavaScript у вашому додатку Cordova / PhoneGap - це приєднання веб-інспектора з браузера Safari до веб-перегляду у вашому додатку для iOS (але, як вже згадувалося Томом Кларксоном, вам знадобиться принаймні iOS 6 ).

• На своєму iPad або iPhone використовуйте програму «Налаштування», щоб увімкнути Web Inspector у розширених налаштуваннях Safari
• Підключіть пристрій до Mac через USB (він з’явиться в меню Розробка Safari)
• Запустіть програму
• Перейдіть до веб-перегляду, який потрібно налагодити
• На Mac у меню Safari Develop виберіть ім’я вашого пристрою та програму (її HTML-сторінку) з її підменю
• Відкриється вікно Web Inspector, що дозволяє переглядати DOM, встановлювати точки зупинки тощо.

Яблучна документація щодо налаштування цього

Ретельний підручник третьої сторони

Крім того, ви можете підключити веб-інспектор Chrome до пристроїв iOS після встановлення проксі-сервера для налагодження iOS WebKit . Це також відкриває можливість робити перевірку з Linux або Windows.

Віддалений доступ до HTML, CSS та JavaScript вашого iOS на сьогодні став ще більш гнучким, оскільки ви можете встановити RemoteDebug iOS WebKit Adapter поверх вищезгаданого проксі-сервера для налагодження. Оскільки цей адаптер перетворює WebKit вилученого налагодження протоколу до протоколу Chrome Debugging , вони (на всіх підтримуваних платформах їх) стають доступними в якості альтернативних налагодження і інструментів контролю:

• Код Visual Studio
• Chrome DevTools
• Налагоджувач Mozilla

До речі, віддалена налагодження за допомогою веб-інспектора Safari працює навіть у поєднанні з iOS Simulator.

Мінімальна версія Desktop Safari для кожної версії iOS

Для кожної версії iOS вам знадобиться певна мінімальна версія Desktop Safari, щоб використовувати віддалену веб-перевірку, див. Список нижче.

iOS 6

Safari 6+

iOS 7

Safari 6.1+

iOS 8

Safari 7.1+

iOS 9

Safari 8+

iOS 10

Safari 9 + / 10 +? Будь ласка, коментуйте; завжди пробуйте Safari Technology Preview

iOS 11

Сафарі 11+

iOS 12

Сафарі 12+

Вставте наступне десь біля початку вашого документа, щоб він виконувався перед будь-яким іншим вашим JavaScript.

<script type="text/javascript">
    window.onerror = function(message, url, lineNumber) {
        console.log("Error: "+message+" in "+url+" at line "+lineNumber);
    }
</script>

І насолоджуйтесь переглядом деталей ваших помилок Javascript у вікні консолі Xcode.

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

Тому вам слід додати наступне до початку функції onDeviceReady :

console.log('Javascript OK');

Якщо ви не бачите, що "JavaScript OK" з’являється у вашому вікні журналу під час запуску програми, то це означає, що у вас десь є синтаксична помилка.

Щоб зберегти пошук на відсутність коми, найпростіше вставити свій код у валідатор Javascript, такий як цей:

http://www.javascriptlint.com/online_lint.php

і нехай знайде для вас помилку.

Сподіваємось, це позбавляє біль від налагодження.

Зверніть увагу, що з версією 0.9.2 (випущена сьогодні) console.log був стандартизований для всіх платформ для ведення журналу (із застарілим debug.log).

На робочому столі WebView є функція, яка не відображається в iOS UIWebView, яка виявляє всі помилки (я намагаюся зламати цю функцію в плагіні, який використовує приватні API, але плагін буде призначений лише для розробки ), але наразі зробіть те, що запропонував Кріс вище, і поставте спробу catch-блоків на код і використовуйте console.log

Щоб швидко виявити можливі синтаксичні помилки, під час розробки я завантажую сторінку в Safari для робочого столу та швидко оновлюю її за допомогою консолі помилок webkit, яку можна переглянути.

debug.log надсилатиме повідомлення на консоль XCode у Phonegap (дозволяючи або реєструвати результат винятку, або виконувати певну налагодження), однак, ви праві, що вам доведеться налагоджувати інші помилки javascript у Safari (на робочому столі або на iphone з увімкненою консоллю налагодження). Я ще не знайшов помилки Javascript, яка була спричинена запуском на iphone і не була присутньою під час налагодження з увімкненою консоллю в Safari (хоча я знаю, що є кілька відмінностей між WebView та Safari на iphone).

Я щойно натрапив на Вайнре

Це віддалений налагоджувач JavaScript для phonegap. Ви можете або налаштувати власний сервер Weinre, або скористатися сервером за адресою http://debug.phonegap.com/

Здається, це працює добре - поки що це дуже вразило.

Якщо ви використовуєте iOS 6, ви можете просто підключити веб-інспектор сафарі (у меню розробки настільного сафарі) до свого додатка та отримати повну налагодження JavaScript.

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

Щоб зробити роботу з налагодженням JavaScript у Xcode, я б подивився на наступне.

http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/

Що стосується додаткового усунення несправностей ...
Для початку ви можете запустити програму в сафарі на своєму ПК та використовувати налагоджувач сафарі (або хром, оскільки обидва працюють на схожих механізмах візуалізації). Це не вплине на розширені логічні помилки та багато ваших проблем з api, але принаймні має допомогти у вирішенні багатьох проблем (базовий javascript, HTML5 тощо).

Щоб переглянути всі помилки в консолі javascript, я погоджуюсь використовувати цей прослуховувач подій

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

Однак, якщо у вас не встановлений плагін cordova, він не відображатиметься на "консолі" XCodes. Перейдіть до папки проекту та введіть:

? cordova plugin add cordova-plugin-console

Це дозволить показати на XCode команду javascript 'console.log (' деякий рядок ').

Зверніть увагу, що вам знадобиться git тощо ... але якщо ви редагуєте свій проект phonegap у xcode, він, швидше за все, буде у вас!

PS Перед будь-яким використанням console.log переконайтеся, що ви вставили плагін скрипта cordova.js

<script type="text/javascript" src="/cordova.js"></script>

Помістіть це на початку вашого index.html

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

Ось простий спосіб, який мені працював:

• cd до каталогу, що містить файл index.html у терміналі

• Запустіть сервер http за допомогою python, викликаючи (я використовував python 2.7):

  python -m SimpleHTTPServer

• Перегляньте сторінку в сафарі, ввівши в браузер адресу HTTPServer, для мене URL-адреса була:

  http://0.0.0.0:8000/
  

• Відкрийте інструменти розробника:

  У chrome це alt + command + i. Перейдіть на вкладку консолі, можливо, доведеться оновити сторінку.

  У Safari: Safari -> Налаштування -> Додатково -> встановіть прапорець "Показати меню розробки". Меню розробки -> Показати консоль помилок (або alt + command + c). Оновіть сторінку. Натискання CTRL + 5 відкриває вкладку проблем.