QA 하다가 막상 웹 브라우저에서 확인할 때와는 달리 휴대폰에서만 제대로 적용되지 않는 속성들을 발견했다.
하필 나의 갤럭시 A9 은 10 이었기 때문에(폰밍아웃) 무선기능이 되지 않아(11 이후 가능) USB 디버깅만 가능한 상태였다. 하지만 포기하려는 찰나 CTO님의 도우심으로 세팅을 무사히 끝내게 되었다
좋은 건 같이봐야하기 때문에 이 포스팅을 기록해본다
안드로이드 - ADB 로 웹모바일뷰 디버깅 하기
0. 휴대폰에서 개발자 도구 활성화하기
이건 이미 다른 블로그들에서 친절하게 설명이 잘 나와있다. 구글링으로 얼른 갤럭시 개발자도구 키고 돌아오시라
1. ADB 다운받기 (Mac용)
https://developer.android.com/studio/releases/platform-tools
2. 터미널 열고 zshell 파일을 열어주고
3. zshrc 파일 안에 아래 코드를 한줄 추가해주고 저장해주기 (나는 Document 폴더에 ADB를 다운받기 떄문에 경로를 거기로 수정했다)
** 여기서 터미널에서 코드 직접 편집하는 부분이 나온다. 혹시 모르면 참고하자(친절한 발자씨🐣)
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 를 바로 주소창에 넣어 이동할 수 있다.
'OS & Network' 카테고리의 다른 글
웹 최적화 - 구글 폰트 속도 빠르게 만들기 (Making Google Font Faster In 2022) (0) | 2022.12.13 |
---|---|
Network - CDN 이란 (Content Delivery Network) (0) | 2022.08.08 |
Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom) (0) | 2022.06.06 |
Network - DNS 이해하기 + 기본 동작원리 (0) | 2022.06.05 |
Vim - 간단한 단축키 정리 (0) | 2022.06.03 |
댓글