> 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_localkit/testing_debugging.md).

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

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

Monaca Localkit を使用して、ローカル PC 上で Monaca アプリを開発する場合、プロジェクトファイルへの変更は、保存後、Monaca デバッガーへ即座にプッシュされます ( ペアリング済みであること )。

このパートで学習する内容は、次のとおりです。

* Monaca デバッガー上で、プロジェクトを実行します。
* Monaca Localkit と Monacaデバッガー間を、リアルタイムで同期させます。
* Chrome DevTools を使用して、プロジェクトをデバッグします。

## はじめに

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 デバッガー上でのプロジェクトの実行

1. Monaca デバッガーと PC ( Monaca Localkit が実行中であること ) をペアリングします。詳細は、[ペアリングとデバッグ](/products_guide/monaca_localkit/pairing_debugging.md) をご確認ください。
2. ペアリング後、Monaca デバッガー上には、プロジェクトの一覧が表示され、Monaca Localkit 上には、接続されたデバッガーが表示されます ( 下のスクリーンショットを参照のこと )。ペアリングが失敗する場合には、[ペアリングのトラブルシューティング](/products_guide/debugger/troubleshooting.md) をご確認ください。

![Monaca Debugger](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxIqVUVY78IPVmFEqF%2F-MgxKNt_-awZAgvt12Jq%2Fimage.png?alt=media\&token=af59470c-83fc-444a-a7b5-0dbd09be7ff8)

![Monaca Localkit](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxIqVUVY78IPVmFEqF%2F-MgxKQSh0X2wZoI-3_RZ%2Fimage.png?alt=media\&token=c3e19c4d-1dee-4ad1-bf0c-fa2ce3a57aef)

    3\. Monaca デバッガー上で、プロジェクトを実行します。実行する場合には、Monaca デバッガー上に表示されたプロジェクト名をタップするか、または、Monaca Localkit の`実行`ボタンをクリックします。

    4\. 下のスクリーンショットのような画面が、端末に表示されます。デバッガーメニュー上の`戻る`ボタンをタップすれば、プロジェクト一覧画面に戻ります。

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

    5\. メモ帳アプリを実行して、新しいメモを追加してみましょう。次のように、新しいメモが表示されたら、プロジェクトは正しく動作しています。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxIqVUVY78IPVmFEqF%2F-MgxKtajtMIOyVp_nRue%2Fimage.png?alt=media\&token=e9c2bdf4-5eba-4ddc-bf0d-23c8e8c79b1c)

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

1. Monaca デバッガー上で、プロジェクトを実行します。
2. プロジェクトファイルに変更を加えて、保存しましょう ( 詳細は、 [プロジェクトファイルの編集](/tutorials/monaca_localkit/starting_project.md#suteppu-4-purojekutofairuno) を参照のこと )。たとえば、 `index.html` ファイル内に記述されたアプリのタイトルを変更したり、または、 `style.css` ファイル内で、ページのスタイルを変更してみましょう。また、Monaca Localkit の`ライブリロード`機能は、デフォルトで有効化されています。よって、Monaca Localkit とデバッガー間で、リアルタイムの同期が行われます。オフにした場合、リアルタイムでの同期は行われません。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxIqVUVY78IPVmFEqF%2F-MgxTdPYMsKxOipacY1U%2Fimage.png?alt=media\&token=64ec9f47-d645-4d75-91c1-011be201911f)

    3\. 保存された変更点は、Monaca デバッガー上のアプリに、即時に反映されます。反映されない場合には、デバッガーメニュー上の `更新` ボタンをタップすれば、最新の内容を反映できます。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxIqVUVY78IPVmFEqF%2F-MgxThwDDe6w2Kq98f-t%2Fimage.png?alt=media\&token=490bec0e-ad5c-488f-85d7-ce7b2fa88a7d)

## ステップ 3 : Monaca デバッガーを使用した、プロジェクトのデバッグ

Monaca Localkit では、 [Chrome DevTools](https://developer.chrome.com/devtools) を使用して、アプリをデバッグできます ( USB 接続を使用 )。USB デバッグを始める前に、[USB デバッグの有効化](/products_guide/debugger/debug.md#usb-debagguno)の内容を読み、このデバッグ方法をサポートする Monaca デバッガーのバージョンをご確認ください。

1. Monaca デバッガー上で、プロジェクトを実行します。
2. デバッガーメニュー上で、`インスペクタ` ボタンをタップします ( 下のスクリーンショットを参照のこと )。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxIqVUVY78IPVmFEqF%2F-MgxU7joG-XKDxVF5f3Z%2Fimage.png?alt=media\&token=c4058ac9-cffe-4bb3-a95f-6dc3b3d30357)

    3\. Chrome DevTools が、ホスト PC 側で起動します。ここで、アプリの検証とデバッグを行えます。詳細は、Chrome DevTools の各機能の解説 ( [DOM/スタイルの検証](https://developer.chrome.com/devtools/docs/dom-and-styles) 、[JavaScript のデバッグ](https://developer.chrome.com/devtools/docs/javascript-debugging) など ) をご確認ください。また、Chrome DevTools を起動できない場合には、[インスペクタが起動しない場合](/products_guide/debugger/troubleshooting.md) をご確認ください。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxIqVUVY78IPVmFEqF%2F-MgxUYLDJl-KNc5jJB_A%2Fimage.png?alt=media\&token=46bd4511-777d-4b9a-8db2-3a279d78d2c1)

{% hint style="info" %}
Chrome DevTools は、Monaca Localkit から、直接、起動することもできます。その場合、Monaca Localkit 上で、デバッグ対象のプロジェクトを選択して、次に、\[ ペアリング済みのデバッガー ] に表示されたデバッガーの `インスペクタ` ボタンをタップします ( 下のスクリーンショットを参照のこと )。
{% endhint %}

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgxIqVUVY78IPVmFEqF%2F-MgxUgdaPpOpXl394FSt%2Fimage.png?alt=media\&token=bb7153fc-e3c9-4428-9477-fe7ad028a90b)

{% hint style="info" %}
Monaca デバッガーが提供する機能に関しては、 [機能の概要](/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_localkit/building_app.md)