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

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

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

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

## はじめに

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

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

iOS端末の場合は、[こちらの手順](https://ja.docs.monaca.io/products_guide/debugger/custom-built-debugger-for-ios)にて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 デバッガーのインストール方法の詳細は、 [こちら](https://ja.docs.monaca.io/products_guide/debugger/installation) をご確認ください。
{% endhint %}

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

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-Mgt0W9tHpphEV2D1Dpc%2F-Mgt1_520UPq2M7HZcrV%2Fimage.png?alt=media\&token=a4a72967-7023-42b9-9928-af135e8ad475)

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

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

    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` に変更しましょう。 次に、変更を保存します。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-Mgt0W9tHpphEV2D1Dpc%2F-Mgt2faLk8dMO38rL12A%2Fimage.png?alt=media\&token=0c2a65e1-5ed4-4680-9c4c-eb263694d6a8)

    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 デバッガーとの連携](https://ja.docs.monaca.io/products_guide/debugger/debug#usb-debaggu) を参照してください。
{% endhint %}

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

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