# パート 2 : Monaca クラウド IDE と Monaca デバッガーとの連携

[Monaca デバッガー](/products_guide/debugger.md) は、Monaca アプリの検証とデバッグを、端末上でリアルタイムに行うためのアプリです。

Monaca アプリの開発時、Monaca クラウド IDE ( PC 側 ) と Monaca デバッガー ( 端末側 ) がインターネットに接続されていれば、IDE 上のプロジェクトファイルに加えられた変更は、保存後、即座にデバッガー側に 「 プッシュ 」 されます。

Monaca クラウド IDE で Monaca アプリを開発する場合、プロジェクトファイルに加えられたすべての変更は、保存後 Monaca デバッガーとリアルタイムで同期されます。

## はじめに

Monaca デバッガーを端末にインストールします。

Android端末の場合は、下のGoogle PlayストアからMonacaデバッガーアプリをインストールします。

iOS端末の場合は、[こちらの手順](/products_guide/debugger/custom-built-debugger-for-ios.md)にてMonaca上でデバッガーアプリを作成してください。

[![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/Google_play.png)](https://play.google.com/store/apps/details?id=mobi.monaca.debugger\&hl=ja)

{% hint style="info" %}
Monaca デバッガーのインストール方法の詳細は、 [こちら](/products_guide/debugger/installation.md) をご確認ください。
{% endhint %}

## ステップ 1 : Monaca デバッガー上でのプロジェクトの実行

1. Monaca デバッガーを起動し、Monaca アカウントを使用してログインします。ログインのユーザー名とパスワードは、Monaca クラウド IDE のログイン時に使用したものと同じものを使用します。

<img src="/files/-Mgt1_520UPq2M7HZcrV" alt="" width="375">

&#x20;   2\. プロジェクトのリストが表示されます。 Monaca クラウド IDE 上のプロジェクトは、`Monaca.io プロジェクト` に表示されます。 プロジェクトを実行するには、Monaca デバッガーでプロジェクト名をタップするか、Monaca クラウド IDE から  **`実行 → 実機で実行`**&#x3092;クリックします。

&#x20;   3\. デバッガー上でプロジェクトが実行されていることを確認します。

&#x20;   4\. デモアプリケーションのさまざまな機能を試してみてください。

(プロジェクトリスト画面に戻るには、デバッガメニューの、戻る ボタンをタップします。)

![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/3.png) ![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/6.png)

## ステップ 2 : クラウド IDE と Monaca デバッガー間のリアルタイム更新

ここまでの手順で、Monaca デバッガー上でプロジェクトを実行できることを確認しました。

次に、このプロジェクトを編集し、Monaca デバッガー側に反映されるか確認してみましょう。

1. Monaca デバッガー上で、プロジェクトを実行します。
2. Monaca クラウド IDEでは、 `index.html` を開き、ページのタイトルを `Monaca Memo` から `My Memo` に変更しましょう。 次に、変更を保存します。

![](/files/-Mgt2faLk8dMO38rL12A)

&#x20;   3\. 保存された変更は、端末の Monaca デバッガー側に送られます。アプリ側で変更が反映されない場合は、デバッガーメニュー上の`更新`ボタンをタップすることで、最新の内容を取得することができます。

![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/5.png) ![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/8.png)

{% hint style="info" %}
トランスパイルプロジェクトの場合は、クラウド IDE とMonacaデバッガー間のライブリロードは利用できません。コードを変更した際、更新ボタンをタップして変更内容をデバッガー上に反映させてください。
{% endhint %}

{% hint style="info" %}
Monaca CLI で USBデバッグを使用することもできます。 [Monaca 提供のローカル環境用の開発ツールと Monaca デバッガーとの連携](/products_guide/debugger/debug.md#usb-debaggu) を参照してください。
{% endhint %}

ここでは、Monaca デバッガーの基本的な使用方法について説明しました。他の箇所も変更して、デバッガー上で確認してみましょう。

Monaca デバッガーには、ここで紹介した以外にも便利な機能がたくさんあります。どのような機能があるのか知りたい場合は、ドキュメントの「[機能の概要](/products_guide/debugger/features.md)」のページを参照してください。そこでは、Monaca デバッガーの様々な機能について詳しく解説されています。


---

# 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/tutorials/monaca_ide/testing_debugging.md?ask=<question>
```

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.
