[안드로이드 kotlin] webview 로그 확인하기

웹뷰를 이용해서 웹 페이지 화면을 띄울일이 생겼습니다. 화면에 있는 버튼을 누르면 팝업이 나타나도록 하는건데 두 가지 이상 증상이 나타났습니다.

 

해결해야할 문제 2가지

1. 버튼을 눌렀는데도 팝업창이 나타나지 않는 문제

2. 팝업이 나타나면 뒷 배경이 불투명하게 나타나야 하는데 불투명해지지 않는 문제

 

뭐가 문제인지 확인하기 위해 로그로 봐야하는데 안드로이드스튜디오에서 확인해볼 수 있는 로그는 한정적이어서 실제 화면의 어느부분이 문제인지 확인할 수 있는게 있는지 찾아봤습니다.

웹뷰를 사용할 때 크롬에서 로그를 확인할 수 있는 방법이 있네요.

WebView.setWebContentsDebuggingEnabled(true)

onCreate() 메서드 안에서 위의 코드가 실행되도록 추가해놓고 usb 연결해놓은 상태로 크롬에서 chrome://inspect 를 입력합니다.

그럼 아래와 같은 화면이 나타납니다.

※ 코드를 추가하지 않은 상태로 chrome://inpect 를 들어가면 웹뷰앱 내용을 확인할 수 없습니다.

 

usb 를 연결한 상태로 웹뷰 앱을 켜면 아래처럼 보이실겁니다.

usb 연결 상태에서 웹뷰앱 실행

inspect 를 누르게되면 웹뷰의 elements 들과 콘솔 등을 확인할 수 있습니다.

웹뷰 상태 확인

이제 요소들 내용을 확인해볼 수 있으니까 문제점을 파악해서 javascript 또는 css 를 수정하면서 작업하면 문제점들을 해결할 수 있습니다.