本文へスキップ
バージョン: v8

デバッグ

ライブリロード​

ライブリロードは、デバイスのハードウェア上でネイティブ機能（プラグインなど）をデバッグするのに役立ちます。コードを変更するたびに新しいネイティブバイナリをデプロイする代わりに、アプリの変更が検出されるとブラウザ（またはWebView）をリロードします。詳細はこちら。

iOSとSafari​

Safariを使用して、接続されたiOSデバイスまたはiOSシミュレーターでIonicアプリをデバッグできます。

まず、iOSデバイスで、「設定」>「Safari」>「詳細」からWebインスペクターを有効にします。

次に、MacでSafariを開き、「Safari」>「環境設定」>「詳細」でメニューバーに「開発」メニューを表示を有効にします。

iOSシミュレーターを実行するか、iOSデバイスをMacに接続して、デバッグするIonicアプリを実行します。

Safariで、ツールバーの「開発」を選択します。ドロップダウンメニューのオプションに、デバイス名とアプリ名が表示されます。アプリ名の上にカーソルを合わせ、「localhost」をクリックします。これにより、Safariデベロッパーツールを含む新しいウィンドウが開きます。これを使用して、デバイスで実行されているIonicアプリを検査およびデバッグします。

AndroidとChrome​

ionic serveコマンドを使用してブラウザで実行されているアプリ、エミュレーターにデプロイされたアプリ、または物理デバイス上のアプリをデバッグするには、Google ChromeのDevToolsを使用します。

物理デバイスを検査するには、まずデベロッパーモードを有効にする必要があります。Androidデバイスをコンピューターに接続し、「設定」>「端末情報」に移動して「ビルド番号」を7回タップします。「設定」メニューに「開発者向けオプション」という新しいオプションがアクティブになります。

次に、「設定」>「開発者向けオプション」に移動し、開発者向けオプションのスイッチがオンになっていることを確認します。「USBデバッグ」までスクロールして、これも有効になっていることを確認します。開発者向けオプションとUSBデバッグは、Androidエミュレーターではデフォルトで有効になっています。

Chromeブラウザを開き、URL chrome://inspect/#devicesに移動します。接続されているAndroidデバイスがリモートターゲットのリストに表示されます。

デバイスで、Chromeを使用してデバッグするIonicアプリを開きます。

デバイスでアプリを実行したら、Chromeに戻り、リモートターゲットのリストにあるデバイスの下の「検査」をクリックします。これにより、新しいウィンドウにChromeデベロッパーツールが開きます。その後、Chrome DevToolsを使用して、デバイスで実行されているアプリケーションをデバッグできます。

注記

小さなバグのため、Chromeデベロッパーツールを開いてもアプリプレビューが自動的に表示されない場合があります。表示するには、「要素」タブをクリックし、任意のDOM要素をクリックしてから、任意のCSSルールをオンオフすると、アプリプレビューウィンドウが表示されます。

ChromeでのVisual Studioによるローカルデバッグ（AndroidとiOS両方）​

Visual Studio Codeを使用して、Chromeウェブブラウザで実行されているIonicアプリをデバッグすることもできます。

これを行うには、ionic serveを使用してブラウザでアプリを実行します。アプリが実行されているポートを書き留めておきます。次に、Visual Studio Codeを使用してIonicプロジェクトを開きます。

VS Codeの左端の垂直メニューで、「実行」アイコンをクリックします。プロジェクトで初めて設定する場合は、「launch.json」ファイルを作成するオプションをクリックします。環境オプションのドロップダウンからChromeを選択します。これにより、localhostに対してChromeを起動するための設定を含むlaunch.jsonファイルが自動的に生成されます。

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キーで異なる値を試行して、スクリプトのパスが正しいことを確認してください。

目次

このページを編集する