잊을 것 같아 모바일웹 디버깅을 위해 처리했던 내용을 기록한다. (현재 작업 상황에 맞게 처리한 것으로 일반적인 경우와 다를 수 있다)

1. 로컬 pc에서 웹소스까지 포함해서 실행할 수 있는 웹서버 환경을 구성해야 한다.

=> node js 설치하고 package.json 파일 내에 아래 빨간글씨 부분을 본인 pc ip로 지정한다.

"scripts": {

    "test""echo \"Error: no test specified\" && exit 1",

    "watch""webpack --watch",

    "dev""cross-env NODE_ENV=development webpack-dev-server --d --port 8080 --host XXX.XXX.XXX.XXX",

    "kiwoom""cross-env NODE_ENV=production PROD_MODE=real webpack --progress --hide-modules",

    "build""cross-env NODE_ENV=production PROD_MODE=dev webpack --progress --hide-modules",

    "lint""eslint --ext .js src"

  },

 

visual studio code 터미널창에서 npm run dev로 웹서버 실행한다.

로컬pc 가 가정용 와이파이 기기에 접속되어 ip를 자동할당 받은 경우 모바일도 같은 와이파이 네트워크에 접속한다.

모바일웹 브라우저에서 로컬 pc 아이피로 주소를 입력해서 테스트하려는 웹페이지 오픈한다.

예를 들면,

XXX.XXX.XXX.XXX:8080/test_html 

 

모바일웹브라우저에서 해당 웹페이지가 오픈되면 1단계 성공

 

2. 로컬pc에 모바일 usb 드라이버를 설치한다.

설치방법 참조: https://developer.android.com/studio/run/oem-usb?hl=ko

 

OEM USB 드라이버 설치  |  Android 개발자  |  Android Developers

몇몇 OEM 웹사이트로 연결되는 링크를 찾아, 자신의 기기에 해당하는 USB 드라이버를 다운로드할 수 있습니다.

developer.android.com

 

3. 모바일 설정 오픈 => 개발자 옵션 => USB디버깅 체크

(LG는 개발자 옵션이 활성화되있더라도 한번 비활성화 한 후 활성화를 해야 함)

 

4. 모바일폰을 pc와 usb로 연결하고 모바일 웹페이지 오픈상태에서 pc 브라우저 오픈하고 아래 주소 입력한다.

chrome://inspect/#devices

 

5. 아래 그림과 같이 pc웹 브라우저에 디버깅할 주소가 보이면 빨간색 사각형 영역 inspect을 클릭한다.

6. 크롭 디버깅창이 오픈된다.

+ Recent posts