> 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](/files/-MgxKNt_-awZAgvt12Jq)

![Monaca Localkit](/files/-MgxKQSh0X2wZoI-3_RZ)

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

![](/files/-MgxKtajtMIOyVp_nRue)

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

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

![](/files/-MgxTdPYMsKxOipacY1U)

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

![](/files/-MgxThwDDe6w2Kq98f-t)

## ステップ 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. デバッガーメニュー上で、`インスペクタ` ボタンをタップします ( 下のスクリーンショットを参照のこと )。

![](/files/-MgxU7joG-XKDxVF5f3Z)

    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) をご確認ください。

![](/files/-MgxUYLDJl-KNc5jJB_A)

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

![](/files/-MgxUgdaPpOpXl394FSt)

{% 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)