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


Ответы:


83

Самый элегантный способ просмотра и отладки ошибок 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, устанавливать точки останова и т. Д.

дамп экрана меню Safari Develop в OS X

Документация 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+

2
Согласовано. Использование веб-инспектора Safari более надежно, чем Weinre, и намного быстрее обнаруживает ошибки, чем вставка в инструмент JS lint. Он также позволяет вам проверять элементы DOM и манипулировать ими, что очень удобно. Я бы рекомендовал людям использовать этот подход.
elMarquis

1
Вы не можете видеть первые загружаемые сообщения, так как для подключения требуется некоторое время.
Адриано Спадони,

как насчет производственных ошибок? Что касается WebView, приложение никогда не дает сбоев, но js внутри может вызывать ошибки. Поэтому вы не получаете отчетов о сбоях в iTunes Connect, но пользователи видят белый экран.
Mirko

@Mirko Веб-инспектор полезен только при отладке и не имеет отношения к iTunes Connect.
ᴠɪɴᴄᴇɴᴛ

@Mirko Вы можете создать свое приложение с помощью подключаемого модуля Cordova Crashlytics или использовать Google Firebase.
ᴠɪɴᴄᴇɴᴛ

47

Вставьте следующее где-нибудь в начале вашего документа, чтобы он запускался перед любым другим вашим 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

и пусть он сам найдет ошибку.

Надеюсь, это избавит от некоторых проблем отладки.


9

Обратите внимание, что с версией 0.9.2 (выпущенной сегодня) console.log стандартизирован для всех платформ для ведения журнала (при этом debug.log устарел).

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

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


1
У меня это не работает с Phonegap 1.1.0, Xcode 4.2 beta, а также с эмуляторами iPhone с iOS 4.3 и iPhone с iOS 5.0. Добавляю console.log ("сообщение"); звонки в места, где тревога («сообщение»); работает, но в журнал ничего не записывается. Кто-нибудь знает, что не так?
nmr

4
И ответ ... console.log не работает до тех пор, пока Phonegap не инициализируется. Я звонил в body.onload, что было слишком рано.
nmr

3

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


3

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

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

Вроде работает хорошо - пока очень впечатлен.


1
@ asgep1 Обе ссылки теперь мертвы! :(
MackieeE 02

3

Если вы используете iOS 6, вы можете просто прикрепить веб-инспектор сафари (в меню разработки настольного сафари) к своему приложению и получить полную отладку javascript.

Есть пара областей, в которых он немного ограничен - ошибки запуска и вызовы плагинов, - но он хорошо работает практически для всего остального.


1
Это, безусловно, лучший способ сделать это. Он работает как для подключенных устройств, так и для симулятора IOS и более надежен, чем попытки добиться того же с помощью Weinre.
elMarquis 09

3

Чтобы заставить работать отладку 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 и т. Д.).


2

Чтобы просмотреть все ошибки в консоли 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>

0

Поместите это в начало вашего 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>

1
Вопрос говорит в консоли, а не во взгляде.
ним

-2

Вот простой способ, который сработал для меня:

  • 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 открывает вкладку задач.


3
Это работает, только если ваше приложение представляет собой простое веб-приложение. Звонки в PhoneGap / функции устройства не работают в стандартном браузере.
Xavier Poinas
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.