[디버깅] iOS7 아이폰의 모바일 사파리 개발자 도구/콘솔 툴 사용하기

* 이번에 localStorage를 사용하면서 안드로이드에서는 되는데 아이폰에서만 안되는 독특한(?) 현상 때문에 애를 먹다가 옛날에 모바일 브라우져 환경에서 디버깅을 하는데 사용했던 툴을 깔아야하나 고민 중이었는데, 아이폰용 사파리의 아주 편리한 기능을 알게 되었다. 작년에 웹페이지에 라이브러리를 깔아가면서 모바일을 디버깅했던 때와 비교하면 아주 혁신적으로 엄청 편리해진 것을 발견할 수 있을 것이다.

 

 

* 웹속성 사용하기

: 모바일에서 디버깅을 하기 위한 툴이 부족한 상황에서 모바일에서의 자바스크립트를 디버깅하는 것은 매번 alert를 띄우거나 조금 부실한 아이패드에서 사파리 디버깅 콘솔을 설정해서 console.log를 사용하는 정도이었는데, 이 웹속성 기능을 사용하게 되면 조금 느리기는 하지만 마치 데스크탑에서 하는 것과 비슷하게 디버깅이 가능하다.

 

 

* 웹속성 설정하기

: 아이폰에서 웹속성을 설정하는 방법은 간단하다.

 

"설정 > 고급 > 웹속성 켜기"

: 이렇게만 설정하면 아이폰에서는 끝이다. 웹속성 아래에 있는 문구를 보면 어떻게 사용해야할지에 대한 방법도 알 수 있다.

 

"웹 속성을 사용하려면 케이블을 사용하여 컴퓨터의 Safari에 연결한 다음 개발자용 메뉴에 있는 iPhone에 접근하십시오. 컴퓨터의 Safari에 있는 고급 환경 설정에서 개발자용 메뉴를 활성화할 수 있습니다."

 

   

: 이렇게 설정하면 사파리가 있는 데스크탑에서 개발자용 메뉴를 선택해보면 iPhone이 나오게 되고 현재 아이폰에서 열고 있는 웹페이지의 개발자 도구를 데스크탑에서 띄울 수 있도록 뜬다.

: 혹시 개발자용 메뉴가 뜨지 않는다면 사파리의 고급환경설정 또는 Preference 안에 들어가서 개발자도구 활성화를 선택하면 윈도우의 메뉴에 개발자용 메뉴가 팝업된다.

 

: 이렇게 해당하는 아이폰과 웹사이트를 선택하게 되면 아래와 같이 별도의 디버깅 콘솔창이 뜨게 되고 아이폰의 모바일 사파리의 개발자 도구를 데스크탑으로 가져와서 볼 수 있게 된다. 이제 그동안 불편하게 alert을 띄우거나 한정적인 console.log만을 봐가면서 디버깅했던 시절도 끝이다.

 

* 개인적인 의견

: 재작년에 모바일 환경에7서 자바스크립트를 디버깅하려고 웹페이지에 추가적인 라이브러리를 설치하고 서버에도 프로그램을 깔아서 쓰곤 했었는데 이제는 브라우져단에서 이러한 것을 전부다 지원해준다. 이런 편리한 기능을 자바스크립트 개발자로서 잘 활용하는 것이 개발 기간을 단축시킬 수 있는 효율적인 도구의 활용이 될것이다.

 

: 작년에 사용했던 모바일 환경의 자바스크립트 디버깅을 도와주는 라이브러리에 대한 글을 쓰고 싶었는데 어느새 2년이나 지나서 훨씬 더 편리한 기능이 나와버렸다. 하지만 이것은 현재 아이폰에서의 기능이므로 안드로이드까지 전부다 활용 가능한 라이브러리를 다음에 기회가 되면 소개하도록 하겠다.

끝.