跳至主要內容
版本：v8

偵錯

即時重新載入​

即時重新載入對於在裝置硬體上偵錯原生功能（例如外掛程式）很有用。當應用程式中的變更被偵測到時，它會重新載入瀏覽器（或 WebView），而不是每次進行程式碼變更時都部署新的原生二進位檔案。在此處了解更多資訊。

iOS 和 Safari​

Safari 可以用來偵錯連線的 iOS 裝置或 iOS 模擬器上的 Ionic 應用程式。

首先，在 iOS 裝置上，從「設定」>「Safari」>「進階」啟用「網頁偵測器」。

接下來，在 Mac 上開啟 Safari，然後在「Safari」>「偏好設定」>「進階」下啟用「在選單列中顯示『開發』選單」。

執行 iOS 模擬器或將 iOS 裝置連接到 Mac，然後執行您要偵錯的 Ionic 應用程式。

在 Safari 中，選取工具列中的「開發」。在下拉選單選項中，您應該會看到您的裝置和應用程式的名稱。將滑鼠懸停在應用程式名稱上，然後按一下「localhost」。這將會開啟一個新的視窗，其中包含 Safari 開發人員工具 - 使用它們來檢查和偵錯在您的裝置上執行的 Ionic 應用程式。

Android 和 Chrome​

使用 Google Chrome 的 DevTools 來偵錯應用程式，當它使用 ionic serve 命令在瀏覽器中執行、部署到模擬器或在實體裝置上執行時。

若要檢查實體裝置，首先您需要啟用開發人員模式。將您的 Android 裝置連接到電腦，然後前往 「設定」>「關於」，捲動至 「建置編號」 並點擊該項目 7 次。這將會在「設定」選單中啟用一個名為「開發人員選項」的新選項。

接下來，前往 「設定」>「開發人員選項」，並確保開發人員選項開關已開啟。向下捲動至「USB 偵錯」，並確保它也已啟用。在 Android 模擬器中，預設會啟用「開發人員選項」和「USB 偵錯」。

開啟 Chrome 瀏覽器並瀏覽至 URL chrome://inspect/#devices。您連線的 Android 裝置應該會顯示在「遠端目標」清單中。

在您的裝置上，開啟您想要使用 Chrome 偵錯的 Ionic 應用程式。

在您的應用程式於裝置上執行時，回到 Chrome 並按一下「遠端目標」清單中裝置下的「檢查」。這將會在新的視窗中開啟 Chrome 開發人員工具。然後，您可以使用所有的 Chrome DevTools 來偵錯應用程式，就像它在您的裝置上執行一樣。

注意

由於一個小錯誤，當您開啟 Chrome 開發人員工具時，應用程式預覽可能不會自動出現。若要使其出現，請按一下「元素」索引標籤，然後按一下任何 DOM 元素，接著關閉並開啟任何 CSS 規則，應用程式預覽視窗就會出現。

使用 Visual Studio 在本機於 Chrome 中偵錯 (Android 和 iOS)​

Visual Studio Code 也可以用來偵錯在 Chrome 網頁瀏覽器中執行的 Ionic 應用程式。

若要執行此操作，請使用 ionic serve 在瀏覽器中執行您的應用程式。記下您的應用程式正在執行的連接埠。接下來，使用 Visual Studio Code 開啟您的 Ionic 專案。

在 VS Code 最左側的垂直選單中，按一下 「執行」 圖示。如果您是在專案中第一次設定此項，請按一下建立 launch.json 檔案的選項。從環境選項下拉式選單中選取「Chrome」。這將自動產生一個 launch.json 檔案，其中包含針對 localhost 啟動 Chrome 的組態。

請確保您 launch.json 檔案的 url 屬性中使用的連接埠與您稍早執行 ionic serve 時觀察到的連接埠相符。使用不正確的連接埠號碼將無法運作。

在偵錯目標下拉式選單中，選取「對 Chrome 啟動」，然後按一下「執行」。這將會開啟 Chrome 瀏覽器的新執行個體，而 VS Code 會附加到該執行個體。您可以在應用程式於 Chrome 中執行時設定中斷點，並使用 VS Code 中的其他偵錯工具。

在 Android 中使用 Visual Studio Code 偵錯​

Visual Studio Code 有一個專用的外掛程式，可用於偵錯在 Android WebView 中執行的應用程式。

此外掛程式 會在裝置和 Visual Studio Code 開發人員工具之間建立橋樑，並允許直接從編輯器進行偵錯。

為了使用此外掛程式來偵錯您的 Ionic 應用程式，請先安裝它，然後在 Android 模擬器中啟動您的應用程式，或連接您的 Android 裝置並執行該應用程式。您可能需要在您的 Android 裝置上啟用 USB 偵錯。

在您的 Ionic 專案的根目錄中，建立一個名為 .vscode 的資料夾，然後在該資料夾內建立一個名為 launch.json 的檔案。在 launch.json 內，輸入下列程式碼來組態外掛程式以偵錯 Ionic 應用程式

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "android-webview",
      "request": "attach",
      "name": "Attach to Android WebView",
      "webRoot": "${workspaceFolder}/www",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${workspaceFolder}/*"
      }
    }
  ]
}

接下來，啟動偵錯程序，選取您的裝置和 Ionic 應用程式。VS Code 將會附加到 Android 裝置和 Ionic 應用程式，而您現在可以偵錯您的應用程式，其中包含設定中斷點。

注意

如果您無法設定中斷點並收到錯誤訊息，指出 「已忽略中斷點，因為找不到產生的程式碼 (來源對應問題？)」，這表示轉譯後的 javascript 檔案的路徑不正確。在偵錯主控台中使用 .scripts 命令來查看已載入的指令碼。透過在您 launch.json 組態檔中的 sourceMapPathOverrides 金鑰中試用不同的值，以確保指令碼的路徑正確。

內容

編輯此頁面