[Android] 하이브리드 앱 디버깅하는 방법

[Android] 하이브리드 앱 디버깅하는 방법

 

 

 

 

  하이브리드 앱이란?

 웹의 반응형을 이용하여 앱의 기능과 섞어 만든 APK입니다.

 

순수하게 ANDROID로 구성된 것이 아니기에, URL만 알 수 있다면 PC로도 얼마든지 접근할 수 있습니다.

 

 

다만, 하이브리드 앱답게 PC에서의 접근을 막고 APK 설치 시 생성되는 KEY를 통해 APK를 구분하기에 사실상 웹이지만 웹의 개발자 도구를 사용할 수 없는 불편함이 존재합니다.

 

이번 글에는 이를 해결할 수 있는 방법을 공유하려 합니다.

다만, 아래와 같은 방법을 하기 위해서는 반드시 localhost가 아닌, 개발자 pc에서 접근이 허용된 url이 있어야 가능합니다.

 

 

  크롬을 통해 하이브리드 앱 디버그 하기

1. PC와 핸드폰을 USB로 연결합니다.

 

2. chrome://inspect/#devices (복사 붙여 넣기로 이동합니다.)

만약 여기서 나온다면, insepect를 클릭합니다.

3. pc와 연결된 핸드폰을 통해 크롬을 접속합니다.

- 개발자 도구가 열리면서 pc처럼 test를 진행할 수 있게 됩니다.

- 단, 컴퓨터가 조금 느려집니다.

 

 

저는 열려있는 크롬에서 요즘 Hot한 게임인 '로스트 아크'에 대한 검색정보가 담겨 있습니다.

 

 

 

  만약, 위에처럼 안된다면.

1. Android 기기 개발자 모드, USB 디버깅 활성화

개발자 옵션 만들기

1.  설정 ▶ 휴대전화 정보 ▶ 소프트웨어 정보
2.  소프트웨어 정보를 7번 터치

 

2. USB 디버깅 활성화

USB 디버깅 활성화

 

3. ADB 설치

- 안드로이드 스튜디오가 설치되어있는 PC는 설치되어 있을 확률이 높습니다.

https://developer.android.com/studio/releases/platform-tools?hl=ko

 

안드로이드 스튜디오에서 제공하는 ADB를 설치를 받습니다.

그리고 이를 환경 변수에 담습니다.

 

 

4. 환경변수 설정하기

- 내 PC ▶ 속성 ▶ 설정 변경 ▶ 고급 탭 ▶ 환경 변수

- 제어판 ▶ 시스템 및 보안 ▶ 시스템 ▶ 고급 시스템 설정 ▶ 고급 탭 ▶ 환경 변수

설치받은 platform-tools 경로를 담습니다.

해당 경로는 안드로이드 스튜디오 설치 시 기본으로 설치되어있는 경로입니다.

설치를 받으셨다면, 설치받은 경로를 모두 담아 넣습니다.

 

5. pc 재부팅

- 환경 변수 적용을 위해 pc를 재부팅합니다.

 

 

6. (cmd) 명령 프롬프트에서 adb 입력

adb 입력시, 무언가가 출력되었다면 정상적으로 설치 완료되었습니다.

cmd창에서 adb 입력 시, 맨 윗줄인 Android Debug... 로부터 알 수 없는 것이 쭉 내려왔다면 정상적으로 설치가 되었습니다.

만약,  정보를 찾을 수 없다면 환경 변수가 제대로 저장되어있는지 다시 한번 확인 부탁드립니다.

 

 

7. pc와 대상 android 기기 연결하기

안드로이드에서 크롬을 켰을 시, 나오는 창

pc와 연결된 안드로이드에서 크롬을 열 경우, 위와 같은 창이 나왔으면 연결이 성공되었습니다.

위와 같은 창이 안 나온다면 cmd에서 adb devices를 입력해서 확인 부탁드립니다.

 

device 정보가 나오면 성공, unauthorized가 나오면 실패입니다.

 

연결이 성공적으로 끝났습니다.

 

 

 

8.  크롬에서 chrome://inspect/#devices을 주소창으로 검색합니다.

-  chrome://inspect/#devices

안드로이드에서 보는 내용이 pc의 개발자 도구를 통해 나타난다.

 맨 처음 소개드린 1번처럼 크롬의 열린 탭들이 모두 소개됩니다.

안드로이드에서 열람 중인 크롬과 pc에서 볼 크롬을 서로 일치시켜서 창을 띄우면 위의 내용처럼 개발자 도구를 열람할 수 있게 됩니다.

 

 

 

  마무리

 하이브리드 앱을 디버깅하는 방법에 대해 알아보았습니다.

pc로는 접근이 막혀있고, apk를 통해서만 테스트를 할 수 있다 보니, 작업의 어려움이 이만저만이 아닐 수 없습니다.

 

이를 해결하기 위해 크롬에서 기능이 제공되어 있고, 이를 활용하기 위한 방법에 대해 다뤄보게 되었습니다.

해당 테스트를 하기 위해서는 반드시 url로 접속이 가능한 상태여야 합니다.