스마트폰 웹 화면 디버깅

스마트폰에서 웹 디버깅하기

데스크탑에서는 제대로 실행되는데, 웹에서만 정상적으로 작동하지 않는 경우가 있다. 

이런 오류를 디버깅하고 싶어도, 스마트폰에서 제공하는 브라우저는 데스크탑처럼 디버깅 하는 툴이 없어 디버깅을 할 수 없다. 

이번 포스트에서는 스마트폰에서 발생하는 웹 오류를 디버깅하는 방법에 대해 알아보자. 

 

디버깅 방법

1. 스마트폰 설정

   스마트폰의 환경설정에 보면 개발자 옵션이 있다. USB 디버깅을 체크한다. 

.

2. 스마트폰 연결

   스마트폰을 USB로 데스크탑과 연결한다. 

   스마트폰의 USB 통합 드라이버가 설치되어 있어야 한다. 설치가 되어 있지 않다면, 

   아래 3번에서 스마트폰에서 실행하고 있는 인터넷 창 정보가 보이지 않게 된다. 

   

설치가 되어 있지 않다면 제조사의 홈페이지에서 다운 받아 설치한다. 

3. 개발자 화면으로 이동

   데스크탑에서 크롬을 실행하고, 주소창에 아래와 같이 입력한다. 

chrome://inspect/#devices

주소를 입력하면 아래와 같은 화면이 보이게 된다. 

스마트폰에서 실행되고 있는 인터넷 창들이 보일 것이다. 

이 중 디버깅이 필요한 인터넷 탭에서 inspect를 선택한다. 

inspect를 선택하면, 새로운 창이 나온다. 

새로운 창은 데스크탑에서 자주 보던 크롬 개발자 도구와 거의 동일하다. 

이 것을 이용해서 디버깅을 하면 된다. 

디바이스 목록이 나타나지 않을 때

명령프롬프트를 열어 아래를 입력한다. 물론 adb.exe의 패스가 잡혀 있어야 한다. 

또는 안드로이드 SDK를 설치 후 스마트폰의 안드로이드 버전의 SDK 버전을 다운로드.

adb.exe kill-server
adb.exe start-server

C:\Program Files (x86)\Android\android-sdk\platform-tools>adb.exe devices

.