前回は、Monacaデバッガーの基礎知識について説明しました。詳しくは、以下を参照してください。

Monacaデバッガーを使ってみよう（基礎知識編）

今回は、MonacaデバッガーとMonacaクラウドIDEの活用について説明していきたいと思います。今回も、Android版Monacaデバッガーを使用して説明します。

プロジェクトを実行する

Monacaデバッガーでプロジェクトを実行する場合は、プロジェクト一覧から動作確認を行うプロジェクトをタップします。

設定画面のデバッガーメニューを非表示にするをONに設定していない場合は、プロジェクトの実行画面に、デバッガーメニューボタンが表示されます。

デバッガーメニュー

デバッガーメニューでは、以下の項目が用意されています。

プロジェクト一覧へ戻る
リロード
ログ画面の表示
スクリーンショット

プロジェクト一覧へ戻る

プロジェクト一覧へ戻るをタップする事で、プロジェクト一覧画面へ戻ります。

リロード

リロードをタップする事で、手動でプロジェクトを更新する事ができます。MonacaクラウドIDEとのライブリロードで正常に更新内容が反映されない場合は、手動での更新を試してみてください。

ログ画面の表示

ログ画面では、Monacaプロジェクト内で実行されている

console.log();

の内容が表示されます。

この内容は、MonacaクラウドIDEのデバッガーパネルにあるConsoleにも表示されます。

スクリーンショット

スクリーンショット画面では、現在実行されている画面のスクリーンショットを撮影する事ができます。

編集ボタンをタップする事で、手書きで編集を行う事ができます。

デバッグ

アプリ開発では、ソースコードを編集し、編集した内容が正しく処理されているか確認するデバッグ作業を行います。

Monacaデバッガーは、MonacaクラウドIDE上で編集されたソースコードファイルが保存されると、ライブリロード機能により、Monacaデバッガーにリアルタイムで同期されます。そのため、HTMLのコンテンツやスタイルシート、JavaScriptの編集内容をリアルタイムに確認する事ができます。また、JavaScriptにconsole.log();を記述することで、ログ画面からJavaScriptの処理経過を確認する事ができます。

ログ画面に出力されている内容から問題の原因が判断できないような場合は、USBデバッグを行うことで、詳細にデバッグ作業を行う事ができます。

USBデバッグ

USBデバッグは、Monacaデバッガーをインストールしている端末をPCにUSB接続し、Chromeのデベロッパーツールを使用したデバッグ方法になります。

Chromeのデベロッパーツールを使用したデバッグ方法は、Androidが対象になります。iOSでUSBデバッグを行う場合は、Safariが必要になるため、Macが対象になります。

USBデバッグについては、以下を参照していください。

ChromeのデベロッパーツールのElementsやStylesからは、MonacaプロジェクトのHTML構成に関する情報を確認する事ができます。

Sourcesでは、MonacaプロジェクトのJavaScriptファイルを開き、ブレイクポイントを設定し、デバッグを行う事もできます。ブレイクポイントを設定することで、より詳細にJavaScriptの処理状況を確認する事ができます。

外部サーバへ接続する処理で問題が発生する場合は、Networkから状況を確認する事ができます。Local storageのようなストレージを使用している場合は、Applicationから確認する事ができます。

Chromeのデベロッパーツールでは、上記の他にもたくさんの機能が提供されています。Monacaデバッガーのログ画面に表示されている情報から問題の原因がわからない場合は、Chromeのデベロッパーツールを活用したUSBデバッグを試してみてください。

おわりに

今回は、MonacaデバッガーとMonacaクラウドIDEの活用について説明しました。

MonacaプロジェクトにCordovaプラグインを追加した場合やネイティブ側の設定を変更した場合の動作確認には、再度ビルドを実行して作成したアプリで動作を行う必要がありますが、HTMLアセット部分の変更については、Monacaデバッガーを使用することで、リアルタイムに動作を確認する事ができます。また、USBデバッグを行うことで、詳細なデバッグも行う事ができます。

Monacaでアプリ開発を行う場合は、Monacaデバッガーを積極的に活用してください。