본문 바로가기

Ionic 3

[3] VS code에 Ionic 디버깅 환경 구성


Ionic 프로젝트를 좀 더 수월하게 진행하기 위해 Cordova Tools Extension을 설치하여 Emulator를 구동시켜 디버깅환경을 구성할 것입니다. VS code IDE 에서 Cordova Tools Extension을 설치하여 Cordova 구성요소를 추가하고 IOS 플랫폼 환경의 Emulator를 설치하고 실행시켜 보도록 하겠습니다.




Cordova Tools Extension 설치

Cordova Tools Extension: 


위의 주소에 Cordova 디버깅 환경에 대한 구성요소를 추가하도록 도와주는 Extension설치 방법이 명시되어 있습니다. 우선적으로 Cordova Tools Extension을 설치하도록 하겠습니다.


Node JS와 Cordova 설치는 이전 단계에서 이미 수행되었기 때문에 패키지 관리자인 brew를 사용한 디바이스 관련 플러그인과 Debug관련 웹킷을 설치를 수행하도록 합니다.


$ brew install ideviceinstaller ios-webkit-debug-proxy

Brew가 이미 설치되어 있을경우, Homebrew에 대한 Update와 동시에 ideviceinstaller와 ios-webkit-debug-proxy 설치를 진행하게 됩니다.


VS code에서 Debug 구성요소 추가

VS code의 Debug탭에서 자신이 원하는 Debug 환경에 대한 구성요소를 추가하여 Debugging을 수행할 수 있습니다.


1. VS code의 Debug탭에서 상단의 설정 아이콘을 클릭합니다.


2. 환경선택 탭에서 Cordova 선택합니다.


3. Attach to running IOS on simulator를 선택하여 IOS환경의 Emulator에 접근하여 Debugging을 수행할 수 있도록 합니다.


Cordova 플랫폼 추가하기

프로젝트에 Cordova 플랫폼을 추가하도록 하겠습니다.. IOS, Android에 대한 플랫폼 종류에 따른 플랫폼 추가 명령어는 아래와 같습니다. 

$ cordova platform add ios
$ cordova platform add android

명령을 수행하게 되면 프로젝트의 platforms/ios 하위로 여러종류의 Plugin, Config 등의 파일이 생성되는 것을 확인 할 수 있습니다.



플랫폼 관련 기타 패키지 다운받기

IOS 플랫폼 설치의 경우 NPM을 통해 관련 패키지를 추가적으로 설치해주어야 합니다. 

ios-deploy 설치

$ npm install -g ios-deploy


'BUILD SUCCEEDED' 메세지와 함께 ios-deploy가 설치되었습니다.

ios-sim 설치

$ cd platforms/ios/cordova && npm install ios-sim
plaltforms/ios/cordova 경로로 이동하여 ios-sim을 설치하는 명령어입니다.



Emulator 실행하기

ios-sim 설치에 대한 명령어에서 경로를 이동 해주었기 때문에 다시 프로젝트 상위 경로로 이동하여 아래의 명령어를 수행해 주어야 합니다.

$ ionic cordova build ios
$ ionic cordova run ios

마지막 명령어를 수행하게 되면 IOS환경의 Emulator가 작동하는 것을 확인 할 수 있습니다.


VS code에서 Debug 탭에서 Debug 수행 버튼을 눌러주게되면 Emulator에 접근하여 Debugging을 수행할 수 있습니다.