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

Я хочу отлаживать свое приложение PhoneGap в Xcode, но его консоль не может отображать ошибки javascript.

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

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

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

Подробное стороннее руководство

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

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

• Код Visual Studio
• Chrome DevTools
• Отладчик Mozilla

Кстати, удаленная отладка с Safari Web Inspector работает даже в сочетании с 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

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 есть несколько различий).

Я только что наткнулся на Вейнре

Это удаленный отладчик javascript для телефонных разговоров. Вы можете настроить свой собственный сервер 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

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

Обратите внимание, что вам понадобится git и т. Д., Но если вы редактируете свой проект телефонного разговора в 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 SimpleHTTPServer

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

  http://0.0.0.0:8000/
  

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

  В chrome это alt + command + i. Просмотрите вкладку консоли, возможно, потребуется обновить страницу.

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