# パート 2 : Monaca CLI と Monaca デバッガーとの連携 [Monaca デバッガー](https://ja.docs.monaca.io/products_guide/debugger) は、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 デバッガーのインストール方法 ( プラットフォーム別 ) は、 [こちら](https://ja.docs.monaca.io/products_guide/debugger/installation) をご確認ください。 {% 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](https://ja.docs.monaca.io/products_guide/monaca_cli/cli_commands#monaca-debug) コマンドを実行して、Monaca デバッガーに接続します。実行すると、Monaca CLI 側では、デバッガーからのリクエストの待ち受けを開始します。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxjLrUEMhIUJCPaP9o%2F-Mgxk6nL3Wt7VZTcbIcQ%2Fimage.png?alt=media\&token=6c317733-860a-4946-b125-3daddff367ea) 2\. Monaca デバッガーを起動し、Monaca アカウントを使用してログインします。ログインのユーザー名とパスワードは、Monaca CLI のログイン時に使用したものと同じものを使用します。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxjLrUEMhIUJCPaP9o%2F-MgxkAxT2C8GHXQ0evD7%2Fimage.png?alt=media\&token=c2cc65c3-8d03-41e4-93ba-9dd71b2c1df2) 3\. Monaca デバッガー上に、ポップアップメッセージが表示され、Monaca デバッガーとホスト PC をペアリングするか聞かれます。\[ ペアリング ] ボタンをタップします。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxjLrUEMhIUJCPaP9o%2F-MgxkGbHXnDmbjMEEDpQ%2Fimage.png?alt=media\&token=2457b5e5-4825-4a90-b8eb-d47328bb76cf) 4\. ペアリング後、Monaca デバッガーの `ローカルプロジェクト` 欄に、ローカルに置かれているプロジェクト名が表示されます。ペアリングに失敗した場合には、[Monaca デバッガーとのペアリングが失敗する場合](https://ja.docs.monaca.io/products_guide/debugger/troubleshooting#monaca-デバッガーとのペアリングが失敗する場合) をご確認ください。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxjLrUEMhIUJCPaP9o%2F-MgxkprvVbHZq5bABfAw%2Fimage.png?alt=media\&token=09fb8e7b-af1b-4b7e-a176-a386abc5ea6c) {% 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` ファイルを開き、次に、`` タグ内の `main-page` 属性の値を、`page2.html` に変更・保存します。変更後のコードは、次のとおりです。 ```bash ... ... ``` 3. PC が Monaca Debugger に接続されている場合は、自動的にアップデートが更新され Page 2 が表示されます。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxjLrUEMhIUJCPaP9o%2F-MgxlTslC32JpdZeU__-%2Fimage.png?alt=media\&token=33a7bc4b-160a-4142-8683-baa80a0a4e52) {% hint style="info" %} Monaca Debugger が提供する他の機能については、 [デバッガーの機能](https://ja.docs.monaca.io/products_guide/debugger/features) を参照してください。 {% endhint %} {% hint style="info" %} Monaca CLI で USBデバッグを使用することもできます。 [Monaca 提供のローカル環境用の開発ツールと Monaca デバッガーとの連携](https://ja.docs.monaca.io/products_guide/debugger/debug#usb-debaggu) を参照してください。 {% endhint %} Monaca デバッガーを使うのは簡単です。 プロジェクトをさらに変更し、デバッガ上でどのように動作するかを確認してください。 モナカで開発をお楽しみください！ **次へ**: * [パート 3 : Monaca アプリのビルド](https://ja.docs.monaca.io/tutorials/monaca_cli/building_app)