chrome으로 모바일 웹 페이지 디버깅하는 방법

모바일 웹 페이지 개발 시, 브라우저에서 F12를 눌러 개발자 모드에 진입 후 아래와 같이 Toggle device toolbar를 사용하여 보는 경우가 많은데요.

 

 

이 기능이 편하고 좋지만 결국 모바일 기기에서 직접 하는 것이 아니기 때문에 PC 브라우저에서 아무리 테스트를 해도 실제 모바일 기기에서 테스트를 하면 안 되거나, 다르게 동작하는 부분이 있습니다.

(대표적으로 더블클릭 이벤트, Drag & Drop 이벤트)

 

그렇다면 아예 모바일에서 테스트 하면 되는데 왜 PC 브라우저에서 테스트를 하는가?라고 생각해봤을 때 가장 큰 이유는 아무래도 개발자 모드를 이용한 디버깅이라고 할 수 있는데요

 

이번에는 PC 브라우저에서 내 모바일 기기에 연결하여 확인하는 방법을 소개하려고 합니다.

방법은 아래와 같습니다.

 

1. 모바일기기를 PC에 연결
   가장 먼저, 자신의 PC에 모바일 기기를 USB 포트를 통하여 연결해야 합니다. 이때, 충전용 케이블이 아닌 Data 전송 케이블을 사용해야 합니다.
2. 모바일 기기에 "휴대전화 데이터에 접근 허용" 팝업이 뜨는데 여기서 "허용" 선택
3. 모바일 기기에서 개발자 모드 설정
   1. Android 기준으로 [설정 > 휴대전화 정보 > 소프트웨어 정보] 메뉴로 이동
   2. 빌드번호를 7번 연속 선택
   3. 빌드번호를 7번 연속 선택 후 설정 탭으로 돌아가면 휴대전화 정보 메뉴 아래에 개발자 옵션 메뉴가 추가되어있습니다.
4. 개발자 옵션 메뉴에서 USB 디버깅을 ON 시키고 USB 디버깅 허용을 확인합니다.
   

   

5. adb 설치
   
   1. https://developer.android.com/studio/releases/platform-tools 접속
   2. OS에 맞는 플랫폼 도구 다운로드 (windows의 경우 Windows용 SDK 플랫폼 도구 다운로드)
6. 설치 후 환경변수 설정
   1. [제어판 > 모든제어판 항목 > 시스템 > 고급 시스템 설정] 메뉴로 이동
   2. 고급 탭에서 환경 변수 버튼 클릭
   3. 시스템 변수에서 Path를 찾아서 adb를 설치한 폴더의 경로를 설정
      

      

7. cmd에서 설치 확인
   1. cmd창에서 adb devices를 입력해서 아래와 같이 나오는지 확인
      

      

8. 크롬(Chrome) 브라우저에서 모바일 기기 연결
   1. 모바일 기기를 PC에 연결한 상태에서 Chrome 브라우저를 열고 주소창에 chrome://inspect/#devices 입력
   2. 화면에 표시된 Remote Target 중에서 디버깅할 곳에 inspect 클릭
      

      

9. 여기까지 진행하면 아래와 같이 브라우저의 화면과 똑같은 화면이 PC 크롬에 표시되는 것을 확인할 수 있습니다.