使用例

Monaca 提供の各種開発ツール ( Monaca クラウド IDE、Monaca Localkit、Monaca CLI) と Monaca デバッガーの連携方法に関して、ここでは解説します。

最初に、端末またはエミュレーター上に、Monaca デバッガーをインストールします。詳細は、 Monaca デバッガーのインストール方法 をご確認ください。

Monaca クラウド IDE と Monaca デバッガーとの連携 ( Web 経由 )

Monaca クラウド IDE および各ブラウザー標準のリモートデバッグ機能を使用した、Monaca アプリのデバッグ方法を紹介します。

Monaca デバッグパネル

Monaca クラウド IDE の デバッグパネルには、Web アプリ向けのデバッグツールとして人気のある Weinre ( WEb INspector REmote ) が実装されています。このツールを使用して、Cosole を使用したデバッグと DOM の解析が行えます。

Monaca クラウド IDE 上の デバッグパネル

In order to start debugging your app by using Monaca クラウド IDE と Monaca デバッガーとの連携 ( Web 経由 ), please follow the following instruction:

  1. Monaca クラウド IDE 上で、プロジェクトを開きます。
  2. Monaca デバッガー上で、プロジェクトを実行します。
  3. IDE と端末が接続されていることを確認します。デバッグパネル上に、端末情報が表示されていれば、接続されています ( 下のスクリーンショットを参照のこと )。表示されない場合、IDE またはデバッガーをいったんリフレッシュさせます。IDE と端末の接続後に、アプリのデバッグを IDE 上で行えます。

Console を使用したデバッグ

Console API と JavaScript を併用して、Console ( コンソール ) 上に、メッセージを出力します。

Console API を、次に記します。

  • console.log() : Console 上にメッセージを出力します。
  • console.debug() : デバッグ用と通常のログを明示的に分けたい場合には、こちらを使用します。メッセージは、Debug タブ 上に表示されます。
  • console.warn() : 黄色の警告マークと共に、メッセージが表示されます。
Console API の詳細に関しては、 Console API references ( Google Developers ) をご確認ください。

Console API を使用したサンプルコードを、次に記します。

  1. 次のコードをコピーして、index.html ファイルに貼り付けます。

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
            <script src="components/loader.js"></script>
            <link rel="stylesheet" href="components/loader.css">
            <link rel="stylesheet" href="css/style.css">
            <script>
                var a = 1;
                var b = 2;
    
                function debug(){
                    var c = a + b;
                    console.log("debug() function is executed!");
                    console.log("executed! variable c is " + c);
                }
    
                debug();
            </script>
        </head>
        <body>
            <h1>Hello World!</h1>
        </body>
    </html>
        
  2. ファイルを保存して、Monaca デバッガーと Monaca クラウド IDE を接続します。次に、Monaca クラウド IDE 上で、プロジェクトを実行します ( [ 実機デバッグ ] メニューをクリック )。次に、下の 2 つのスクリーンショットのようなメッセージが、Monaca クラウド IDE のデバッグパネル上および Monaca デバッガーのアプリログ上に、それぞれ表示されていることを確認します。

    Monaca クラウド IDE の デバッグパネル上
    Monaca デバッガーのアプリログ上

  3. デバッグパネル上で、次のように、アプリのエラーログも確認できます。

DOM の解析

DOM ( Document Object Model ) の解析ツールを使用して、次の処理ができます。

  • 現在開いているページの DOM 構造が表示されます。
  • 現在開いているページの DOM 構造と CSS を修正でき、ページ側にもリアルタイムで反映されます。

詳細に関しては、 スタイルと DOM の修正 ( 英語サイト) をご確認ください。

デバッグパネル上での DOM 解析

USB デバッグ

USB デバッグを有効化すると、次の操作を行えます。

  • Console を使用したデバッグ : Console 上で、メッセージの出力とデバッグセッションを行えます。
  • DOM の解析 : DOM の構造の確認と修正を行えます。また、リアルタイムで、更新を反映できます。
  • JavaScript のデバッグ : JavaScript パフォーマンスの分析、分析ポイント ( ブレークポイント ) のセット、実行処理の制御を行えます。

USB デバッグ使用時に利用できるデバッグ方法は、次のとおりです。

  1. iOS 端末を使用している場合には、Safari のリモートデバッグ機能 を利用できます。
  2. Android 端末を使用している場合には、Chrome のリモートデバッグ機能 を利用できます。

