잊을 것 같아 모바일웹 디버깅을 위해 처리했던 내용을 기록한다. (현재 작업 상황에 맞게 처리한 것으로 일반적인 경우와 다를 수 있다)
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. 크롭 디버깅창이 오픈된다.