使用例
最終更新
Monaca 提供の各種開発ツール ( Monaca クラウド IDE、Monaca Localkit、Monaca CLI ) と Monaca デバッガーの連携方法に関して、ここでは解説します。
最初に、端末またはエミュレーター上に、Monaca デバッガーをインストールします。詳細は、 Monaca デバッガーのインストール方法 をご確認ください。
Monaca クラウド IDE および各ブラウザー標準のリモートデバッグ機能を使用した、Monaca アプリのデバッグ方法を紹介します。
Monaca デバッグパネル: DOM の解析、Console を使用したデバッグ
USB デバッグ: DOM の解析、Consoleを使用したデバッグ、JavaScript のデバッグ
Monaca クラウド IDE の デバッグパネルには、Web アプリ向けのデバッグツールとして人気のある Weinre ( WEb INspector REmote ) が実装されています。このツールを使用して、Cosole を使用したデバッグと DOM の解析が行えます。
Monaca クラウド IDE と Monaca デバッガーを使用してアプリのデバッグする方法は、以下になります。
Monaca クラウド IDE 上で、プロジェクトを開きます。
Monaca デバッガー上で、プロジェクトを実行します。
IDEと端末が接続されていることを確認します。 デバッグパネル上に、端末情報が表示されていれば、接続されています ( 下のスクリーンショットを参照のこと )。表示されない場合、IDEまたはデバッガーをいったんリフレッシュさせます。IDE と端末の接続後に、アプリのデバッグを IDE 上で行えます。
Console API と JavaScript を併用して、Console ( コンソール ) 上に、メッセージを出力します。
Console API を、次に記します。
console.log()
: Console 上にメッセージを出力します。
console.debug()
: デバッグ用と通常のログを明示的に分けたい場合には、こちらを使用します。メッセージは、Debug タブ 上に表示されます。
console.warn()
: 黄色の警告マークと共に、メッセージが表示されます。
Console API の詳細に関しては、 Console API references ( Google Developers ) をご確認ください。
Console API を使用したサンプルコードを、次に記します。
次のコードをコピーして、index.html
ファイルに貼り付けます。
ファイルを保存して、Monaca デバッガーと Monaca クラウド IDE を接続します。次に、Monaca クラウド IDE 上で、プロジェクトを実行します ( [ 実機デバッグ ] メニューをクリック )。次に、下の 2 つのスクリーンショットのようなメッセージが、Monaca クラウド IDE のデバッグパネル上および Monaca デバッガーのアプリログ上に、それぞれ表示されていることを確認します。
3. デバッグパネル上で、次のように、アプリのエラーログも確認できます。
DOM ( Document Object Model ) の解析ツールを使用して、次の処理ができます。
現在開いているページの DOM 構造が表示されます。
現在開いているページの DOM 構造と CSS
を修正でき、ページ側にもリアルタイムで反映されます。
詳細に関しては、 スタイルと DOM の修正 ( 英語サイト) をご確認ください。
USB デバッグを有効化すると、次の操作を行えます。
Console を使用したデバッグ : Console 上で、メッセージの出力とデバッグセッションを行えます。
DOM の解析 : DOM の構造の確認と修正を行えます。また、リアルタイムで、更新を反映できます。
JavaScript のデバッグ : JavaScript パフォーマンスの分析、分析ポイント ( ブレークポイント )
のセット、実行処理の制御を行えます。
USB デバッグ使用時に利用できるデバッグ方法は、次のとおりです。
iOS 端末を使用している場合には、Safari のリモートデバッグ機能を利用できます。
Android 端末を使用している場合には、Chrome のリモートデバッグ機能 を利用できます。
USB デバッグを使用してデバッグをする場合、事前に行う設定がいくつかあります。詳細は、 USB デバッグの事前準備 をご確認ください。
USB ケーブルを使用して、iOS 端末と Mac を接続します。
カスタムビルド版 Monaca デバッガー上で、Monaca プロジェクトを実行します。
Safari を開いて、 開発
メニューを選択します。表示されるリスト内に、開発者の iOS 端末名が表示されますので、選択します。表示されたサブメニューから、Monaca アプリ内で使用しているページを選択します。
4. Web インスペクタ画面が表示されます。ここでは、総合的にアプリを検証できます ( HTTP リクエストのタイムライン表示、JavaScript のプロファイリング、DOM ツリーの操作など )。Web インスペクタの使用方法に関しては、こちらの Safari Web インスペクタの使用方法 ( 英語サイト) をご確認ください。
USB デバッグを使用してデバッグをする場合、事前に行う設定がいくつかあります。詳細は、 USB デバッグの事前準備 をご確認ください。
USB ケーブルを使用して、Android 端末と PC を接続します。
Monaca デバッガー上で、Monoca プロジェクトを実行します。
Chrome のアドレスバーに、 chrome://inspect/
と入力します。
「 Devices 」 ページが表示されます。次に、接続した Android 端末が表示されていることを確認して、端末情報の下に表示されている inspect
をクリックします。
5. Chrome DevTools が起動します。ここまでの手順で、Monaca アプリをデバッグする準備が整いました。Chrome DevTools の使用方法は、こちら ( 英語サイト) をご確認ください。
参考ページ
プラットフォーム
iOS
Android
Monaca デバッガー
ストア版またはカスタムビルド版の Monaca デバッガー
ドライバーのインストール
Mac OS X の場合、必要なドライバーは、インストールされています。
Windows の場合、端末製造元の Web サイトから、端末用の対象のドライバーを入手します。Mac OS X の場合、必要なドライバーを、システム側で自動で検知してくれます。
USB デバッグ の有効化
iOS 端末上で、[ Web インスペクタ ] を有効化します。
設定 ‣ Safari
を選択します。
下にスクロールして、 詳細
を選択します。
Web インスペクタ
を ON にします。
Android 端末上で、[ USB デバッグ ( USB debugging ) ] を有効化します。
設定 ‣ 端末情報 / タブレット情報
を選択して、ビルド番号を数回タップします。
開発者向けオプション
を選択します。
USB デバッグ
を選択します。
コネクションの信頼
端末上に、コンピューターの信頼性を確認する画面が表示されます。[ 信頼する ] を選択して、コンピューター側と接続します。
端末上に、コンピューターの信頼性を確認する画面が表示されます。[ 信頼する ] を選択して、コンピューター側と接続します。