Safari のリモートデバッグ機能 ( iOS と Mac が対象 )

USB デバッグを使用してデバッグをする場合、事前に行う設定がいくつかあります。詳細は、 USB デバッグの事前準備 をご確認ください。
  1. USB ケーブルを使用して、iOS 端末と Mac を接続します。
  2. カスタムビルド版 Monaca デバッガー上で、Monaca プロジェクトを実行します。
  3. Safari を開いて、 開発 メニューを選択します。表示されるリスト内に、開発者の iOS 端末名が表示されますので、選択します。表示されたサブメニューから、Monaca アプリ内で使用しているページを選択します。

  4. Web インスペクタ画面が表示されます。ここでは、総合的にアプリを検証できます ( HTTP リクエストのタイムライン表示、JavaScript のプロファイリング、DOM ツリーの操作など )。Web インスペクタの使用方法に関しては、こちらの Safari Web インスペクタの使用方法 ( 英語サイト) をご確認ください。

Chrome のリモートデバッグ機能 ( Google Chrome ブラウザーを使用した Android アプリ開発が対象 )

USB デバッグを使用してデバッグをする場合、事前に行う設定がいくつかあります。詳細は、 USB デバッグの事前準備 をご確認ください。
  1. USB ケーブルを使用して、Android 端末と PC を接続します。
  2. Monaca デバッガー上で、Monoca プロジェクトを実行します。
  3. Chrome のアドレスバーに、 chrome://inspect/ と入力します。
  4. 「 Devices 」 ページが表示されます。次に、接続した Android 端末が表示されていることを確認して、端末情報の下に表示されている inspect をクリックします。

  5. Chrome DevTools が起動します。ここまでの手順で、Monaca アプリをデバッグする準備が整いました。Chrome DevTools の使用方法は、こちら ( 英語サイト) をご確認ください。

Monaca 提供のローカル環境用の開発ツールと Monaca デバッガーとの連携

Monaca 提供のローカル環境用の開発ツールには、Monaca CLI、Monaca Localkit があります。

USB デバッグの事前準備

プラットフォーム iOS Android
Monaca デバッガー カスタムビルド版 Monaca デバッガーのみ ストア版またはカスタムビルド版の Monaca デバッガー
ドライバーのインストール Windows の場合、iTunes をインストールして、iOS 端末用のドライバーを入手します。Mac OS X の場合、必要なドライバーは、インストールされています。 Windows の場合、端末製造元の Web サイトから、端末用の対象のドライバーを入手します。Mac OS X の場合、必要なドライバーを、システム側で自動で検知してくれます。
USB デバッグ の有効化 iOS 端末上で、[ Web インスペクタ ] を有効化します。
  • 設定 ‣ Safari を選択します。
  • 下にスクロールして、 詳細 を選択します。
  • Web インスペクタ を ON にします。
Android 端末上で、[ USB デバッグ ( USB debugging ) ] を有効化します。
  • 設定 ‣ 端末情報 / タブレット情報 を選択して、ビルド番号を数回タップします。
  • 開発者向けオプション を選択します。
  • USB デバッグ を選択します。
コネクションの信頼 端末上に、コンピューターの信頼性を確認する画面が表示されます。[ 信頼する ] を選択して、コンピューター側と接続します。 端末上に、コンピューターの信頼性を確認する画面が表示されます。[ 信頼する ] を選択して、コンピューター側と接続します。

Monaca 提供のローカル環境用の開発ツールと USB デバッグ

デバッグの手順を、次に記します。

  1. Monaca デバッガーとホスト PC をペアリングします。ホスト PC とは、Monaca 提供のローカル環境用の開発ツール ( Monaca Localkit、Monaca CLI ) を実行している PC を指します。各開発ツール上でのペアリング方法は、次のリンク先をご確認ください。

  2. 実行するプロジェクトを選択します。

  3. 下のスクリーンショット内で、赤色で示された、デバッガーのメニューをクリックします。

  4. [ インスペクタ ] ボタンをクリックして、USB デバッグを開始します。

  5. Chrome DevTools または Safari の Web インスペクタがホスト PC 側で起動されているか確認します。起動されていない場合、troubleshoot_inspector をご確認ください。また、併せて、次のリンク先もご確認ください。

参考ページ