Debugging Android WebView, Chrome

[Chrome 개발자 도구를 사용한 원격 디버깅]
https://developer.chrome.com/devtools/docs/remote-debugging

chrome 개발자 툴을 사용하여 Android WebView를 원격에서 디버깅 가능함.

디버깅을 위해서 전제 조건은
- PC에 Chrome 32 이상 버전이 설치 되어야 함.
- Android 기기가 USB로 연결되어야 하고 인식도 되어야 함. (개발자 옵션의 디버깅 체크)
   (인식을 위해 Android Studio를 실행하는 것도 방법)
- Android Chrome 디버깅의 경우 Android 4.0 이상
- Android WebView를 디버깅 하기 위해서는 Android 4.4 이상

* 자세한 설정은 위 링크 참조

- WebView 디버깅을 위해서는 아래 코드를 앱에 포함해야 함.

WebView debugging must be enabled from within your application. To enable WebView debugging, call the static method setWebContentsDebuggingEnabled on the WebView class.

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      WebView.setWebContentsDebuggingEnabled(true);
  }

This setting applies to all of the application's WebViews.

Tip: WebView debugging is not affected by the state of the debuggable flag in the application's manifest. If you want to enable WebView debugging only when debuggable istrue, test the flag at runtime.

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
  }

[WebView의 console.log 확인]

: http://developer.android.com/guide/webapps/debugging.html

Android 2.1 이상에서는 WebChromeClient의 onConsoleMessage()를 구현해서 로그를 직접 출력 하라고 되어 있음. (아래는 API level 8 이상일 경우)

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
  public boolean onConsoleMessage(ConsoleMessage cm) {
    Log.d("MyApplication", cm.message() + " -- From line "
                         + cm.lineNumber() + " of "
                         + cm.sourceId() );
    return true;
  }
});

하지만 그냥 출력이 되는 경우도 있는 듯..

일단 내가 가진 galaxy s4에서는 Log Message에서 console 을 포함하거나
Log Tag가 chromium 이면 WebView에서 출력하는 console.log를 확인할 수 있음.

I/chromium﹕ [INFO:CONSOLE(78)] "Hello World!!!", source: http://192.168.0.1/wa/ (78)


[Debugging with Chrome DevTools]


Chrome DevTools Overview
: https://developer.chrome.com/devtools/index

* chrome://inspect 창에서 안드로이드 기기가 보이지 않는다면
Android Studio를 실행하고 아래 Android 로그창을 열어봐라.(ADB가 초기화 될것임)

* web 페이지의 cache를 삭제 하기 위해서 별도의 metatag를 사용할 필요 없이 dev tools 설정에서 General > "Disable cache (while DevTools is open)" 을 사용하되 dev tools가 실행되어 보여지는 상태여야 한다.

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


크롬 개발자 도구
: http://opentutorials.org/course/580


우리가 몰랐던 크롬 개발자 도구 by 박재성
: http://www.slideshare.net/netil/ss-28588952


[FireFox Developers Edition]
: https://www.mozilla.org/en-US/firefox/developer/

- FireFox 개발자 버전이며 개발자를 위한 다양한 툴이 제공됨
- CSS 수정이 용이(editing)하며 바로 화면에 적용되어 수정내역을 확인할 수 있다
  : 개발자 도구 > Style Editor 에서 수정 및 저장.
  : 하지만 렌더링 결과물이 Chrome, IE와 좀 차이가 나서 후 조정이 필요하다.