Xcode에서 PhoneGap 앱의 자바 스크립트 오류를 ​​확인하는 방법은 무엇입니까?

Xcode에서 PhoneGap 앱을 디버깅하고 싶지만 콘솔에서 자바 스크립트 오류를 ​​표시 할 수 없습니다.

Cordova / PhoneGap 앱에서 JavaScript 오류를보고 디버그하는 가장 우아한 방법은 Safari 브라우저의 Web Inspector를 iOS 앱의 Web View에 연결하는 것입니다 (하지만 이미 언급 한 Tom Clarkson과 마찬가지로 iOS 6 이상이 필요합니다. ).

• iPad 또는 iPhone에서 설정 앱을 사용하여 Safari의 고급 설정에서 Web Inspector를 활성화하십시오.
• USB를 통해 기기를 Mac에 연결합니다 (그러면 Safari의 개발 메뉴 아래에 나타납니다).
• 앱 시작
• 디버깅 할 웹보기로 이동합니다.
• Mac의 Safari 개발 메뉴에서 하위 메뉴에서 장치 이름과 앱 (HTML 페이지)을 선택합니다.
• Web Inspector 창이 열리면 DOM을 탐색하고 중단 점을 설정할 수 있습니다.

이 설정에 대한 Apples 문서

철저한 타사 자습서

또는 iOS WebKit Debug Proxy를 설치 한 후 Chrome의 Web Inspector를 iOS 기기에 연결할 수 있습니다 . 이것은 또한 Linux 또는 Windows에서 검사를 수행 할 수있는 기능을 제공합니다.

앞서 언급 한 디버그 프록시 위에 RemoteDebug iOS WebKit 어댑터 를 설치할 수 있기 때문에 iOS의 HTML, CSS 및 JavaScript에 대한 원격 액세스가 요즘 훨씬 더 유연 해졌습니다 . 이 어댑터는 WebKit 원격 디버깅 프로토콜 을 Chrome 디버깅 프로토콜 로 변환하므로 (지원되는 모든 플랫폼에서) 대체 디버깅 및 검사 도구로 사용할 수 있습니다.

• Visual Studio 코드
• Chrome DevTools
• Mozilla 디버거

BTW, Safari Web Inspector를 사용한 원격 디버깅은 iOS 시뮬레이터와 결합하여도 작동합니다.

iOS 버전 별 데스크톱 Safari의 최소 버전

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>

Xcode 콘솔 창에서 Javascript 오류에 대한 세부 정보를 확인하십시오.

업데이트 : 위의 기술은 정의되지 않은 변수와 같은 오류를 기록합니다. 그러나 쉼표 누락과 같은 구문 오류로 인해 아무것도 로깅하지 않고 전체 스크립트가 중단됩니다.

따라서 onDeviceReady 함수 의 시작 부분에 다음을 추가해야 합니다.

console.log('Javascript OK');

앱이 시작될 때 로그 창에 "JavaScript OK"가 표시되지 않으면 어딘가에 구문 오류가 있음을 의미합니다.

누락 된 쉼표를 찾기 위해 가장 쉬운 방법은 다음과 같은 Javascript 유효성 검사기에 코드를 붙여 넣는 것입니다.

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

그리고 당신을 위해 오류를 찾도록하십시오.

디버깅으로 인한 고통을 덜어 주길 바랍니다.

0.9.2 (오늘 릴리스 됨)에서 console.log는 로깅을 위해 플랫폼 전반에서 표준화되었습니다 (debug.log는 더 이상 사용되지 않음).

모든 오류를 잡을 수있는 iOS UIWebView에 노출되지 않은 데스크톱 WebView에서 사용할 수있는 기능이 있습니다. ), 그러나 지금은 Kris가 위에서 제안한 것을 수행하고 코드에 try catch 블록을 넣고 console.log를 사용하십시오.

가능한 구문 오류를 빠르게 포착하기 위해 개발할 때 데스크톱 Safari에 페이지를로드하고 웹킷 오류 콘솔을 볼 수 있도록 빠르게 새로 고칩니다.

debug.log는 Phonegap의 XCode 콘솔에 메시지를 보내지 만 (예외 결과를 기록하거나 일부 디버깅을 수행 할 수 있음) Safari에서 다른 자바 스크립트 오류를 ​​디버깅해야한다는 것은 맞습니다 (데스크톱 또는 디버그 콘솔이 켜져있는 iPhone에서). iPhone에서 실행되어 발생한 Javascript 오류를 아직 찾지 못했으며 Safari에서 콘솔을 켠 상태에서 디버깅 할 때 나타나지 않았습니다 (iPhone의 WebView와 Safari간에 몇 가지 차이점이 있음을 알고 있습니다).

방금 Weinre 를 만났습니다.

phonegap을위한 원격 자바 스크립트 디버거입니다. 자체 Weinre 서버를 설정하거나 http://debug.phonegap.com/ 에서 사용할 수 있습니다.

잘 작동하는 것 같습니다. 지금까지 매우 감동했습니다.

iOS 6을 사용하는 경우 데스크톱 safari의 개발 메뉴에있는 safari 웹 검사기를 앱에 연결하기 만하면 전체 자바 스크립트 디버깅이 가능합니다.

시작 오류 및 플러그인 호출과 같이 약간 제한되는 몇 가지 영역이 있지만 거의 다른 모든 영역에서 잘 작동합니다.

Xcode에서 자바 스크립트 디버깅이 작동하도록하려면 다음을 살펴 보겠습니다.

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

추가 문제 해결에 관한 한 ...
시작하려면 PC의 safari에서 앱을 실행하고 safari의 디버거 (또는 둘 다 유사한 렌더링 엔진을 실행하는 크롬)를 사용할 수 있습니다. 이것은 고급 로직 오류 및 많은 API 문제에 영향을 미치지 않지만 최소한 많은 문제 (기본 자바 스크립트, HTML5 등 ...)를 해결하는 데 도움이 될 것입니다.

자바 스크립트 콘솔에서 모든 오류를 보려면이 이벤트 리스너를 사용하는 데 동의합니다.

<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

이렇게하면 자바 스크립트 명령 'console.log ('some string ')이 XCode에 표시됩니다.

git 등이 필요하지만 xcode에서 phonegap 프로젝트를 편집하는 경우 아마도 그것을 가질 것입니다!

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>

나를 위해 일한 간단한 방법은 다음과 같습니다.

• 터미널에 index.html 파일이있는 디렉토리로 이동합니다.

• 다음을 호출하여 Python을 사용하여 http 서버를 시작합니다 (python 2.7을 사용했습니다).

  파이썬 -m SimpleHTTPServer

• 브라우저에 HTTPServer의 주소를 입력하여 safari에서 페이지를 봅니다. URL은 다음과 같습니다.

  http://0.0.0.0:8000/
  

• 개발자 도구 열기 :

  크롬에서는 alt + command + i입니다. 콘솔 탭을보고 페이지를 새로 고쳐야 할 수 있습니다.

  Safari에서 : Safari-> 환경 설정-> 고급-> "개발 메뉴 표시"를 선택합니다. 개발 메뉴-> 오류 콘솔 표시 (또는 alt + command + c). 페이지를 새로 고칩니다. CTRL + 5를 누르면 문제 탭이 열립니다.