執行並除錯你的 Ionic 專案

>在 Chrome 中執行和除錯

terminal 或 cmd 或 CLI 中執行 ionic 專案,請使用以下命令 ****

 $ ionic serve

對於除錯離子專案,首先應該新增擴充套件 (用於 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

執行 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}"
            }
]
}

配置完成後,請按照以下步驟或短按鍵進行除錯:

  1. 轉到除錯選單。

  2. 單擊開始除錯

    要麼

Short keys
  • 除錯 - F5

  • StepOver - F10

  • 步入和退出 - F11

  • 停止除錯 - Shift + F5

  • 重啟除錯 -ctrl + shift_F5