Weinre 디 버 깅 모 바 일 사이트 및 PhoneGap 응용 프로그램 사용

PC 에서 저 희 는 Firebug 나 Chrome 개발 자 도구 로 편리 한 디 버 깅 사이트 나 웹 애플 리 케 이 션 을 사용 할 수 있 습 니 다.그러나 우리 가 모 바 일 디 버 깅 사이트 나 응용 을 하려 고 할 때 이 도구 들 은 쓸모 가 없다.그래서 모 바 일 개발 자 들 은 모 바 일 버 전이 있 기 를 원한 다. Firebug 크롬 개발 자 도구 나Weinre 는 바로 이러한 도구 로 우리 가 모 바 일 사이트 와 Phone Gap 응용 프로그램 을 디 버 깅 하 는 데 도움 을 줄 수 있다.
Weinre 소개
Weinre 를 사용 하기 전에 우 리 는 먼저 Weinre 의 기본 개념 을 알 아 보 자.Weinre 의 전 칭 은 Web Inspector Remote(원 격 웹 디 버 깅 도구)로 Firebug,Webkit Inspector 와 유사 하 며 모 바 일 브 라 우 저 에 있 는 웹 페이지 나 애플 리 케 이 션 을 PC 에서 원 격 디 버 깅 하여 DOM 요소,CSS 스타일,JavaScript 등 을 즉시 디 버 깅 할 수 있 습 니 다.
Weinre 를 사용 하 는 목적 은 모 바 일 브 라 우 저 에서 실행 되 는 웹 사이트 나 응용 프로그램 을 디 버 깅 하 는 것 입 니 다.우 리 는 이 모 바 일 장 치 를 디 버 깅 목표(Debug Target)라 고 부 릅 니 다.모 바 일 장치 에서 직접 디 버 깅 을 하 는 것 이 불편 하기 때문에 Weinre 는 데스크 톱 의 전통 적 인 webkit 환경(예 를 들 어 Web Inspector 나 Google Chrome 개발 자 도구)을 사용 하여 디 버 깅 을 할 수 있 도록 도와 주 었 습 니 다.저 희 는 이 데스크 톱 디 버 깅 환경 을 디 버 깅 클 라 이언 트(Debug Client)라 고 부 릅 니 다.
Weinre 는 데스크 톱 의 디 버 깅 클 라 이언 트 와 모 바 일 장치 의 디 버 깅 목 표를 동기 화하 기 위해 디 버 깅 서버(Debug Server)를 구축 해 야 합 니 다.따라서 Weinre 를 사용 하여 원 격 장치 디 버 깅 을 할 때 위의 세 가지 요 소 를 포함 합 니 다.

디 버 깅 서버:디 버 깅 서버 는 프 록 시 역할 을 하 며 디 버 깅 목표 와 디 버 깅 클 라 이언 트 간 의 명령 을 동기 화 합 니 다.

디 버 깅 클 라 이언 트:이것 은 웹 Inspector 인터페이스,즉 개발 자가 브 라 우 저 에서 디 버 깅 을 하 는 인터페이스 입 니 다.

디 버 깅 목표:디 버 깅 이 필요 한 페이지 는 웹 콘 텐 츠 를 디 버 깅 하 는 브 라 우 저 를 실행 하 는 모 바 일 장 치 를 말 합 니 다.

Weinre 의 디 버 깅 목표 와 클 라 이언 트 는 모두 브 라 우 저 에서 실행 되 고 디 버 깅 서버 는 HTTP 서버 방식 으로 양자 의 중개 로 실 행 됩 니 다.Patrick Mueller 의 Weinre 에 관 한 수첩 에서 이런 관 계 를 설명 했다.더 자세 한 설명 은 다음 과 같 습 니 다.http://muellerware.org/papers/weinre/manual.html。
Weinre 설치 및 실행
Weinre 의 디 버 깅 서버 는 Node.js 를 기반 으로 이 루어 졌 기 때문에 Weinre 를 설치 하기 전에 Node 운영 환경 을 설치 해 야 합 니 다.
Node 패키지 관리 도 구 를 통 해 설치 가능:

