ハイブリッドアプリケーションのデバッグ

学習の目的

この単元を完了すると、次のことができるようになります。

• デバイスで Safari を使用してハイブリッド iOS アプリケーションをデバッグする。
  
• デバイスで Google Chrome ブラウザーを使用してハイブリッド Android アプリケーションをデバッグする。
  
• デバイスを使用して、開発マシンで実行されている Android アプリケーションをデバッグする。
  

iOS でのハイブリッドアプリケーションのデバッグ

iOS でハイブリッドアプリケーションをどのようにデバッグできるのかとお思いですか? Safari を使用して、開発マシンと実際のデバイスまたはシミュレーションされたデバイス間で通信します。デバッグのために、ハイブリッドアプリケーションを Web アプリケーションとして扱います。

1. デスクトップで Safari を開きます。
   
2. [Safari] | [環境設定] を選択します。
   
3. [詳細] タブをクリックします。
   
4. [メニューバーに [開発] メニューを表示] をクリックします。
   
5. iOS シミュレーターを使用している場合、次の操作を実行します。
   

• Xcode が開いている場合、Ctrl キーを押しながら、タスクバーの Xcode アイコンをクリックし、[Open Developer Tool (開発者ツールを開く)] | [iOS Simulator (iOS シミュレーター)] を選択します。
  
• または、ターミナルウィンドウで、「open -a iOS\ Simulator」と入力します。
  

6. [iOS Simulator (iOS シミュレーター)] のメニューで、[Hardware (ハードウェア)] | [Device (デバイス)] を選択します。
   
7. デバイスを選択します。
   
8. デバイスまたは iOS シミュレーターのホーム画面から Safari を開きます。
   
9. Web アプリケーションの場所に移動します。 ヒント Xcode デバッガー出力ウィンドウからアドレスを取得できます。次に例を示します。
   

   2016-05-19 12:16:31:410 MyTrailHybridLocal[86657:5137538] INFO|SFHybridViewController|Setting
   file:///Users/johndoe/Library/Developer/CoreSimulator/
   Devices/22222222-3333-aaaa-dddd-42424242424B9/data/
   Containers/Bundle/Application/66665555-5555-3333-
   1111-B9B9B9B9/MyTrailHybridLocal.app/www/index.html

   これは、このアプリケーションの「ホームページ」の URL です。
   
10. デスクトップの Safari で、[Developer (開発者)] | <(自分のでバイス)> を選択し、デバイスまたはシミュレーターの Safari で開いた URL を選択します。[Web Inspector] ウィンドウが開き、デバイスで実行されている Safari インスタンスに接続されます。
    

Android でのハイブリッドアプリケーションのデバッグ

ハイブリッド Android アプリケーションをどのようにデバッグできるのかとお思いですか? この作業は、実際の Android デバイスまたはシミュレーションされたデバイスで Google Chrome ブラウザーを使用して行います。最新の手順については、developers.google.com/web/tools/ で「Remote Debugging」(リモートデバッグ) を検索してください。

リソース

• モバイルデバイスで実行されているハイブリッドアプリケーションのデバッグ
• Remote Debugging on Android with Chrome (Chrome を使用した Android でのリモートデバッグ) (developer.chrome.com)
• Getting the Most Out of Simulator (シミュレーターを最大限に活用する) (iOS Developer Library 動画)