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와 좀 차이가 나서 후 조정이 필요하다.

mobile device에서 touch 시 zoom 방지 하는 방법

젠장.. GB같은 옛날 기기에서는 안된다..
-----------------------------------

보통 web page의 확대/축소를 방지하기 위해서 아래와 같이 viewport를 설정하는 방법을 많이 사용함.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

하지만 일부 예전 device들 중에서는 제대로 되지 않는 경우가 있음.
이럴 때는 touch를 방지하는 방법으로 가능함.

http://stackoverflow.com/questions/8071603/safari-ipad-1-how-to-disable-zoom-centering-on-double-tap-but-keep-pinch-zoom

6down vote +100

There's no other way than catching the events you want to prevent, and call preventDefault() on them, as you had already more or less figured out. Indeed, some particular CSS properties / values may change the global site behavior (fixed width or fixed, for example), but you're not safe from changes to the OS (see fixedhandling change in iOS5), nor do these changes necessarily prevent all behavior (pinch might be off, but not double-tapping). So, the best way to disable default behavior only for double-tapping is to take advantage of the count of touches iOS provides: if we have only one contact, then we're tapping. Two, this means we're pinching. The following setup code provides that functionality: var elm = document.body; // or some selection of the element you want to disable var catcher = function(evt) { if (evt.touches.length < 2) evt.preventDefault(); }; elm.addEventListener('touchstart', catcher, true); Demo on jsFiddle. Note: the third parameter (true) to addEventListener means that we want to capture events, that is catch them all, even for our descendant children. share|improve this answer answered Nov 20 '11 at 6:35 MattiSG 1,082417

하지만 이렇게 되면 

전체 화면에서 touch가 먹지 않으므로 touch 필요한 버튼 같은 부분들에서는 문제가 발생그래서 touch가 된 html dom element를 확인하여 touch event를 허용, 취소 여부를 판단하는 코드를 추가함.

touch 필요한 dom element에 대해서는 class='button'와 같이 설정 하였음.

그래서 터치된 element의 class에 button이 포함 되어 있을 경우는 touch event가 전달 되고 그외에는 evt.preventDefault()로 인해서 touch event가 전달되지 않음.

var changedTouch = event.changedTouches[0];

var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);

if($(elem).attr('class').search("button") != -1){

   return;

}