1. 문서의 목적
안드로이드 폰에 설치된 모바일용 크롬 브라우저의 웹 디버깅 기능에 관련된 설정을 알아 보도록 한다.
2. 사전 준비 사항
- 안드로이드폰 에 모바일용 크롬 브라우저가 설치 되어 있어야 한다.
- PC 에도 크롬 브라우저가 설치 되어 있어야 한다.
- PC 에 휴대폰 제조사의 USB 드라이버가 설치 되어 있어야 한다.
- 휴대폰 과 PC를 USB 케이블로 연결해 둔다.
3. 안드로이드 SDK 다운로드
다운로드 링크 : http://developer.android.com/sdk/index.html
자신의 시스템에 맞는 것을 내려 받아 설치 한다. 이 문서에서는 Windows 용 zip 파일을 내려 받아 설정 하는 방향으로 진행 하였다.
참고 : 안드로이드 SDK 를 설치 하는 이유는 adb 명령을 사용 하기 위함 이며, 따로 배포 되는 adb 명령을 가지고 있는 경우 이 단계를 생략 할 수 있다.
4. 안드로이드 SDK 압축 해제
다운로드 받은 zip 파일을 적당한 디렉터리에 압축 해제 한다. 이 문서에서는 C:\android-sdk-windows 에 압축을 해제 하였다.
5. Android SDK Platform-tools 설치
안드로이드 SDK 를 압축 해제한 디렉토리로 이동 하여 SDK Manager.exe 를 실행 한다.
위 그림과 같이 Android SDK Platform-tools 를 선택 하고 설치 하도록 한다. 필요한 경우 이 단계에서 필요한 AVD 를 선택 하여 설치 하여도 된다.
위 그림과 같이 Accept All 을 선택 후 Install 버튼을 클릭 한다.
Android SDK Platform-tools 설치가 완료 되면, Close 버튼을 클릭 하여 창을 닫는다. 이전에 실행 하였던, Android SDK Manager 창도 닫는다.
6. adb 명령어 위치 확인
C:\android-sdk-windows\platform-tools 로 이동 하면, 위의 그림과 같이 adb.exe 파일 이 보이면 정상적으로 설치가 된 것이다. adb 명령어가 있는 위치를 PATH 환경 변수에 추가 하기 위해 기억해 두도록 한다.
7. 환경 변수에 안드로이드 SDK 위치 추가
시스템의 어느 곳에서든 adb 라는 명령을 사용 할 수 있도록 운영체제의 환경 변수에 추가 해 주어야 한다. 이 과정은 필수가 아니며, 경로 추가가 귀찮은 경우 안드로이드 SDK 가 설치된 디렉터리의 adb 명령어가 있는 위치로 매번 이동 하여 adb 명령을 사용해도 된다.
위의 그림과 같이 adb.exe 명령이 있는 위치를 PATH 환경변수에 추가 하여 주도록 한다.
8. adb 명령어 확인
도스창을 열어 adb version 명령을 내려 위와 같이 나오는지 확인 한다. 안나오는 경우 "7. 환경 변수에 안드로이드 SDK 위치 추가" 부분을 다시 확인 하도록 한다.
9. 모바일용 크롬 설정
모바일 크롬을 실행 후 메뉴키를 눌러 나타나는 메뉴에 "설정" 을 선택 한다.
"개발자 도구" 를 선택 한다.
"USB 웹 디버깅 사용" 에 체크 한다.
10. adb 명령어의 사용
도스 창을 열어 아래의 명령어를 복사하여 붙여 넣고 실행 한다.
c:\> adb forward tcp:9222 localabstract:chrome_devtools_remote
* 9222 외 다른 포트를 사용하고 싶은 경우 다른 포트를 사용하여도 무관 한다.
PC의 브라우저에서 접속시 위의 명령어에서 지정한 포트로 접근 하면 된다.
11. 테스트용 웹페이지 작성
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
console.log("웹 디버깅에서 이 메세지가 보이나요?");
function sayHello(){
console.log("i say hello, you say world.");
return;
}
</script>
</head>
<body onLoad="javascript:sayHello();">
<input type="button" onClick="javascript:sayHello();" value="hello" />
</body>
</html>
12. PC 에서 크롬 브라우저를 이용 하여 확인
PC 의 크롬 브라우저를 열고 http://localhost:9222 의 주소로 접속 하면, 위의 그림과 같이 현재 휴대전화의 모바일 크롬 브라우저에 떠 있는 화면들이 나타나고, 디버깅이 필요한 화면을 선택 하여 디버깅 화면을 볼 수 있다.
위와 같이 디버깅 관련 메세지나 내용등을 확인 할 수 있다.
댓글 없음 :
댓글 쓰기