모바일 웹페이지 디버깅에 적합한 weinre

메모차원의 포스팅입니다.

모바일쪽 웹페이지를 조금 만지작거리면서 불편한 것이 PC처럼 브라우저를 통해 디버깅을 하기가 수월하지 않다는 점입니다.

(맥을 사용하는 관계로…)맥 + 아이폰 + Safari의 경우는 맥과 케이블을 연결하여 맥용 Safari의 디버깅 툴을 통해 가능하지만…맥 + 아이폰 + Chrome의 경우는 전혀 어떻게 해볼 방법이 없습니다. Chrome을 통해서 어느정도는 가능하지만, 실제 단말기가 아닌이상 제대로 된 동작확인은 하기가 힘든 현실입니다. 안드로이드도 마찬가지고..

결국, 예전부터 언젠가는 한번 사용해 봐야지 했었던 weinre 를 사용하여 작업해 보게 되었습니다. 결론적으로는 덕분에 풀리지 않던 문제도 한가지 풀었고 상당히 마음에 드는 툴입니다.

Install node.js

Node.js

weinre는 우선 node.js 가 인스톨되어 있어야 하니까 terminal을 열고 npm을 인스톨합니다.

stable로 안정판을 인스톨 하거나, 최신판을 사용하기 위해서는 latest를 사용합니다.

최종적으로 버전확인을 해보죠.

이미 인스톨 되어 있다면 혹시 모르니 버전확인과 업데이트를 하시길 권장합니다.
캐쉬를 먼저 삭제해준후…
sudo npm cache clean -f

npm을 업데이트 시켜줍니다.
sudo npm update -g npm
sudo npm update -g만을 사용하게 되면 전체 Global packages를 업데이트 시키게 됩니다.

Install weinre

weinre
기본 바탕을 준비했으니 weinre를 인스톨해줍니다.

네. 이걸로 끝입니다.

Running weinre

기본적으로 터미널 창에서 weinre만 치시면 localhost:8080으로 실행이 되지만, 상기와 같이 boundHost옵션을 사용하여 자신의 localhost의 IP주소를 설정해 줍니다. weinre는 기본적으로 localhost로만 접속이 가능한 관계로 boundHost를 사용하여 현재 할당되어 있는 IP주소를 지정해준후, 다른 디바이스에서 접속가능한 상태를 만들어줄 필요가 있습니다.

만약 자신의 IP주소를 모르겠다면, terminal창에서
ifconfig를 사용하여 IP주소를 확인합니다. ifconfig은 PC의 ipconfig와 같은 기능입니다.

weinre만 실행한 결과

minamiland — node /usr/local/bin/weinre — 80×24

boundHost를 사용하여 실행한 결과(유동IP를 사용중이어서 포스팅 시점에 저의 IP주소는 192.168.200.167입니다.)

minamiland — node /usr/local/bin/weinre --boundHost 192.168.200.167 — 80×24

이제 서버가 제대로 사용가능한지 확인하기 위하여 브라우저를 실행후, 지정된 http://192.168.0.x:8080으로 접속하면 아래와 같은 화면을 확인하실수 있게 됩니다.

weinre server home

weinre 디버깅 준비 – PC

페이지상의 Target Script에서 보여지는 script를 복사하여 디버깅 작업이 필요한 페이지에 붙여둡니다.
이번 테스트를 진행하면서 확인한 결과, 이작업은 패스해도 상관없었습니다.

weinre - target script

weinre 디버깅 준비 – Mobile

PC쪽 작업이 완료되었으면 이제 모바일쪽에서 필요한 설정을 할 차례입니다.
모바일브라우저를 띄우고 weinre서버에 접속합니다.


http://192.168.200.167:8080에 접속하여 Target Bookmarklet의 textarea영역에 있는 js소스를 복사합니다.
weomre-mobile-01


아무페이지나 북마크를 한후에 편집모드에 들어가서 복사해둔 js를 url영역에 붙여두고 저장합니다.
weomre-mobile-02

이로서 모든 준비작업은 완료가 된것 같습니다.

weinre 디버깅

이제 모든 준비가 끝났으니 실제 디버깅작업을 시작해 보겠습니다.


