phonegap으로 안드로이드 에뮬레이터에서 자바 스크립트 디버그

phonegap으로 안드로이드 에뮬레이터에서 자바 스크립트 디버그

---

나는 phonegap 및 Android 개발을 처음 사용합니다. 에뮬레이터에서 자바 스크립트 오류를 ​​어떻게 디버깅 할 수 있는지 알 수 있나요? ADB에 대해 들었습니다. Windows 7 시스템에서 어떻게 사용하고 설치할 수 있는지 알 수 있습니까? jsonp로 호출 된 ajax가 있지만 에뮬레이터에서 응답이 없습니다. 그러나 Windows의 브라우저로 해당 ajax를 호출 할 수 있습니다. 무엇이 잘못되었는지 알 수 있습니까?

---

적어도 자바 스크립트에서 console.log ()를 호출하여 디버그 항목을 adb 콘솔에 기록 할 수 있습니다. 그게 충분할까요?

adb를 사용하여 로그 출력을 보려면 SDK platform-tools / 디렉터리로 이동하고 다음을 실행합니다.

adb logcat

참조 명령 줄 도구 로그 캣

---

2016 년 11 월 업데이트 : 더 이상 작동하지 않는 것 같습니다.

가장 쉽고 가장 강력한 방법 중 하나는 http://debug.phonegap.com 을 사용하는 것입니다 (원하는 경우 백그라운드에서 Weinre를 사용합니다). 방금

1. 임의의 문자열을 선택하십시오 r4nd0m.
2. 주사 <script src="http://debug.phonegap.com/target/target-script-min.js#r4nd0m"></script>로index.html
3. 방문 http://debug.phonegap.com/client/#r4nd0m하면 즉시 모바일 웹 앱을 디버깅 할 수 있습니다.

수행 할 수있는 작업 (Firebug 또는 Web Inspector와 유사) :

1. DOM보기 및 변경
2. CSS 편집
3. 라이브 디버깅 및 Javascript를 원격으로 실행하기위한 콘솔.
4. 기타 항목 : 스토리지, 리소스, 타임 라인, 프로필 등

---

이제 Chrome 개발 도구를 사용하여 Android Phonegap 앱을 원격으로 디버깅 할 수 있습니다! 여기에 지침을 작성했습니다. Chrome Dev Tools로 Phonegap 앱 원격 디버깅

Android 에뮬레이터를위한 단계 :

1. 데스크톱 컴퓨터의 Google 크롬에서 chrome : // inspect /로 이동합니다.
2. 기기 탭에서 Android 에뮬레이터를 찾아 '검사'링크를 클릭합니다.

Android 장치 원격 디버깅 시작 하기도 참조하십시오.

---

jsconsole을 추천 합니다 . 모든 JavaScript를 페이지에 삽입 할 수 있으며 기본 콘솔을 제공합니다. 원격 디버깅 에 대한 멋진 튜토리얼이 있습니다 .

---

예, console.log에 로그 오류가 있으며 Eclipse에서 LogCat 탭을 표시합니다. 거기에 웹 콘솔 메시지 (JS 오류 포함)가 표시됩니다. 웹 콘솔 태그 만 표시하도록 필터링해야하지만 잘 작동합니다. 여기에 설명 : ANDROID / ECLIPSE에서 PHONEGAP을 사용하여 CONSOLE CONSOLE.LOG 출력 및 JAVASCRIPT 오류 표시

---

Windows 7에서 Eclipse를 통해 앱을 테스트 할 때 Android / Phonegap의 자바 스크립트 오류를 ​​디버깅하는 데이 기능이 작동한다는 것을 발견했습니다.

창>보기 표시> 기타 ... 로 이동하십시오 .

그런 다음 Android 폴더 에서 LogCat 을 선택 합니다.

방금 팝업 된 창 / 탭은 Android 에뮬레이터가 로그 및 오류 메시지를 보내는 곳입니다. 이 창을 분리하여 Eclipse IDE 외부에 배치 할 수 있습니다 (유용함을 발견했습니다). 창의 오른쪽 상단 모서리에있는 5 개의 색상 문자 중 하나를 선택하여 표시되는 오류 유형을 제어 할 수도 있습니다.

쓸모없는 정보를 숨기고 오류 만 표시하려면 (E) 만 선택했는지 확인하십시오. 개인적으로 나는 또한 (W) 경고를 선택하고 (E) 오류를 선택하는 것을 좋아합니다.

도움이 되었기를 바랍니다.

---

(마지막으로) Android에 적절한 JavaScript 디버깅을 허용하는 도구가 있습니다-http: //www.jshybugger.org/

풍모:

