ionic2
Настройка и отладка Ionic 2 в коде Visual Studio
Поиск…
Вступление
Visual Studio - это среда с открытым исходным кодом, которая предоставляет средство intellisense и редактирования для кода. Эта среда IDE поддерживает многие языки, такие как (Ionic, C, C #, AngularJs, TypeScript, Android и т. Д.). Эти языки могут выполнять там код, добавляя свои расширения в VSCode. Используя VSCode, мы можем запускать и отлаживать код на разных языках.
Установка VSCode
Во-первых, вам нужно загрузить и установить VSCode. Последняя версия VSCode доступна для загрузки на официальном сайте . После загрузки VSCode вы должны установить и открыть его.
Introduction of Extensions in VSCode
VSCode - это открытый редактор, поэтому он предоставляет редактор для всех языков, но для выполнения кода, необходимого для добавления расширения для этого конкретного языка. Для запуска и редактирования вашего ионного кода вы должны добавить расширение ionic2-vscode в свой VSCode. В левой части редактора VSCode имеется 5 значков, в которых для расширения используется самый низкий значок. Расширения, которые вы можете получить, используя комбинацию клавиш (ctrl + shift + X) .
Add Extension for Ionic2 in VsCode
При нажатии Ctrl + Shift + X вы показали часть расширения , где на показаны первые три точки ... эти точки известны как более icon.On щелчком него диалог открыт и показывает число вариантов выбора .Вы может выберите вариант в соответствии с вашими потребностями, но для получения всего расширения вы должны выбрать « Рекомендуемое расширение». iN список всех eXtension вы можете установить расширение (ionic2-vscode),npm
Создание и добавление вашего Ионного проекта в VSCode
VsCode не может создать ионный проект, потому что это редактор кода. Таким образом, вы можете создать свой ионный проект с помощью CLI или cmd . создайте свой проект по команде ниже
$ ionic start appName blank
Выше команда используется для создания чистого ионного приложения шаблона. Ionic2 предоставляет три типа шаблонов: пустые, вкладки и sidemenu . Так. вы можете заменить пустой шаблон на любые другие два шаблона в соответствии с вашими потребностями.
Теперь ваш Ионный проект был создан. Таким образом, вы можете добавить свой проект в VSCode для редактирования. Чтобы добавить свой проект, следуйте ниже.
- Перейдите в меню « Файл» в VScode.
- Нажмите « Открыть папку» в меню «Файл».
- Найдите и откройте папку проекта.
Вы можете напрямую открыть папку с помощью сочетания клавиш Ctrl + O или Ctrl + K
`
Запуск и отладка вашего Ионного проекта
> Запуск и отладка в Chrome
Для запуска использования ионного проекта ниже команды в терминале или CMD или CLI
$ ionic serve
Для отладки ионного проекта сначала необходимо добавить расширение (Debugger for 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 вы должны добавить платформу Android под командой ниже в терминале или cmd или CLI:
$ ionic cordova platform add android
Создайте Android по этой команде
$ ionic cordova build android
Запустить команду для платформы Android
$ ionic cordova run android
Теперь ваше приложение работает на реальном устройстве Android.
Для отладки в Android-устройстве вам нужно добавить Cordova или Android Extension в VSCode. и настройте файл 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
Stop Debugging - Shift + F5
Перезапустить отладку -ctrl + shift_F5