以下は、Ionicプロジェクトのバグのトラブルシューティングを開始する方法の概要です。

序章

Ionicで開発するときに発生するバグには主に2つのタイプがあります。

Webバグ

最初のタイプは、ブラウザーで再現できるバグであり、アプリのネイティブ機能とは関係ありません。 これらのWebテクノロジーのバグは、Web開発の他のバグと同じようにトラブルシューティングされる可能性があります。つまり、ブラウザーでブラウザーのDevToolsを使用します。 これは、ハイブリッドモバイル開発の大きな利点の1つです。

ネイティブバグ

他の種類のバグは、AndroidまたはiOSデバイスでのみ発生するバグです。 この記事では、開発者ツールをセットアップして修正を開始できるようにする手順について説明します。

ビルドの失敗に関する注意

この記事の範囲を一口サイズに保つために、この記事ではビルドおよびコンパイルのエラーについては取り上げません。 試してみる簡単なトリックは、イオン修復です。 これにより、アプリの依存関係が削除されて再作成されます。

$ ionic repair

Ionicアプリをデバッグする手順

ステップ1：バグはiOSとAndroidで再現可能ですか？

iOSとAndroidの両方にある場合は、最初にAndroidでバグを修正し、後でiOSで修正されることを確認します。 このようにして、Chrome開発者ツールを使用してバグを診断できます。 iOSのみの場合は、手順4に進みます。

ステップ2：Chromeリモート開発ツールをデバイスで動作させる方法。

Androidデバイスで開発者モードを有効にします。

  • 設定→電話についてに移動します。
  • ビルド番号を見つけて7回押します。 最後の数回カウントダウンし、開発者であることを祝福するメッセージが表示されます。 （電話ありがとう！）
  • 次に、設定に戻り、次にシステム環境設定に戻ります。
  • システム画面で、詳細オプションドロップダウンを押します。
  • 開発者向けオプションを選択します。
  • デバッグの見出しの下を下にスクロールして、USBデバッグをオンにします。
  • デバイスがコンピュータに接続されていると仮定すると、数秒後に、このマシンを信頼するかどうかを尋ねるポップアップが表示されます。 常に許可のチェックボックスを押してから、[OK]をクリックします。
  • デバイスでイオンアプリを開いた状態で、任意のサイトでChrome開発ツールを開きます。 下のスクリーンショットに示すように、リモートツールを選択します。

remote dev tools

次に、リモートツールのリストからデバイスを選択します。

ステップ4：ChromeDevToolsが開いた

表示されたコンソールエラーを表示できます。 Chrome開発ツールでアプリを更新してアプリを再度読み込むこともでき、アプリの読み込み中に見逃したものを確認できます。 これで、コンソールにエラーメッセージが表示され、Chrome開発ツールを使用してこのエラーをデバッグできるようになります。

ステップ5：iOSのデバッグ

バグがiOSデバイスでのみ発生する場合は、Macおよび電話のSafariで開発者ツールを有効にする必要があります。

  • MacでSafariを開きます。
  • Safariメニューに移動し、次に設定に移動します。
  • 歯車アイコンの下の詳細設定に移動します。
  • 下部にある[メニューバーに開発者メニューを表示する]チェックボックスをオンにします。
  • iOSデバイスでアプリを開き、デバイスをMacに接続した状態で、Safariの[開発]ドロップダウンをクリックします。
  • [開発]メニューからデバイスを選択してから、ローカルホストを選択します。
  • Safari開発ツールが新しいウィンドウで開き、アプリを検査およびデバッグできるようになります。 アプリを更新して、読み込み時に発生するバグをキャッチすることもできます。

ボーナス：Safari開発者ツールにデバイスを認識させるのは面倒な場合があります。 デバイスをMacに取り外してから再度接続してみてください。 それでも問題が解決しない場合は、Safariテクノロジープレビューをダウンロードし、上記の手順を繰り返して開発者ツールを有効にすることができます。