使用例
Monaca 提供の各種開発ツール ( Monaca クラウド IDE、Monaca Localkit、Monaca CLI ) と Monaca デバッガーの連携方法に関して、ここでは解説します。
Monaca クラウド IDE および各ブラウザー標準のリモートデバッグ機能を使用した、Monaca アプリのデバッグ方法を紹介します。
Monaca クラウド IDE の デバッグパネルには、Web アプリ向けのデバッグツールとして人気のある Weinre ( WEb INspector REmote ) が実装されています。このツールを使用して、Cosole を使用したデバッグと DOM の解析が行えます。

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

Console API と JavaScript を併用して、Console ( コンソール ) 上に、メッセージを出力します。
Console API を、次に記します。
console.log()
: Console 上にメッセージを出力します。console.debug()
: デバッグ用と通常のログを明示的に分けたい場合には、こちらを使用します。メッセージは、Debug タブ 上に表示されます。console.warn()
: 黄色の警告マークと共に、メッセージが表示されます。
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 ( Document Object Model ) の解析ツールを使用して、次の処理ができます。
- 現在開いているページの DOM 構造が表示されます。
- 現在開いているページの DOM 構造と CSSを修正でき、ページ側にもリアルタイムで反映されます。

デバッグパネル上での DOM 解析
USB デバッグを有効化すると、次の操作を行えます。
- Console を使用したデバッグ : Console 上で、メッセージの出力とデバッグセッションを行えます。
- DOM の解析 : DOM の構造の確認と修正を行えます。また、リアルタイムで、更新を反映できます。
- JavaScript のデバッグ : JavaScript パフォーマンスの分析、分析ポイント ( ブレークポイント )のセット、実行処理の制御を行えます。
USB デバッグ使用時に利用できるデバッグ方法は、次のとおりです。
- 1.
- 2.
- 1.USB ケーブルを使用して、iOS 端末と Mac を接続します。
- 2.カスタムビルド版 Monaca デバッガー上で、Monaca プロジェクトを実行します。
- 3.Safari を開いて、
開発
メニューを選択します。表示されるリスト内に、開発者の iOS 端末名が表示されますので、選択します。表示されたサブメニューから、Monaca アプリ内で使用しているページを選択します。

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

- 1.USB ケーブルを使用して、Android 端末と PC を接続します。
- 2.Monaca デバッガー上で、Monoca プロジェクトを実行します。
- 3.Chrome のアドレスバーに、
chrome://inspect/
と入力します。 - 4.「 Devices 」 ページが表示されます。次に、接続した Android 端末が表示されていることを確認して、端末情報の下に表示されている
inspect
をクリックします。

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

プラットフォーム | iOS | Android |
Monaca デバッガー | ||
ドライバーのインストール | Mac OS X の場合、必要なドライバーは、インストールされています。 | Windows の場合、端末製造元の Web サイトから、端末用の対象のドライバーを入手します。Mac OS X の場合、必要なドライバーを、システム側で自動で検知してくれます。 |
USB デバッグ の有効化 | iOS 端末上で、[ Web インスペクタ ] を有効化します。
| Android 端末上で、[ USB デバッグ ( USB debugging ) ] を有効化します。
|
コネクションの信頼 | 端末上に、コンピューターの信頼性を確認する画面が表示されます。[ 信頼する ] を選択して、コンピューター側と接続します。 | 端末上に、コンピューターの信頼性を確認する画面が表示されます。[ 信頼する ] を選択して、コンピューター側と接続します。 |
参考ページ