# 使用例 Monaca 提供の各種開発ツール ( Monaca クラウド IDE、Monaca Localkit、Monaca CLI ) と Monaca デバッガーの連携方法に関して、ここでは解説します。 * [Monaca クラウド IDE と Monaca デバッガーとの連携 ( Web 経由 )](https://ja.docs.monaca.io/products_guide/debugger/pages/-MfWrbJ7sNu6WTkFfPlI#monaca-クラウド-ide-と-monaca-デバッガーとの連携-web-経由) * [Monaca 提供のローカル環境用の開発ツールと Monaca デバッガーとの連携](https://ja.docs.monaca.io/products_guide/debugger/pages/-MfWrbJ7sNu6WTkFfPlI#monaca-提供のローカル環境用の開発ツールと-monaca-デバッガーとの連携) {% hint style="info" %} 最初に、端末またはエミュレーター上に、Monaca デバッガーをインストールします。詳細は、[ Monaca デバッガーのインストール方法 ](/products_guide/debugger/installation.md)をご確認ください。 {% endhint %} ## Monaca クラウド IDE と Monaca デバッガーとの連携 ( Web 経由 ) Monaca クラウド IDE および各ブラウザー標準のリモートデバッグ機能を使用した、Monaca アプリのデバッグ方法を紹介します。 * [Monaca デバッグパネル](/products_guide/debugger/debug.md#debugger-debug-panel): DOM の解析、Console を使用したデバッグ * [USB デバッグ](/products_guide/debugger/debug.md#debugger-usb-debug): DOM の解析、Consoleを使用したデバッグ、JavaScript のデバッグ ### Monaca デバッグパネル Monaca クラウド IDE の デバッグパネルには、Web アプリ向けのデバッグツールとして人気のある [Weinre ( WEb INspector REmote )](https://people.apache.org/~pmuellr/weinre/docs/latest/) が実装されています。このツールを使用して、Cosole を使用したデバッグと DOM の解析が行えます。 ![](/files/-MgZZCnv_3OgEppg9M45) Monaca クラウド IDE と Monaca デバッガーを使用してアプリのデバッグする方法は、以下になります。 1. Monaca クラウド IDE 上で、プロジェクトを開きます。 2. Monaca デバッガー上で、プロジェクトを実行します。 3. IDEと端末が接続されていることを確認します。 デバッグパネル上に、端末情報が表示されていれば、接続されています ( 下のスクリーンショットを参照のこと )。表示されない場合、IDEまたはデバッガーをいったんリフレッシュさせます。IDE と端末の接続後に、アプリのデバッグを IDE 上で行えます。 ![](/files/-MgZZGPHWt_eEcwpg3j9) #### 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 デバッガーのアプリログ上に、それぞれ表示されていることを確認します。 ![Monaca クラウド IDE の デバッグパネル上](/files/-MgZZQYTS5xEQkPELj0K) ![Monaca デバッガーのアプリログ上](/files/-MgZZXStQv4c3f2zCsUi) 3\. デバッグパネル上で、次のように、アプリのエラーログも確認できます。 ![](/files/-MgZZaJ6JwTtzSaeaYAv) #### DOM の解析 DOM ( Document Object Model ) の解析ツールを使用して、次の処理ができます。 * 現在開いているページの DOM 構造が表示されます。 * 現在開いているページの DOM 構造と CSS を修正でき、ページ側にもリアルタイムで反映されます。 詳細に関しては、 [スタイルと DOM の修正 ( 英語サイト)](https://developer.chrome.com/devtools/docs/dom-and-styles) をご確認ください。 ![デバッグパネル上での DOM 解析](/files/-MgZZel5GBGVVMlfx8Ai) ### USB デバッグ USB デバッグを有効化すると、次の操作を行えます。 * Console を使用したデバッグ : Console 上で、メッセージの出力とデバッグセッションを行えます。 * DOM の解析 : DOM の構造の確認と修正を行えます。また、リアルタイムで、更新を反映できます。 * JavaScript のデバッグ : JavaScript パフォーマンスの分析、分析ポイント ( ブレークポイント ) のセット、実行処理の制御を行えます。 USB デバッグ使用時に利用できるデバッグ方法は、次のとおりです。 1. iOS 端末を使用している場合には、[Safari のリモートデバッグ機能](/products_guide/debugger/debug.md#usb-debugging-ios)を利用できます。 2. Android 端末を使用している場合には、[Chrome のリモートデバッグ機能](/products_guide/debugger/debug.md#usb-debugging-android) を利用できます。 #### Safari のリモートデバッグ機能 ( iOS と Mac が対象 ) {% hint style="info" %} USB デバッグを使用してデバッグをする場合、事前に行う設定がいくつかあります。詳細は、 [USB デバッグの事前準備 ](/products_guide/debugger/debug.md#usb-debaggu)をご確認ください。 {% endhint %} 1. USB ケーブルを使用して、iOS 端末と Mac を接続します。 2. カスタムビルド版 Monaca デバッガー上で、Monaca プロジェクトを実行します。 3. Safari を開いて、 `開発` メニューを選択します。表示されるリスト内に、開発者の iOS 端末名が表示されますので、選択します。表示されたサブメニューから、Monaca アプリ内で使用しているページを選択します。 ![](/files/-MgZ_-BjTGXtBf4N8olA) 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) をご確認ください。 ![](/files/-MgZ_4depDcKct6oRzwd) #### Chrome のリモートデバッグ機能 ( Google Chrome ブラウザーを使用した Android アプリ開発が対象 ) {% hint style="info" %} USB デバッグを使用してデバッグをする場合、事前に行う設定がいくつかあります。詳細は、 [USB デバッグの事前準備 ](/products_guide/debugger/debug.md#usb-debagguno)をご確認ください。 {% endhint %} 1. USB ケーブルを使用して、Android 端末と PC を接続します。 2. Monaca デバッガー上で、Monoca プロジェクトを実行します。 3. Chrome のアドレスバーに、 `chrome://inspect/` と入力します。 4. 「 Devices 」 ページが表示されます。次に、接続した Android 端末が表示されていることを確認して、端末情報の下に表示されている `inspect` をクリックします。 ![](/files/-MgZ_F_ZCdyc_i1DtsoT) 5\. Chrome DevTools が起動します。ここまでの手順で、Monaca アプリをデバッグする準備が整いました。Chrome DevTools の使用方法は、[こちら ( 英語サイト)](https://developer.chrome.com/devtools) をご確認ください。 ![](/files/-MgZ_O1OV1bCMdqb9hx7) ## USB デバッグの事前準備 | プラットフォーム　　　　　　　　　　 | iOS | Android | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Monaca デバッガー** | [カスタムビルド版 Monaca デバッガー](/products_guide/debugger/installation/debugger_ios.md)のみ | ストア版またはカスタムビルド版の [Monaca デバッガー](/products_guide/debugger/installation/debugger_android.md) | | **ドライバーのインストール** | Mac OS X の場合、必要なドライバーは、インストールされています。 | Windows の場合、端末製造元の Web サイトから、端末用の対象のドライバーを入手します。Mac OS X の場合、必要なドライバーを、システム側で自動で検知してくれます。 | | **USB デバッグ の有効化** |

iOS 端末上で、\[ Web インスペクタ ] を有効化します。

|

Android 端末上で、\[ USB デバッグ ( USB debugging ) ] を有効化します。

| | **コネクションの信頼** | 端末上に、コンピューターの信頼性を確認する画面が表示されます。\[ 信頼する ] を選択して、コンピューター側と接続します。 | 端末上に、コンピューターの信頼性を確認する画面が表示されます。\[ 信頼する ] を選択して、コンピューター側と接続します。 | 参考ページ * [機能の概要](/products_guide/debugger/features.md) * [インストール方法](/products_guide/debugger/installation.md) * [トラブルシューティング ガイド](/products_guide/debugger/troubleshooting.md) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ja.docs.monaca.io/products_guide/debugger/debug.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.