ドキュメントTOP » Monaca ガイド » Monaca Localkit » Monaca Localkit チュートリアル » パート 2 : Monaca Localkit と Monaca デバッガーとの連携

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

Monaca デバッガー は、Monaca アプリの検証とデバッグを、端末上でリアルタイムに行うためのアプリです。

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

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

  • Monaca デバッガー上で、プロジェクトを実行します。

  • Monaca Localkit と Monaca デバッガー間を、リアルタイムで同期させます。

  • Chrome DevTools を使用して、プロジェクトをデバッグします。

事前準備

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

App Store Logo
Google play logo

注釈

Monaca デバッガーのインストール方法 ( プラットフォーム別 ) は、こちら をご確認ください。

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

  1. Monaca デバッガーと PC ( Monaca Localkit が実行中であること ) をペアリングします。詳細は、 ペアリングとデバッグ をご確認ください。

  2. ペアリング後、Monaca デバッガー上には、プロジェクトの一覧が表示され、Monaca Localkit 上には、接続されたデバッガーが表示されます ( 下のスクリーンショットを参照のこと )。ペアリングが失敗する場合には、ペアリングのトラブルシューティング をご確認ください。

../../../_images/114.png

Monaca デバッガー

../../../_images/216.png

Monaca Localkit

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

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

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

../../../_images/46.png

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

  1. Monaca デバッガー上で、プロジェクトを実行します。

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

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

../../../_images/63.png

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

Monaca Localkit では、 Chrome DevTools を使用して、アプリをデバッグできます ( USB 接続を使用 )。USB デバッグを始める前に、 USB デバッグの有効化 の内容を読み、このデバッグ方法をサポートする Monaca デバッガーのバージョンをご確認ください。

  1. Monaca デバッガー上で、プロジェクトを実行します。

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

../../../_images/81.png
  1. Chrome DevTools が、ホスト PC 側で起動します。ここで、アプリの検証とデバッグを行えます。詳細は、Chrome DevTools の各機能の解説 ( DOM/スタイルの検証JavaScript のデバッグ など ) をご確認ください。また、Chrome DevTools を起動できない場合には、 インスペクタが起動しない場合 をご確認ください。

../../../_images/92.png

注釈

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

../../../_images/102.png

注釈

Monaca デバッガーが提供する機能に関しては、 機能の概要 をご確認ください。