最近たびたび登場する田中です。本日はMonacaが持つインスペクター機能を紹介したいと思います。

先に宣伝を。PhoneGapで学ぶマルチスクリーン対応ハイブリッドアプリ開発はPhoneGapの概要から始まり、Monacaを使いながら実際のアプリを作っていくという連載になっています。ぜひご覧ください！

本題です。Monacaでは「インスペクター」という機能がありまして、実機上で動作しているアプリの中身をMonaca IDE上で閲覧することができます。

インスペクターには、下記のような機能が搭載されています：
１．表示されているページのDOMを表示し、その内容を書き換える
２．ローカルストレージやセッションストレージの内容を操作する
３．グローバル変数の内容を確認する
４．JavaScript関数をリモートから実行する

ここでは、簡単にこれらの使い方を紹介します。

○ どうやって使うの？

端末にインストールしたMonacaデバッガーで、IDE上と同じプロジェクトを実行してください。Monaca IDEにある「インスペクター」にて、自動的に端末上で表示されているページ情報が出力されます。

では使い方を見ていきます。

○ 表示されているページのDOMを表示し、その内容を書き換える

「Elements」タブをクリックすると、DOMツリーを確認できます。閲覧だけでなく、スタイルを動的に記述したり、HTMLの内容を変更することも可能です。

○ ローカルストレージやセッションストレージの内容を操作する

「Resources」タブでは、そのページが持つリソース情報を参照できます。

例として、今回のサンプルでは、下記のようにしてローカルストレージに値をセットしています。

window.localStorage.setItem("test1", "value1");
window.localStorage.setItem("test2", ["val1", "val2"]);

画面の通り、実際にセットしている値を閲覧するだけでなく、値の削除や変更も可能です。

○ グローバル変数の内容を確認する

「Console」タブでは、JavaScriptコンソール機能を利用できます。

この例では、getElementsByTagNameを用いてDOMの情報を読み取っています。

○ JavaScript関数をリモートから実行する

このタブでは、関数を実行することもできます。

例として、window.device.platformというPhoneGapが持つ変数にアクセスし、端末の種類を取得しています。

jQueryなどの関数も実行できますので、手軽にグローバル変数の値を表示できます。

このように、Monacaで開発している際のJavaScriptデバッグは、インスペクターを用いると便利なケースが多いと思います。ちなみにインスペクターの機能改良も予定していますので、そのうち新しいバージョンのインスペクターをお披露目できる予定です。

モバイル開発でChromeなどのWebデベロッパーツールやFirebugのような機能を使ってみたい方は、ぜひMonacaを試していただければと思います。