# パート 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/tutorials/monaca_localkit/testing_debugging.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.