본문 바로가기

프로그래밍/Web

크롬 모바일 버젼을 사용한 모바일 웹 페이지 디버깅

반응형

크롬 모바일 버젼을 사용해서 모바일 웹 페이지 디버깅하는 방법.

폰에서 웹페이지를 띄우고 컴퓨터의 크롬에서 개발자 도구로 디버깅 정보를 확인한다.

데스크탑에는 안드로이드 SDK와 크롬이 설치되어 있어야 한다.


폰에서 크롬을 실행한 후 메뉴 버튼을 눌러서 설정 화면으로 간다.

개발자 도구를 선택하고, USB 웹 디버깅 도구 사용을 활성화 시킨다.

컴퓨터와 폰을 USB 케이블로 연결한다.


컴퓨터에서 명령 프롬프트를 열고 

adb devices

를 실행해 본다. 연결된 장치 목록이 나면 정상이다.

잘 안되면 환경변수의 PATH등을 건드려 보거나 폰의 설정을 건드려 본다. 자세한 설명은 생략한다.


이제 명령 프롬프트에서

adb forward tcp:9222 localabstract:chrome_devtools_remote

를 실행한다.


컴퓨터의 크롬을 실행한 후 주소창에

localhost:9222

을 입력한다.

이 때, 브라우저에는 폰에 실행중인 탭 목록이 나타난다. 그 중 하나를 선택하면 된다.


짜잔~!


덧.
이 글의 주된 작성 목적은 명령 프롬프트에 일일이 타이핑 하기 귀찮을 때 간단히 복사해서 붙여넣기 위함이다.

반응형

'프로그래밍 > Web' 카테고리의 다른 글

나만의 SNS 공유 버튼을 만들다  (1) 2014.08.31
아마존 EC2 우분투 웹서버 설정  (0) 2014.07.23
로컬 네트워크에서 WAMP 접속  (0) 2013.01.08
WAMP 환경에서 mod_rewrite를 사용  (0) 2012.12.17
jQuery Mobile  (0) 2012.03.31