> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/tutorials/monaca_cli/testing_debugging.md).

# パート 2 : Monaca CLI と Monaca デバッガーとの連携

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

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

## はじめに

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

[![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/App_Store.jpg) ](https://itunes.apple.com/jp/app/monaca/id550941371?mt=8)[![](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 デバッガーとローカル PC のペアリング

ローカル PC 上で作成した Monaca アプリを、Monaca デバッガー上でデバッグ・検証をする場合には、ローカル PC と Monaca デバッガーをペアリングする必要があります。

{% hint style="info" %}
Monaca デバッガーとローカル PC を接続する前に、次の点をご確認ください。

1. 同じ WiFi または LAN ネットワーク上に、Monaca デバッガーとローカル PC が接続されていること。.
2. 同じ Monaca アカウントを使用して、Monaca デバッガーとローカル PC にサインインしていること。
3. ローカル PC 側のファイアーウォールを無効化していること。
   {% endhint %}

コマンドウィンドウ上で、プロジェクトのフォルダーまで移動し、[monaca debug](/products_guide/monaca_cli/cli_commands.md#monaca-debug) コマンドを実行して、Monaca デバッガーに接続します。実行すると、Monaca CLI 側では、デバッガーからのリクエストの待ち受けを開始します。

![](/files/-Mgxk6nL3Wt7VZTcbIcQ)

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

![](/files/-MgxkAxT2C8GHXQ0evD7)

3\. Monaca デバッガー上に、ポップアップメッセージが表示され、Monaca デバッガーとホスト PC をペアリングするか聞かれます。\[ ペアリング ] ボタンをタップします。

![](/files/-MgxkGbHXnDmbjMEEDpQ)

4\. ペアリング後、Monaca デバッガーの `ローカルプロジェクト` 欄に、ローカルに置かれているプロジェクト名が表示されます。ペアリングに失敗した場合には、[Monaca デバッガーとのペアリングが失敗する場合](https://ja.docs.monaca.io/tutorials/monaca_cli/pages/-MfWrbFoQSpqFIibx1fY#monaca-デバッガーとのペアリングが失敗する場合) をご確認ください。

![](/files/-MgxkprvVbHZq5bABfAw)

{% hint style="info" %}
デバッグを停止し、デバッガのペアを解除するには、`Ctrl+c` を押します。
{% endhint %}

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

  1\. Monaca デバッガーの \[ ローカルプロジェクト ]上に表示されたプロジェクト名をタップして、アプリを実行します。

2\. 下のスクリーンショットのように、プロジェクトが実行されます。プロジェクト一覧へ戻る場合には、デバッガーのメニュー画面へいったん戻り、 `戻る`ボタンをタップします。

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

## ステップ 3 : Monaca CLI と デバッガー間のリアルタイムでの同期

1. Monaca デバッガー上で、プロジェクトを実行します。
2. ファイル内のコードを変更してみましょう。たとえば、アプリの起動時に表示するページを 「 Page 2 」 に変更してみましょう。変更を行うには、最初に、`index.html` ファイルを開き、次に、`<ons-sliding-menu>` タグ内の `main-page` 属性の値を、`page2.html` に変更・保存します。変更後のコードは、次のとおりです。

   ```bash
   ...
   <ons-sliding-menu
   var="app.slidingMenu"
   menu-page="menu.html"
   main-page="page2.html"
   side="left" type="overlay"
   max-slide-distance="200px">
   </ons-sliding-menu>
   ...
   ```
3. PC が Monaca Debugger に接続されている場合は、自動的にアップデートが更新され Page 2 が表示されます。

![](/files/-MgxlTslC32JpdZeU__-)

{% hint style="info" %}
Monaca Debugger が提供する他の機能については、 [デバッガーの機能](/products_guide/debugger/features.md) を参照してください。
{% endhint %}

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

Monaca デバッガーを使うのは簡単です。 プロジェクトをさらに変更し、デバッガ上でどのように動作するかを確認してください。 モナカで開発をお楽しみください！

**次へ**:

* [パート 3 : Monaca アプリのビルド](/tutorials/monaca_cli/building_app.md)