# 使用例
Monaca 提供の各種開発ツール ( Monaca クラウド IDE、Monaca Localkit、Monaca CLI ) と Monaca デバッガーの連携方法に関して、ここでは解説します。
* [Monaca クラウド IDE と Monaca デバッガーとの連携 ( Web 経由 )](#monaca-クラウド-ide-と-monaca-デバッガーとの連携-web-経由)
* [Monaca 提供のローカル環境用の開発ツールと Monaca デバッガーとの連携](#monaca-提供のローカル環境用の開発ツールと-monaca-デバッガーとの連携)
{% hint style="info" %}
最初に、端末またはエミュレーター上に、Monaca デバッガーをインストールします。詳細は、[ Monaca デバッガーのインストール方法 ](https://ja.docs.monaca.io/products_guide/debugger/installation)をご確認ください。
{% endhint %}
## Monaca クラウド IDE と Monaca デバッガーとの連携 ( Web 経由 )
Monaca クラウド IDE および各ブラウザー標準のリモートデバッグ機能を使用した、Monaca アプリのデバッグ方法を紹介します。
* [Monaca デバッグパネル](#debugger-debug-panel): DOM の解析、Console を使用したデバッグ
* [USB デバッグ](#debugger-usb-debug): DOM の解析、Consoleを使用したデバッグ、JavaScript のデバッグ
### Monaca デバッグパネル
Monaca クラウド IDE の デバッグパネルには、Web アプリ向けのデバッグツールとして人気のある [Weinre ( WEb INspector REmote )](https://people.apache.org/~pmuellr/weinre/docs/latest/) が実装されています。このツールを使用して、Cosole を使用したデバッグと DOM の解析が行えます。
Monaca クラウド IDE と Monaca デバッガーを使用してアプリのデバッグする方法は、以下になります。
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()` : 黄色の警告マークと共に、メッセージが表示されます。
{% hint style="info" %}
Console API の詳細に関しては、 [Console API references ( Google Developers ) ](https://developer.chrome.com/devtools/docs/console-api)をご確認ください。
{% endhint %}
Console API を使用したサンプルコードを、次に記します。
1. 次のコードをコピーして、`index.html` ファイルに貼り付けます。
```markup
Hello World!
```
2. ファイルを保存して、Monaca デバッガーと Monaca クラウド IDE を接続します。次に、Monaca クラウド IDE 上で、プロジェクトを実行します ( \[ 実機デバッグ ] メニューをクリック )。次に、下の 2 つのスクリーンショットのようなメッセージが、Monaca クラウド IDE のデバッグパネル上および Monaca デバッガーのアプリログ上に、それぞれ表示されていることを確認します。
3\. デバッグパネル上で、次のように、アプリのエラーログも確認できます。
#### DOM の解析
DOM ( Document Object Model ) の解析ツールを使用して、次の処理ができます。
* 現在開いているページの DOM 構造が表示されます。
* 現在開いているページの DOM 構造と CSS
を修正でき、ページ側にもリアルタイムで反映されます。
詳細に関しては、 [スタイルと DOM の修正 ( 英語サイト)](https://developer.chrome.com/devtools/docs/dom-and-styles) をご確認ください。
### USB デバッグ
USB デバッグを有効化すると、次の操作を行えます。
* Console を使用したデバッグ : Console 上で、メッセージの出力とデバッグセッションを行えます。
* DOM の解析 : DOM の構造の確認と修正を行えます。また、リアルタイムで、更新を反映できます。
* JavaScript のデバッグ : JavaScript パフォーマンスの分析、分析ポイント ( ブレークポイント )
のセット、実行処理の制御を行えます。
USB デバッグ使用時に利用できるデバッグ方法は、次のとおりです。
1. iOS 端末を使用している場合には、[Safari のリモートデバッグ機能](#usb-debugging-ios)を利用できます。
2. Android 端末を使用している場合には、[Chrome のリモートデバッグ機能](#usb-debugging-android) を利用できます。
#### Safari のリモートデバッグ機能 ( iOS と Mac が対象 )
{% hint style="info" %}
USB デバッグを使用してデバッグをする場合、事前に行う設定がいくつかあります。詳細は、 [USB デバッグの事前準備 ](#usb-debaggu)をご確認ください。
{% endhint %}
1. USB ケーブルを使用して、iOS 端末と Mac を接続します。
2. カスタムビルド版 Monaca デバッガー上で、Monaca プロジェクトを実行します。
3. Safari を開いて、 `開発` メニューを選択します。表示されるリスト内に、開発者の iOS 端末名が表示されますので、選択します。表示されたサブメニューから、Monaca アプリ内で使用しているページを選択します。
4\. Web インスペクタ画面が表示されます。ここでは、総合的にアプリを検証できます ( HTTP リクエストのタイムライン表示、JavaScript のプロファイリング、DOM ツリーの操作など )。Web インスペクタの使用方法に関しては、こちらの [Safari Web インスペクタの使用方法 ( 英語サイト)](https://developer.apple.com/library/ios/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874) をご確認ください。
#### Chrome のリモートデバッグ機能 ( Google Chrome ブラウザーを使用した Android アプリ開発が対象 )
{% hint style="info" %}
USB デバッグを使用してデバッグをする場合、事前に行う設定がいくつかあります。詳細は、 [USB デバッグの事前準備 ](#usb-debagguno)をご確認ください。
{% endhint %}
1. USB ケーブルを使用して、Android 端末と PC を接続します。
2. Monaca デバッガー上で、Monoca プロジェクトを実行します。
3. Chrome のアドレスバーに、 `chrome://inspect/` と入力します。
4. 「 Devices 」 ページが表示されます。次に、接続した Android 端末が表示されていることを確認して、端末情報の下に表示されている `inspect` をクリックします。
5\. Chrome DevTools が起動します。ここまでの手順で、Monaca アプリをデバッグする準備が整いました。Chrome DevTools の使用方法は、[こちら ( 英語サイト)](https://developer.chrome.com/devtools) をご確認ください。
## USB デバッグの事前準備
| プラットフォーム | iOS | Android |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Monaca デバッガー** | [カスタムビルド版 Monaca デバッガー](https://ja.docs.monaca.io/products_guide/debugger/installation/debugger_ios)のみ | ストア版またはカスタムビルド版の [Monaca デバッガー](https://ja.docs.monaca.io/products_guide/debugger/installation/debugger_android) |
| **ドライバーのインストール** | Mac OS X の場合、必要なドライバーは、インストールされています。 | Windows の場合、端末製造元の Web サイトから、端末用の対象のドライバーを入手します。Mac OS X の場合、必要なドライバーを、システム側で自動で検知してくれます。 |
| **USB デバッグ の有効化** | iOS 端末上で、\[ Web インスペクタ ] を有効化します。
設定 ‣ Safari を選択します。- 下にスクロールして、
詳細 を選択します。 Web インスペクタ を ON にします。
| Android 端末上で、\[ USB デバッグ ( USB debugging ) ] を有効化します。
設定 ‣ 端末情報 / タブレット情報 を選択して、ビルド番号を数回タップします。開発者向けオプション を選択します。USB デバッグ を選択します。
|
| **コネクションの信頼** | 端末上に、コンピューターの信頼性を確認する画面が表示されます。\[ 信頼する ] を選択して、コンピューター側と接続します。 | 端末上に、コンピューターの信頼性を確認する画面が表示されます。\[ 信頼する ] を選択して、コンピューター側と接続します。 |
参考ページ
* [機能の概要](https://ja.docs.monaca.io/products_guide/debugger/features)
* [インストール方法](https://ja.docs.monaca.io/products_guide/debugger/installation)
* [トラブルシューティング ガイド](https://ja.docs.monaca.io/products_guide/debugger/troubleshooting)