[모바일/웹] 크롬 인스펙터로 하이브리드 앱 디버깅 하기(Chrome Inspect)

하이브리드 앱을 개발하다 보면 디버깅을 어떤 방식으로 할까? 고민을 많이 하게 된다.

가장 보편적인 방법인 크롬 인스펙터로 연동해서 디버깅 하는 방법을 살펴보자.

 

순서는 다음과 같이 디버깅할 수 있다.

1. IDE에서 에뮬레이터 또는 디바이스로 하이브리드 앱 실행

2. 크롬 실행 후 주소창에 chrome://inspect 입력

3. 인스펙트할 디바이스 선택

4. 크롬 개발자 도구 켠 후 디버깅

 

아래 그림처럼 디바이스가 목록에 나오며, inpect 를 누르면 디버깅 창이 뜨게 된다.

 

아래와 같이 디버깅 창을 통해서 각 컴포넌트와 연관되는 소스도 보고, CSS도 수정해보고, 오류도 찾아보며 즐거운 개발자 생활을 해보도록 하자.