이 글은 회사내부 위키에 업로드할 목적으로 작성한 글의 초안입니다.

weinre - Web Inspector Remote

데스크톱 환경에서 모바일웹 작업시 데스크톱에서는 발생하지 않았던 문제가 모바일 환경에서만 발생하거나, iOS와 Android 중 한 종류에서만 예상하지 못한 문제가 발생하는 경우가 있다. 데스크톱과 모바일의 환경 차이, 특정 OS간의 환경차이로 인한 경우 정확한 디버깅이 어려워 추측으로 몇가지 비교 코드를 넣어보고 원인을 찾는 방법 등으로 작업을 할 경우 작업시간 지체 및 정확한 오류판단에 어려움이 있는데 아주 완벽하진 않지만 크롬 개발자도구와 거의 비슷한 형태로 모바일 작업물을 디버깅할 수 있는 방법이 있다.

설치방법

weinre는 Node.js 기반으로 반드시 Node.js가 설치되어 있어야함. (Node.js의 설치방법은 이 글의 목적과 상이하므로 생략)

> npm install weinre -g

위처럼 npm 명령으로 설치. 특정 프로젝트에 설치하는 것보다 여러 프로젝트에 사용될 것이므로 -g 옵션을 지정해주기

💡설치해놓고 weinre 라는 단어가 정확히 기억이 나지 않아 정작 쓸 때 뭐였지 싶으니 풀네임(Web Inspector Remote)도 기억해두는 것이 좋음

실행방법

> weinre

기본 실행방법은 weinre만으로 가능하지만 이렇게 실행하면 기본 포트 8080에 호스트가 localhost로 지정되기 때문에 8080 를 다른 용도로 사용하고 있거나 모바일에서 localhost로 접속하면 해당 기기의 로컬 호스트로 접속되기 때문에 옵션으로 호스트와 포트를 지정해야한다.

> weinre --httpPort 포트번호(예:8102) --boundHost 로컬IP(예:10.20.7.x)

위와 같이 실행하여 정확한 IP와 포트로 실행 됨.

> weinre --httpPort 8102 --boundHost 10.20.7.231
2018-10-04T01:00:48.634Z weinre: starting server at http://10.20.7.231:8102

사용방법

웹브라우저에서 weinre를 실행한 URL 로 접속. (예: http://10.20.7.x:8102, 옵션 미지정시 http://localhost:8080)

1. Script를 직접 넣는 방법

Target Script 항목의 URL코드를 테스트하려는 작업 파일에 추가.

💡작업 파일에 weinre 스크립트를 포함한 경우 해당 스크립트가 로드된 이후에는 데스크톱 브라우저의 콘솔에는 아무런 로그도 찍히지 않으니 데스크톱으로 확인할 때도 weinre의 콘솔도 같이 확인 필요.

2. 북마클릿을 이용한 방법

1. weinre 접속 경로를 모바일로 접속하여 Target Bookmarklet 의 텍스트필드 항목을 복사.
2. 아무 웹페이지에 접속하여 책갈피를 추가
3. 좀 전에 추가한 책가피를 편집을 이용하여 복사한 코드 추가

💡위처럼 사용하는 방법은 테스트 특성상 여러번 페이지를 로드해야되는데 할 때마다 북마클릿을 실행해야 하므로 권하지 않지만 직접 접근할 수 없는 페이지를 확인하거나, 단순 체크 용도로 사용할 때는 적합.

확인방법

Access Points에 debug client user interface URL을 접속하면 완전히 똑같지는 않지만 크롬 개발자도구와 거의 동일한 형태로 작업 코드를 확인가능.

정상 작동되면 엘리먼트 특정 부분에 마우스를 올려보면 모바일 화면에서 해당 부분 표시되는 것을 확인할 수 있고, 콘솔 창에서 얼럿을 실행하면 모바일에서 바로 얼럿창이 표시되는 것을 확인할 수 있음.

이제 디버깅 시작~!