PC측 브라우저의 Access Points의 debug client user interface를 통해 디버깅화면에 접속할 수 있습니다.

weinre - access points


현재 접속된 상태에서는 디버깅 대상이 접속하지 않은 상태여서 Target이 none상태입니다.

weinre: target not connected
(**포스팅중에 잠시 시간차를 두었더니 IP가 192.168.200.104번으로 바뀌었습니다..)

테스트를 위해 네이버에 접속해 봅니다. 디버깅이 필요한 페이지에 접속후 이전 작업에서 저장해 두었던 Bookmarklet을 실행시켜주면…

weomre-sample01

단말기에서 접속했다는 것을 확인할 수 있습니다.

weinre: http://m.naver.com/

Elements탭을 클릭하여 소스를 확인후 수정을 해보겠습니다.

weinre: http://m.naver.com/

‘뉴스’를 ‘경제’로 바꾸면…

weinre: http://m.naver.com/

모바일화면에서 바로 확인 할 수 있게 됩니다.

weomre-sample02

이상입니다.
이제 필요한 부분의 동작을 확인하거나, 콘솔로 로그를 확인하여 제대로 동작하는지 등을 확인하면 PC상의 브라우저로는 동작확인이 제한되는 부분을 실제 단말기에서 문제점을 확인하며 작업을 진행 할 수 있게 됩니다.

우연찮게 새해 첫날 포스팅이 되었습니다.
새해 복 많이 받으세요~~

(Visited 1,771 times, 1 visits today)

sapjil

서울거주의 회사원으로 DESIGN/HTML/CSS를 생업으로 하고 있는 마크업 엔지니어 입니다. 프론트엔드 엔지니어로 거듭나고자 틈틈이 JavaScript를 공부하고 있습니다. 이 블로그 SAPJIL에서는 웹 사이트 제작에 필요한, 삽질을 줄일 수 있는 정보를 공유합니다.

4 thoughts on “모바일 웹페이지 디버깅에 적합한 weinre

  1. 근데 css스타일이 나와야하는데 왜 안나오죠?

  2. 안녕하세요. css 스타일이 나오지 않는다는게 어떤 현상을 말씀하시는 건지 잘 모르겠습니다만.. 소스 보기로 확인이 안 되시는 건가요?

  3. 어떤 요소를 선택했을 때 일반브라우저 개발자도구처럼 선택된 요소의 선언된 스타일이 나오는게 아니라
    빈 화면 입니다. 위에 올려주신 이미지에도 스타일이 없네요.
    와이너리 세팅을 하긴했지만 실상 쓰지는 않고 있습니다. ㅜㅜ 개발자도구처럼 요소 선택 하는 버튼도없어서 일일이 돔트리를 다 펼쳐서 원하는 요소를 찾아가야하는 것도 너무 불편하고요 https://uploads.disquscdn.com/images/049e027b0145455b3579dc16dc34741d37871fa65e64e82fb7fdbee324175a0d.png

  4. 답변이 늦어져서… 이미 해결을 하셨을 수도 있을것 같습니다만..
    대충 말씀 하시는 의도를 알것 같습니다.

    우선 요소를 선택하신뒤 1번영역(Computed Style)의 탭을 열어서 적용되어 있는 속성을 확인 하신뒤에
    2번영역(Styles)를 더블클릭하시면 속성이 추가 가능합니다. 이쪽에 1번영역의 속성을 수정(정확하게는 덮어 씌우기)하시거나 추가하시면 스마트폰에서 확인 가능하실겁니다.

    불편하긴 하지만, 아쉽게도 이 방법 이외에는 다른 방법이 없네요. 저도 잘 사용은 하지 않지만 가끔씩 필요한 경우가 생기더군요. 예전에 디버깅 환경이 지금처럼 잘 잡혀있지 않던 때의 프로그램이어서 요새는 활용도가 많이 떨어지긴 했습니다만 아직도 간혹 사용하고는 있습니다.

    답변이 되셨길 바랍니다..^^;;

    https://uploads.disquscdn.com/images/906976ad6cef8d1bbdd79afbbf1792abb1f88e4dc84f24e07a9c8fbfd6b217ad.png

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다