npm -g install weinre

설치 가 되면 Weinre 를 시작 할 수 있 습 니 다.Weinre 는 6 개의 선택 가능 한 시작 파 라 메 터 를 제공 합 니 다.그 중에서 다음 두 개의 파 라 메 터 는 일반적으로 수정 되 고 다른 것 은 기본 값 으로 하면 됩 니 다.

-httpPort 디 버 깅 서버 가 실행 하 는 포트 입 니 다.기본 8080 입 니 다.이 포트 가 사용 되 고 있다 면 다른 포트 로 바 꿀 수 있 습 니 다.

-boundHost 디 버 깅 서버 에 연 결 된 IP 주 소 는 도 메 인 이름 일 수도 있 고 기본 값 은 localhost 이 며-all-로 설정 하여 현재 기계 가 접근 할 수 있 는 모든 인터페이스 에 연 결 된 것 을 표시 합 니 다.다음 과 같다.

weinre --boundHost -all-

이 설정 들 은 Weinre 루트 디 렉 터 리 에서 도 만 들 수 있 습 니 다. server.properties 파일 설정,내용 은 다음 과 같 습 니 다.

boundHost:    -all-
httpPort:     8081
reuseAddr:    true
readTimeout:  1
deathTimeout: 5

주의해 야 할 것 은 명령 행 에 설 정 된 매개 변 수 는 파일 설정 의 인 자 를 덮어 씁 니 다.
Weinre 의 사용
Weinre 를 성공 적 으로 시작 하면 바 인 딩 된 IP 나 도 메 인 이름 에 포트 를 추가 하여 Weinre 서버 에 접근 할 수 있 습 니 다.http://localhost:8081 예 를 들 면).웹 키 트 의 핵심 브 라 우 저(예:Chrome,Safari 등)에서 Weinre 서버 홈 페이지 를 엽 니 다.
서버 홈 페이지 에 두 가지 내용 이 중요 합 니 다.

A 는 디 버 깅 클 라 이언 트 페이지 에 연결 되 고 열 면 기본 값 은 원 격 패 널 로 갑 니 다.아래 그림 과 같 습 니 다.

B 목표 코드,이 코드 는 디 버 깅 이 필요 한 페이지 에 추가 하고 책 갈피 로 동적 으로 추가 할 수 있 습 니 다.

원 격 패 널 은 모두 네 부분 입 니 다:

A 패 널 전환,Chrome 또는 Safari 사용 개발 자 도구 가 이 인터페이스 에 익숙 할 것 입 니 다.

B 는 디 버 깅 서버 의 페이지,즉 디 버 깅 할 수 있 는 페이지 에 연결된다.

C 디 버 깅 서버 에 연 결 된 클 라 이언 트 는 현재 하나 입 니 다.

D 디 버 깅 서버 속성,연 결 된 포트 와 디 버 깅 서버 가 응답 할 수 있 는 IP 주소 목록 입 니 다.

원 격 패 널 외 에 요소 패 널,자원 패 널,네트워크 패 널,타임 라인 패 널 과 콘 솔 도 있 습 니 다.뒤에 있 는 웹 개발 자 들 은 모두 잘 알 고 있 기 때문에 일일이 소개 하지 않 습 니 다.
Weinre 가 지원 하 는 플랫폼
지원 하 는 디 버 깅 클 라 이언 트(디 버 깅 인터페이스 를 실행 하 는 브 라 우 저):

Google Chrome

Apple Safari

기타 웹 키 트 기반 브 라 우 저

지원 하 는 디 버 깅 목표(디 버 깅 이 필요 한 사이트 나 응용 인터페이스):

안 드 로 이 드 브 라 우 저 응용 프로그램

iOS 모 바 일 Safari 응용 프로그램

PhoneGap/Cordova

other　

지원 하지 않 는 디 버 깅 대상:

iOS 3.1.3 및 이전 버 전

webOS 1.45 및 더 빠 른 버 전

꿈 의 하늘