코르도바 앱을 디버깅하는 실제 솔루션이 있습니까?

지난 이틀 동안 Cordova 3.2를 사용하여 생성하고 Android 2.3 장치에 배포 한 HTML5 앱을 디버깅하는 방법을 알아 내려고 노력했습니다. 내가 본 모든 기사 / 게시물은 실제 솔루션보다는 해킹을 제공합니다 : (그리고 대부분의 경우 내 경우에는 작동하지 않습니다 .CSS 스타일과 내 앱 내부의 Angularjs 코드를 디버깅하십시오 ..

지금까지 테스트했습니다.

debug.phonegap.com

스크립트를 index.html파일에 삽입 한 후 debug.phonegap.com에서 생성 된 URL을 방문했지만 아무 일도 일어나지 않습니다. 빈 페이지 만

와인 레

내가 찾은 대부분의 기사는 Jar 파일을 계산하는 구식 Github 저장소를 가리키고 있습니다.

가장자리 검사

그것은 작동하고 모바일 내 PC에서 탐색하는 웹 페이지를 보여줍니다. 그러나 문제는 phonegap 앱을 실행하는 브라우저 이외의 다른 통합 브라우저 (또는 에뮬레이터)를 사용한다는 것입니다. 결과가 정확하지 않습니다.

크롬 에뮬레이터

Edge inspect와 동일합니다. Android 2.3과 함께 제공되는 실제 웹 키트 v530을 볼 수 없습니다.

꿈의 솔루션

완벽한 솔루션은 데스크톱 브라우저를 Android 2.3 플랫폼과 동일한 브라우저로 전환 할 수있는 Chrome (데스크톱)의 확장입니다. 웹 에뮬레이션 v 530을 사용하는 브라우저 자체만으로 에뮬레이션이 필요 없습니다.

불행히도 그러한 해결책은 존재하지 않습니다 :( 또는 내가 틀렸습니까?

어떤 제안?

안드로이드 용 :

당신은 당신의 안드로이드 장치 내에서 "USB 원격 디버거"를 활성화하고 USB 케이블로 연결해야합니다. 그런 다음 장치에서 응용 프로그램을 엽니 다. Chrome은 원격 브라우저를 감지하며 Chrome을 로컬로 사용할 때와 동일한 방식으로 콘솔을 볼 수 있습니다.

chrome://inspect/#devicesChrome 브라우저 에서이 링크를 사용하십시오 (탐색 모음에 붙여 넣어야 함).

앱이 기기에서 충돌하는 경우 브라우저 내에서 콘솔 로그 만보고 어떻게되는지 확인하면됩니다. 또한 로컬 브라우저에서와 동일한 방식으로 기능을 추가하고 변수를 변경하며 함수를 재정의 할 수 있습니다.

수행 할 단계에 대한 자세한 내용은 이 기사 를 읽으십시오 .

Android 4.4 이상을 실행하는 기기에서만 작동합니다.

iOS의 경우 :

iOS 용 Safari를 사용하려면 다음 단계를 수행하십시오.

1. iOS 기기에서 설정> Safari> 고급> 웹 검사기로 이동하여 웹 검사기를 활성화하십시오

2. iOS 기기에서 Safari를 엽니 다.

3. USB를 통해 컴퓨터에 연결하십시오.

컴퓨터에서 Safari를 엽니 다.

5. Safari의 메뉴에서 개발로 이동하여 장비 이름을 찾으십시오.

6. 디버깅하려는 탭을 선택하십시오.

주의

이 답변은 구식 (2014 년 1 월) 이후 많은 새로운 디버깅 솔루션을 사용할 수 있습니다.

나는 마침내 그것을 작동시켰다! weinre와 cordova (Phonegap 빌드 없음)를 사용하고 동일한 문제에 직면 할 수있는 미래 개발자를위한 번거 로움을 줄이기 위해 YouTube 자습서를 만들었습니다 .)

Android 4.4 이상 기기를 사용할 수있는 경우 앱의 내부 WebView에서도 Chrome 원격 디버깅을 사용할 수 있습니다. Weinre보다 훨씬 나은 디버거이지만 키는 최신 Android 버전을 사용하고 있습니다.

최신 Cordova 빌드는 디버그 빌드 인 경우 (--release 빌드에서 해제 된 경우) 이러한 종류의 디버깅을 자동으로 활성화합니다.

나에게 가장 좋은 것은 Chrome 디버거를 연결하는 것입니다.

이를 위해서는 에뮬레이터 또는 장치에서 $ cordova 에뮬레이션을 사용하여 앱을 실행하십시오.

그런 다음 Chrome을 열고 chrome://inspect/

실행중인 앱이 포함 된 목록이 표시됩니다. 앱이 있어야합니다. "검사"를 클릭하십시오.

개발자 도구가 포함 된 새 창이 열립니다. 거기에서 "콘솔"을 클릭하여 오류를 확인할 수 있습니다

앱에서 Cordova 3.3 이상을 실행 중이고 기기에서 Android 4.4 이상을 실행중인 경우 Chrome 원격 웹뷰 디버깅 을 사용 하여 Cordova 앱을 디버깅 할 수 있습니다.

그렇게하려면 먼저 휴대 전화에서 USB 디버깅을 활성화해야합니다.

그런 다음 "장치 검사"탭을여십시오. Chrome에서 설정 > 추가 도구 > 기기 검사로 이동합니다 .

컴퓨터에 연결된 상태에서 장치에서 앱을 시작하면 장치 목록에 웹뷰가 나타납니다. Webview의 "검사"링크를 클릭하면 Webview에 대한 디버그 도구가 나타납니다.

다음은 그 방법을 완전히 설명하는 기사입니다. http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

'GapDebug' 를 사용해 보셨습니까 ? 무료입니다.

OS X 및 Windows에서 통합 디버깅 환경을 제공하기 위해 Safari Webkit Inspector 및 Chrome Dev Tools 버전을 통합 한 것으로 보입니다.

또 다른 옵션은 Visual Studio이며 Cordova 앱 디버깅을위한 시험판 지원 기능이 있습니다 .

통합 된 디버깅 경험 . 플랫폼 간 개발에는 종종 각 장치, 에뮬레이터 또는 시뮬레이터를 디버깅하기 위해 다른 도구가 필요합니다. 도구가 다르면 장치를 전환 할 때마다 작업 흐름이 다르고 생산성이 저하됩니다. Visual Studio를 사용하면 Windows, Android 에뮬레이터, 연결된 Android 장치, iOS 장치 및 에뮬레이터 및 Apache Ripple 에뮬레이터를 포함한 모든 배포 대상에 동일한 세계적 수준의 디버깅 도구를 사용할 수 있습니다.

Microsoft가 Visual Studio Community Edition을 무료로 출시 했으므로 무료 로 사용해 볼 수 있습니다. Visual Studio 및 Apache Cordova 용 Visual Studio 도구를 모두 다운로드해야합니다 .

내가 아는 한 2.2에서 4.3까지 Android 플랫폼 용 Cordova 앱에서 실제 디버깅을위한 유일한 생산 도구는 jshybugger 입니다. Weinre 는 디버거가 아닌 관리자입니다. JsHybugger는 코드를 계측하여 Android WebView 내에서 디버깅 할 수 있습니다.

Genymotion을 사용하여 안드로이드 앱을 디버깅 할 수 있다고 추가하고 싶습니다 . 재고 안드로이드 에뮬레이터보다 빠릅니다.

Intel XDK IDE를 사용하여 에뮬레이터 또는 실제 장치에서 개발 및 디버깅 할 수 있습니다.

또한 코르도바에 대한 Visual Studio 2015 RC 도구가 리플 에뮬레이터와 함께 매우 훌륭하다는 것을 알았습니다.

phonegap 빌드를 사용하는 경우 디버그를 활성화하는 옵션이 있습니다.

로컬 빌드의 경우 npm으로 weinre를 설치할 수 있습니다 : https://npmjs.org/package/weinre

그리고 weinre 문서에 대한 링크 : http://people.apache.org/~pmuellr/weinre/docs/latest/

그리고 크롬 원격 디버깅이라는 것이 있지만 그것에 대해 많이 알지 못합니다 .Raymond Camden의 기사를 볼 수 있습니다 : http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Android 용 Cordova-33 및 원격 디버깅

크롬 원격 디버깅을위한 문서 : https://developers.google.com/chrome-developer-tools/docs/remote-debugging (정확하게 이해하면 기본 브라우저로 크롬이있는 안드로이드 장치가 필요합니다) 아마도 꿈에 가장 가깝습니다. 해결책?

설치된 Android 4.4 이상 (SDK 포함) :

adb logcat chromium:D SystemWebViewClient:D \*:S

당신이 경우 코르도바 3.3 이상을 사용 하고 장치가 안드로이드 4.4을 실행하는 이상 당신이 '원격 크롬과 안드로이드에서 디버깅'사용할 수 있습니다. 전체 지침은 다음과 같습니다.

https://developer.chrome.com/devtools/docs/remote-debugging

요약해서 말하자면:

• USB 케이블을 사용하여 장치를 데스크탑 컴퓨터에 연결
• 기기에서 USB 디버깅을 사용하도록 설정합니다 (내 기기의 경우 설정> 더보기> 개발자 옵션> USB 디버깅에 있음).

또는 Cordova 3.3 이상을 사용하고 4.4가 설치된 물리적 장치가없는 경우 데스크톱 컴퓨터에서 Android 4.4 이상을 사용하는 에뮬레이터를 사용하여 에뮬레이터를 통해 응용 프로그램을 실행할 수 있습니다.

• 장치 또는 에뮬레이터에서 Cordova 애플리케이션을 실행하십시오.
• 데스크톱 컴퓨터의 Chrome에서 주소 표시 줄에 chrome : // inspect / # devices를 입력하십시오.
• 장치 / 에뮬레이터는 컴퓨터에 연결된 다른 인식 된 장치와 함께 표시되며 장치 아래에는 장치 / 에뮬레이터에서 실행되는 Cordova 'WebView'(기본적으로 Cordova 앱)에 대한 세부 정보가 있습니다 ( Cordova가 작동하는 방식은 기본적으로 장치 / 에뮬레이터에 '브라우저'창을 만들고 HTML / JavaScript 앱을 실행하는 'WebView'가있는 것입니다)
• 장치 / 에뮬레이터가 표시된 'WebView'섹션에서 '검사'링크를 클릭하십시오. 그러면 응용 프로그램을 디버깅 할 수있는 Chrome 개발자 도구가 나타납니다.
• 기기 / 에뮬레이터에서 Cordova 앱이 현재 실행중인 JavaScript를 보려면 Chrome 개발자 도구의 '소스'탭을 선택하십시오. JavaScript에서 코드를 디버깅 할 수있는 중단 점을 추가 할 수 있습니다.
• 또한 '콘솔'탭을 사용하여 오류 (빨간색으로 표시됨)를 보거나 콘솔 하단에 '>'프롬프트가 표시 될 수 있습니다. 여기에서 현재 값을 검사하려는 변수 또는 객체 (예 : DOM 객체)를 입력하면 해당 값이 표시됩니다.

Phonegap Build를 사용하는 솔루션은 다음과 같습니다. Chrome 원격 웹뷰 디버깅으로 검사 할 수 있도록 config.xml에 다음을 추가하십시오.

먼저 위젯 태그에 xmlns : android = "http://schemas.android.com/apk/res/android"가 포함되어 있는지 확인하십시오.

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="me.app.id" 
    version="1.0.0">

그런 다음 다음을 추가하십시오

<gap:config-file platform="android" parent="/manifest">
     <application android:debuggable="true" />
</gap:config-file>

Nexus 5, Phonegap 3.7.0에서 작동합니다.

<preference name="phonegap-version" value="3.7.0" />

Phonegap 빌드에서 앱을 빌드하고, APK를 설치하고, 휴대폰을 USB에 연결하고, 휴대폰에서 USB 디버깅을 활성화 한 다음 chrome : // inspect를 방문하십시오.

출처 : https://www.genuitec.com/products/gapdebug/learning-center/configuration/

Android 기기 모니터 사용

Android 기기 모니터에는 이전에 설치했던 Android SDK가 포함 된 패키지가 제공됩니다. 장치 모니터에서 전체 장치 로그, 예외, 메시지 등을 볼 수 있습니다. 이것은 응용 프로그램 충돌이나 다른 문제를 디버깅하는 데 유용합니다. 이를 실행하려면 안드로이드 SDK“/ var / android-sdk-linux / tools”안의 tools / 폴더로 이동하십시오. 그런 다음 다음을 실행하십시오.

chmod +x monitor
./monitor

Windows에있는 경우 monitor.exe 파일을 직접여십시오. “LogCat”아래에 모든 장치 관련 메시지를 볼 수있는 탭이 있습니다. 크롬 검사 장치가 아닌 안드로이드 장치 예외를 포함한 모든 메시지가 여기에 표시됩니다. 응용 프로그램에 대한 메시지 만 표시되도록 logcat 탭의“+”기호를 사용하여 필터를 만들어야합니다.

출처 : http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

html5 앱을 크롬으로 디버깅 할 수도 있습니다.

디버그 모드에서 크롬을 열려면 .bat를 만듭니다.

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security

"Chrome Remote Debugging"을 사용하여 USB 케이블을 통해 컴퓨터에서 원격으로 휴대 전화에 설치된 Cordova Android 애플리케이션을 디버깅 할 수 있습니다 ( 컴퓨터에서 웹 애플리케이션을보고있는 것처럼 웹 애플리케이션을 원격으로 클릭 할 수도 있음). 이 방법으로 Stock Android 브라우저 또는 Android의 Chrome에서 본 웹 애플리케이션을 디버그 할 수도 있습니다 .

1. Android 기기에서 개발자 모드를 사용하도록 설정합니다 (설정-> 휴대 전화 정보-> 빌드 번호에서 7x 누르기).

2. USB 케이블을 통해 컴퓨터와 휴대폰을 연결하십시오.

3. 컴퓨터에서 Chrome을 점심 식사하고 chrome : // inspect로 이동 한 다음 디버깅하려는 원격 기기 옆의 '기기'탭에서 '검사'버튼을 클릭합니다. 또는 컴퓨터에서 Chrome 내부를 마우스 오른쪽 버튼으로 클릭-> 검사-> DevTools Costumize 및 제어 (3 개의 수직 점-개발자 도구의 오른쪽 상단 모서리)-> 추가 도구-> 원격 장치-> 왼쪽의 장치 아래에서 USB를 통해 연결된 장치-> 원하는 응용 프로그램의 검사 버튼을 클릭하십시오.

4. 그런 다음 "콘솔"을 클릭하면 Chrome 개발자 도구를 사용하는 일반 웹 애플리케이션에서와 동일한 방식으로 JavaScript를 디버깅 할 수 있습니다.

나는 weinre를 사랑했다! 사용 방법:

먼저 착용하십시오 index.html( app.settings.debugUrl이전에 설정되어 있는지 확인 하십시오).

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

그때:

• 설치: sudo npm install -g weinre
• 운영: weinre --boundHost -all-
• 브라우저에서 엽니 다 : http : // localhost : 8080 / client / # anonymous
• 앱을 열면 감시 대상이 나타납니다.

http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/ 기반

안드로이드 <= 4.0.4 인 기기는 플러그인 https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt 를 추가해야합니다.