(vue.js) 웹뷰에서 localhost 웹페이지로 연결해서 디버깅하기

하이브리드앱과의 통신테스트를 하기 위해서 실제서버의 주소로 연결된 앱을 가지고 테스트하기는 상당히 번거럽습니다.

vue.js 소스를 수정하고, git 업로드하고, 서버에서 git pull 하고, yarn build 하고, 기타 pm2 restart 를 해야 하는등...

소스 몇개 수정하고 또 빌드하고 업로드하고.... 엄청 짜증나죠.

이럴때 그냥 앱에서 현재 컴퓨터에서 실행되는 localhost 환경으로 연결하면 편리합니다.

순서대로 따라해보세요

 

1. vue 를 아래와 같이 실행합니다.
$ yarn dev --port=3000 --hostname=0.0.0.0

2. usb로 폰을 연결합니다.
: 설정에서 USB 디버그모드를 활성화 해주세요

3. 앱을 실행합니다.

4. 크롬 주소창에 아래와 같이 입력하고 잠시 기다립니다.
: chrome:inspect

5. 곧이어 출력되는 목록중에서 자신의 앱에 해당하는 부분에 "inspect" 를 클릭합니다.
: 앱용 개발자도구가 뜹니다.

6. 윈도우 cmd 창에서 ipconfig (또는 ifconfig) 명령어로 자신의 사설아이피를 알아봅니다.
: 보통 192.168.0.X 로 되어 있습니다.

7. 개발자도구에서 주소창에 192.168.0.X:3000 으로 접속합니다.

8. 현재 디버깅서버에서 돌고있는 웹페이지가 뜹니다.

끗~

※ 참고로 백엔드 서버도 로컬에 있다면 마찬가지로 vue.js 에서 백엔드주소를 localhost 가 아니라 사설아이피로 해주셔야 제대로 통신이 됩니다.