모바일 브라우저 디버깅하기

다양한 기기에서 돌아가는 FE 어플리케이션을 개발하고 있다면, 사파리, 삼성 인터넷, 모바일 기기에서만 발생한다는 버그에 고통받아본 적이 반드시 있을 것이다. 브라우저의 사용 범위는 점점 넓어지고, 유저들은 더욱 다양한 브라우저와 기종으로 내가 만드는 웹 사이트에 접속한다. 심지어 글로벌 서비스라면 말할 것도 없다. 그런데 내 개발환경은 오직 최신 업데이트된 크롬 뿐이라면? 

테스트는 안 해봤지만 아마 잘 돌아갈 걸요(?)

유저들이 모두 PC 환경의 최신 크롬을 쓸 것이라고 기대해선 당연히 안 된다. 특히 모바일의 시대가 도래하면서 PC와는 다르게 동작하는 모바일 브라우저에 대한 테스트는 필수가 되었다. 따라서 이번에는 웹 개발자들이 놓치기 쉽지만 매우 중요한, 모바일 디바이스 환경의 브라우저 디버깅 방법을 간단히 소개하고자 한다. 

아이폰 Safari

1. iOS 기기와 이걸 디버깅해볼 Mac 컴퓨터를 준비한다. 

2. iOS 기기에서 설정 > Safari > 고급 메뉴에 진입, 웹 인스펙터(Web Inspector)를 활성화한다. 

친절하게 다 쓰여있다

3. 케이블을 사용하여 맥과 아이폰을 연결한다. 이 컴퓨터를 신뢰하시겠습니까? 라는 팝업이 뜨면 신뢰를 허용해줘야 한다. 

4. iOS Safari 디버깅을 위해 맥에서 Safari를 실행한다. 만약 "개발자용" 메뉴가 툴바에 보이지 않는다면, 옵션 메뉴에서 개발자 도구를 활성화해야 한다. 

5. 이제 테스트해볼 웹 사이트를 모바일 기기에 띄우고, 맥 Safari 개발자용 메뉴에서 연결된 기기를 확인한다. 확인해보고자 하는 도메인의 url을 클릭하면, 아래와 같은 개발자도구 팝업창이 나온다. 

 

5. PC 환경과 동일하게 마음껏 디버깅한다. PC에서는 사용할 수 없는 터치 이벤트 등 모바일 디바이스에서만 발생하는 케이스들을 검증해볼 수 있겠다. 

안드로이드 Chrome

1. 안드로이드 기기와 디버깅할 PC를 준비한다. 

2. 안드로이드 기기의 개발자 옵션을 활성화시킨다. 설정 > 정보 > 빌드 번호 옵션을 찾아서 해당 옵션을 일곱 번 탭하면, 개발자 옵션이 활성화된다. 

이렇게 온디바이스 개발자 옵션을 켜고 끌 수도 있다

3. 개발자 옵션에서 USB 디버깅을 허용한 뒤, 케이블을 사용하여 PC와 안드로이드폰을 연결한다. 

4. PC에서 크롬 브라우저를 사용하여 다음 url로 진입한다. 

chrome://inspect

5. 아래와 같은 창을 확인한다. 

6. Inspect 버튼을 통해, PC 브라우저에서 디버깅하던 것과 동일한 개발자도구를 띄워볼 수 있다. 

 

localhost 배포 없이 디바이스에서 확인하기

개발 서버 등에 배포하기 전, 로컬 환경에서 돌아가는 앱을 모바일 등 타 디바이스 환경에서도 테스트해보고 싶은 경우가 있다. 사실 로컬 환경에서 외부 접근을 열어주는 일은 굉장이 번거로운 일이 될 수 있는데, 이걸 굉장히 간단하게 사용할 수 있는 ngrok 이라는 도구를 써볼 수도 있겠다. ngrok은 외부에서 로컬에 접속할 수 있게 도와주는 터널링 프로그램인데, 디바이스 테스트용으로도 편리하게 사용할 수 있었다. 

 

1. ngrok을 설치한다. 홈페이지에서 다운로드하여 설치하거나, MacOS 유저라면 brew를 통해서도 설치가 가능하다. 

# Mac OS
brew install ngrok

# Windows
choco install ngrok

2. 홈페이지에서 ngrok 계정을 생성한 후, ngrok 에이전트에 자신의 계정을 연결해준다. 

ngrok config add-authtoken <TOKEN>

3. 테스트해볼 로컬 환경의 포트 번호를 다음과 같이 입력한다. 

ngrok http <LOCAL_포트번호>

4. 다음과 같이 터널링이 완료된 상태의 포워딩 주소를 확인한다. 

5. 테스트해볼 디바이스에서 해당 포워딩 주소를 사용하면 된다. 

 

Reference

https://developer.android.com/studio/debug/dev-options?hl=ko

온디바이스 개발자 옵션 구성  |  Android 스튜디오  |  Android Developers

https://ngrok.com/docs/getting-started/?os=windows

Quickstart | ngrok documentation