Как увидеть ошибки javascript приложения PhoneGap в Xcode?

Самый элегантный способ просмотра и отладки ошибок JavaScript в приложении Cordova/PhoneGap — это присоединение веб-инспектора из браузера Safari к веб-представлению в приложении iOS (но, как уже упоминал Том Кларксон, вам потребуется как минимум iOS 6). ).

• На вашем iPad или iPhone используйте приложение «Настройки», чтобы включить веб-инспектор в дополнительных настройках Safari.
• Подключите ваше устройство к Mac через USB (после этого оно появится в меню «Разработка» Safari)
• Запустите свое приложение
• Перейдите к веб-представлению, которое вы хотите отладить
• На Mac в меню «Разработка Safari» выберите имя вашего устройства и приложение (его HTML-страницу) в его подменю.
• Откроется окно веб-инспектора, позволяющее просматривать DOM, устанавливать точки останова и т. д.

Документация Apple по настройке

Тщательный третий туториал для вечеринок

В качестве альтернативы вы можете подключить Chrome Web Inspector к устройствам iOS после установки iOS WebKit Debug Proxy. Это также открывает возможность проводить проверку из Linux или Windows.

Удаленный доступ к HTML, CSS и JavaScript вашей iOS в настоящее время стал еще более гибким, потому что вы можете установить RemoteDebug iOS WebKit Adapter поверх вышеупомянутого Debug Proxy. Поскольку этот адаптер преобразует протокол удаленной отладки WebKit в протокол отладки Chrome, они (на всех поддерживаемых платформах) становятся доступными в качестве альтернативных инструментов отладки и проверки:

• Код Visual Studio
• Инструменты разработчика Chrome
• Отладчик Mozilla

Кстати, удаленная отладка с помощью веб-инспектора Safari работает даже в сочетании с симулятором iOS.

Минимальная версия 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+? Please comment; always try Safari Technology Preview

iOS 11

Safari 11+

iOS 12

Safari 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, но плагин будет только для разработки ), а пока сделайте то, что Крис предложил выше, и поместите блоки try catch в код и используйте console.log

Чтобы быстро отловить возможные синтаксические ошибки, при разработке я загружаю страницу в настольный Safari и быстро обновляю ее с видимой консолью ошибок webkit.

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

Я только что наткнулся на Weinre

Это удаленный отладчик javascript для телефонной связи. Вы можете либо настроить свой собственный сервер Weinre, либо использовать сервер на http://debug.phonegap.com/.

Кажется, работает хорошо - пока очень впечатлен.

Если вы используете iOS 6, вы можете просто подключить веб-инспектор Safari (в меню разработки настольного Safari) к своему приложению и получить полную отладку 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

Это позволит отображать команду javascript console.log('some string') в XCode.

Обратите внимание, что вам понадобится git и т. д., но если вы редактируете свой проект phonegap в xcode, он, скорее всего, у вас будет!

PS Убедитесь, что вы установили подключаемый модуль сценария cordova.js перед любым использованием console.log.

<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 Простой HTTP-сервер

• Просмотрите страницу в сафари, введя адрес HTTP-сервера в браузере, для меня URL-адрес был таким:

  http://0.0.0.0:8000/
  

• Открытые инструменты разработчика:

  В хроме это Alt+Command+I. Просмотрите вкладку консоли, возможно, потребуется обновить страницу.

  В Safari: Safari -> «Настройки» -> «Дополнительно» -> установите флажок «Показать меню разработки». Меню "Разработка" --> Показать консоль ошибок (или alt+command+c). Обновите страницу. Нажатие CTRL+5 открывает вкладку проблем.