안드로이드 웹뷰 디버깅 - Android webview debug - 개발자 도구 -chrome

Window 혹은 Mac 등에서 안드로이드를 통해 업로드된 Webview 화면에 대한 디버깅 방법

•  과정 1 Android 기기 셋팅
•  과정 2 Android 코드 설정
•  과정 3 크롬에서 기기 검색 및 디버깅 
• 준비물
  • 안드로이드 계열 휴대폰
  • 어플리케이션
  • USB 케이블 (PC와 휴대폰 연결)

 

과정 1 - Android 기기 셋팅 - 개발자 모드 셋팅 USB 디버깅 허용

• Android 휴대폰의 설정에서 개발자 옵션 사용 설정
• 설정 중 USB 디버깅 활성화

 

과정 2 - Android 코드 설정

• Android 스튜디오에서 코드에 디버깅 활성화 코드 삽입

       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true);
        }//web디버깅을 위한 코드 보안을 위한 제거 필요

과정 3 - 크롬에서 기기 검색 및 디버깅 

• chrome://inspect/#devices 접속

• 사진과 같이 설정

• 휴대폰에서 Web 실행시 화면에 표시 = 모든 웹페이이지에 대하여 표시되며, 약간의 딜레이 있음
• Inspect 버튼 클릭시 해당 창에 대하여 아래와 같이 디버깅 모드 사용 가능