안드로이드 - ADB 로 웹모바일뷰 디버깅 하기(USB연결)

QA 하다가 막상 웹 브라우저에서 확인할 때와는 달리 휴대폰에서만 제대로 적용되지 않는 속성들을 발견했다.

하필 나의 갤럭시 A9 은 10 이었기 때문에(폰밍아웃) 무선기능이 되지 않아(11 이후 가능) USB 디버깅만 가능한 상태였다.  하지만 포기하려는 찰나 CTO님의 도우심으로 세팅을 무사히 끝내게 되었다

좋은 건 같이봐야하기 때문에 이 포스팅을 기록해본다

 

---

안드로이드 - ADB 로 웹모바일뷰 디버깅 하기

 

 

0. 휴대폰에서 개발자 도구 활성화하기 

이건 이미 다른 블로그들에서 친절하게 설명이 잘 나와있다. 구글링으로 얼른 갤럭시 개발자도구 키고 돌아오시라

 

 

1. ADB 다운받기 (Mac용)

https://developer.android.com/studio/releases/platform-tools

SDK 플랫폼 도구 출시 노트  |  Android 개발자  |  Android Developers

 

 

2.  터미널 열고 zshell 파일을 열어주고

.

 

3. zshrc 파일 안에 아래 코드를 한줄 추가해주고 저장해주기 (나는 Document 폴더에 ADB를 다운받기 떄문에 경로를 거기로 수정했다)

 

** 여기서 터미널에서 코드 직접 편집하는 부분이 나온다. 혹시 모르면 참고하자(친절한 발자씨🐣)

Vue - (Windows) NVM 삭제하기

 

 

4. 저장했으니 적용해야지. 파일 실행해주기

 

 

5. adb 명령어를 쳐서 install 해주기 

인스톨이 잘됬군

 

6. 여기서 맥북과 - 내 폰을 usb 로 연결시켜주자. (내 폰- 설정에서 개발자도구 활성화된 것 한번더 확인!)

 

 

7. adb devices 명령어로 내 디바이스를 인식시켜주자 (권한 허용을 해주기전과 허용 후 인식상태가 달라진다) 

잠금 해제를 하고 + 맥에 뜬 팝업에서 권한 허용을 허락해주면 드디어 디바이스 인식이 된다.

 

 

8.  크롬 창을 열고 chrome://inspect/#devices 로 들어가기 

내가 모바일로 띄워놓은 웹 사이트들이 나온다 ~ 이중에 로컬호스트를 들어가보자 ( inspect 클릭 )

 

 

9. 주소창에 localhost 대신 내 아이피를 넣어주면 잘들어간다

localhost:8080 → 100.11.100.10:8080 

 

 

혹시 주소창에 ip 를 변경하지 않고 localhost 로 시작되는 URL 을 사용하고 싶다면? 

1. port forwarding 버튼을 누르자

 

2. 모달에서 아래와 같이 포트 추가를 해주자

그럼 localhost 를 바로 주소창에 넣어 이동할 수 있다.