ionic2
Visual Studio 코드에서 Ionic 2 설정 및 디버깅
수색…
소개
Visual Studio는 Intellisense 및 코드 편집 기능을 제공하는 오픈 소스 IDE입니다.이 IDE는 (Ionic, C, C #, AngularJs, TypeScript, Android 등)와 같은 많은 언어를 지원합니다. 이러한 언어는 VSCode에 Extensions를 추가하여 코드를 실행할 수 있습니다. VSCode를 사용하여 다른 언어의 코드를 실행하고 디버깅 할 수있었습니다.
VSCode 설치
먼저 VSCode를 다운로드하여 설치해야합니다. 이 VSCode 최신 버전은 공식 웹 사이트 에서 다운로드 할 수 있습니다. VSCode를 다운로드 한 후 설치하고여십시오.
Introduction of Extensions in VSCode
VSCode는 공개 편집기이므로 모든 언어에 대한 편집기를 제공하지만 특정 언어에 대한 Extension을 추가하는 데 필요한 코드를 실행할 수 있습니다. 이온 코드를 실행하고 편집하려면 yourVSCode에 ionic2-vscode Extension을 추가해야합니다. VSCode Editor의 왼쪽에는 가장 작은 아이콘 하나가 Extension에 사용되는 5 개의 아이콘이 있습니다. 바로 가기 키 (ctrl + shift + X) 를 사용하여 가져올 수있는 확장 프로그램.
Add Extension for Ionic2 in VsCode
ctrl + shift + X 를 누름으로써 확장의 일부분을 보여 주며, 맨 위에 3 개의 점이 표시됩니다 ... 이 점들은 아이콘으로 더 많이 알려져 있습니다. 클릭하면 대화 상자가 열리고 선택할 수있는 옵션 수가 표시됩니다. 필요에 따라 옵션을 선택하십시오. 그러나 모든 확장을 얻으려면 추천 확장 보기를 선택하십시오. 확장 (ionic2-vscode),npm 설치할 수있는 모든 확장 목록 (ionic2-vscode),npm
VSCode에 이온 프로젝트 생성 및 추가
VsCode는 코드 편집기이기 때문에 이온 프로젝트를 만들 수 없습니다. CLI 또는 cmd를 사용하여 이온 프로젝트를 만들 수 있습니다. 아래 명령으로 프로젝트를 작성하십시오.
$ ionic start appName blank
위의 명령은 빈 템플릿 ionic 응용 프로그램을 만드는 데 사용합니다. Ionic2는 공백, 탭 및 사이드 메뉴의 세 가지 유형의 템플리트를 제공합니다. 그래서. 빈 템플릿을 다른 두 템플릿으로 대체 할 수 있습니다.
이제, 당신의 이온 프로젝트가 생성되었습니다. 따라서 프로젝트를 VSCode에 추가하여 편집 할 수 있습니다. 프로젝트를 추가하려면 다음을 따르십시오.
- VScode의 파일 메뉴로 이동하십시오.
- 파일 메뉴에서 폴더 열기를 클릭하십시오.
- 프로젝트 폴더를 찾아 엽니 다.
단축키 ctrl + O 또는 Ctrl + K 를 사용하여 폴더를 직접 열 수 있습니다.
`
실행 및 귀하의 이온 프로젝트 디버그
> Chrome에서 실행 및 디버그
ionic 프로젝트 를 실행하려면 터미널이나 cmd 또는 CLI 에서 아래 명령을 사용하십시오.
$ ionic serve
ionic 프로젝트 를 디버깅 하려면 우선 Extension (Chrome 용 디버거)을 추가하고 launch.json 파일을 다음과 같이 구성해야합니다.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
> Android에서 실행 및 디버그
Android에서 Run ionic 프로젝트 를 실행 하려면 터미널이나 cmd 또는 CLI에서 아래 명령을 실행하여 Android 플랫폼을 추가해야합니다.
$ ionic cordova platform add android
이 명령으로 Android 빌드
$ ionic cordova build android
안드로이드 플랫폼 용 명령 실행
$ ionic cordova run android
이제 실제 Android 기기에서 애플리케이션이 실행됩니다.
Android 디바이스로 디버그 하려면 VSCode에 Cordova 또는 Android Extension 을 추가해야합니다. 이렇게 launch.json 파일을 구성하십시오.
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Android on device",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "device",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Run iOS on device",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "device",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Attach to running android on device",
"type": "cordova",
"request": "attach",
"platform": "android",
"target": "device",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Attach to running iOS on device",
"type": "cordova",
"request": "attach",
"platform": "ios",
"target": "device",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Run Android on emulator",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "emulator",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Run iOS on simulator",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "emulator",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Attach to running android on emulator",
"type": "cordova",
"request": "attach",
"platform": "android",
"target": "emulator",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Attach to running iOS on simulator",
"type": "cordova",
"request": "attach",
"platform": "ios",
"target": "emulator",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Serve to the browser (ionic serve)",
"type": "cordova",
"request": "launch",
"platform": "serve",
"cwd": "${workspaceRoot}",
"devServerAddress": "localhost",
"sourceMaps": true,
"ionicLiveReload": true
},
{
"name": "Simulate Android in browser",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "chrome",
"simulatePort": 8000,
"livereload": true,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Simulate iOS in browser",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "chrome",
"simulatePort": 8000,
"livereload": true,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
}
]
}
구성 후에는 디버깅을 위해 다음 단계 또는 단축키를 따르십시오.
디버그 메뉴로 이동하십시오.
디버깅 시작을 클릭하십시오.
또는
Short keys
디버깅 - F5
StepOver - F10
스텝 인 및 스텝 아웃 - F11
디버깅 중지 - Shift + F5
디버깅 다시 시작 -ctrl + shift_F5