Mac에서 모바일 웹뷰 디버깅하기 (개발자 도구 사용하기)

 

 

 

모바일에서 웹 접근 시 발생하는 이슈 때문에 모바일에서 웹 디버깅을 해야했다.

 

그래서 찾아본 3가지 adb, android emulator, chrome inspect

 

모바일 웹뷰 디버깅 및 콘솔 로그 확인 방법 (개발자 도구 사용법)

1. 안드로이드 에뮬레이터를 사용하여 크롬 웹 접속

2. chrome://inspect/#devices 접속

3. 에뮬레이터 기기가 접속한 웹 사이트 inspect

 

 

1. android studio 다운로드

https://developer.android.com/studio?hl=ko 

Download Android Studio and SDK tools  |  Android Developers

 

 

2. android emulator 다운로드

 

- 구글 플레이 스토어 이용해서 앱 다운받아 사용할 게 아니라면 굳이 다운 안받아도 된다!

https://github.com/google/android-emulator-m1-preview/releases/tag/0.3

Release Initial Preview v3: Google APIs System Image · google/android-emulator-m1-preview

 

3. 안드로이드 스튜디오 - Virtual Device Manager - 에뮬레이터 추가

 

 

4. 실행

접속 url : chrome://inspect/#devices

 

 

5. 디버깅 및 콘솔 로그 확인 (개발자 도구)

 

 

 

+ 에뮬레이터 사용하지 않고 실제 기기로 테스트

아이패드 기기로 테스트 해본 결과, chrome://inspect 접속 시 콘솔 로그만 확인이 가능하다.

 

크롬 브라우저 접근 시에만 가능하다!

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."