• 줄 중단 점 추가 / 제거 / 활성화 / 비활성화
• 표정보기
• 들어갔다 / 뒤로 / 나가다
• 예외시 일시 중지
• 호출 스택 탐색
• 지역 변수 검사
• 원격 콘솔
• 자바 스크립트 구문 및 런타임 오류보고
• 로컬 저장소 항목보기 / 편집 / 삭제
• 세션 저장소 항목보기 / 편집 / 삭제
• WebSQL 데이터베이스 레코드보기 / 편집 / 삭제 (비디오보기)
• 페이지 리소스보기 (이미지, 스크립트, html)
• 원격 콘솔 지원 향상 (stacktrace)
• 디버거 : 향상된 개체 검사
• 디버거 : 조건부 중단 점
• 디버거 : 여기로 계속

---

두 단계로 쉽게 해결했습니다.

로깅 수준 변경

config.xml에서 다음 줄을 추가하십시오.

    <log level="DEBUG"/>

Cordova Log 실행

모든 로그 메시지를 실행하고 추적 할 수있는 bat 파일입니다. phonegap 프로젝트로 이동하고 탐색 \platforms\android\cordova한 다음 열면 log.bat이제 명령 줄을 사용하여 애플리케이션을 에뮬레이션 할 수 있습니다.

cordova emulate

열 때 팝업되는 cmd에 로그가 표시됩니다. log.bat

---

NodeJS를 어딘가에 설치하려는 경우 John Boxall의 iBug를 사용 하여 확장 디버깅을 수행 할 수 있습니다 . 이는 iPhone 용으로 설계되었지만 Android에서 테스트했으며 제대로 작동합니다. 기본적으로 모바일 장치 용 방화범 라이트입니다. 내 포크 원인 Node가 많이 변경되었고 John의 코드가 최신 nodeJS에서 실행되지 않았으므로 최신 버전의 nodeJS에서 nodeJS 0.2.3, YMMV에서 실행되도록 패치했습니다.

---

If you use console.log you can do simple print statements. Aswell as using adb to view them, you can use a log viewer on the device and view the logs there. More info: http://www.technomancy.org/android/javascript-debugging/

---

The best solution to catch exceptions and show in your console is this code:

window.onerror = function(msg, uri, line) {
    console.log(msg + uri + line);
}

---

In Eclipse you can add an hook to the android emulator back button and inspect a value on the fly. Add the onBackPressed event manager and call the javascript console from there. From the eclipse debug perspective you will change the value of a String variable to what you want to inspect, and pass it to your app by calling super.loadUrl.

See the code below. Do not forget to enable the debugging of your application from DDMS view

public class MyActivity extends DroidGap {
    private String js = "";
    @Override
    public void onBackPressed() {  
        //add a breakpoint to the follow line 
        //and change the value for "js" variable before continuing execution
        super.loadUrl("javascript:console.log(" + js + ")");
        return;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setBooleanProperty("keepRunning", false);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl("file:///android_asset/www/index.html", 20000);
    }
}

---

If you're using Phonegap Build and would like to debug using the Chrome console, here's a working solution. It's possible to debug WebViews using USB debugging (https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews)

First, make sure your widget tag contains 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">

Then add the following

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

It works for me on Nexus 5, Phonegap 3.7.0.

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

Build the app in Phonegap Build, install the APK, connect the phone to the USB, enable USB debugging on you phone then visit chrome://inspect.

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

---

Phonegap debug still exists. the one I know of is in phonegap build found in the settings and tick the debug application option. It will then rebuild your app when you save it. A debug button will appear in the application page along with the rebuild options. (this service also uses a built in weinre)

Another option which I also find the fastest is jsconsole.com. Its very easy to set up and requires almost no configuration compared to other methods of debugging where you need to install lots of things like drivers and SDKs.

NOTE!

In PhoneGap 10 when you build your app and any requests outside the app(as if there is no internet) fails,you will have to add this in your config.xml

<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

I was pulling my hair out trying to get any remote debugging tool to work only to find out outside requests were blocked by default. this saved me.

---

Debugging PhoneGap / Apache Cordova Application is easy with GapDebug

• Download & Install GapDebug from https://www.genuitec.com/products/gapdebug/

• Run a GapDebug on You PC / Mac

• Enable Developer Option & USB Debugging on your android device (Settings -> Developer Option (ON) -> USB Debugging (ON))

• If Developer option is not found (Settings -> About Phone -> Click Build Number for 7 times)

• You can Debug your application from your GapDebug

Refer

• https://www.youtube.com/watch?v=QHTI-utHfEE
• https://www.youtube.com/watch?v=AZJUSomFOwk
• https://www.youtube.com/watch?v=XEeWFIsgtsU
• https://www.youtube.com/watch?v=kiY03MBGkLo

---

Update: nowadays PhoneGap is called Apache Cordova and if you want to use it to develop Android apps, you have to install Android Studio. To access logcat console from Android Studio, open your Android project (it is the platform/android folder inside your Cordova project) and select the menu Tools->Android->Android Device Monitor.

Android Device Monitor (AVD) can run alone, so you can create a direct access to avoid all this path. AVD will automatically get the log messages from your emulator launched with Cordova, and it allows you to easily set filters to reduce the big amount of output received from the emulator. I specially prefer to filter by application name.

참고URL : https://stackoverflow.com/questions/4683503/debug-javascript-in-android-emulator-with-phonegap