社長BLOGTweet最近たびたび登場する田中です。本日はMonacaが持つインスペクター機能を紹介したいと思います。PhoneGapで学ぶマルチスクリーン対応ハイブリッドアプリ開発はPhoneGapの概要から始まり、Monacaを使いながら実際のアプリを作っていくという連載になっています。ご覧ください!本題です。IDE上で閲覧することができます。インスペクターには、下記のような機能が搭載されています:1.表示されているページのDOMを表示し、その内容を書き換える2.ローカルストレージやセッションストレージの内容を操作する3.グローバル変数の内容を確認する4.JavaScript関数をリモートから実行するここでは、簡単にこれらの使い方を紹介します。やって使うの?端末にインストールしたMonacaデバッガーで、IDE上と同じプロジェクトを実行してください。IDEにある「インスペクター」にて、自動的に端末上で表示されているページ情報が出力されます。使い方を見ていきます。表示されているページのDOMを表示し、その内容を書き換える「Elements」タブをクリックすると、DOMツリーを確認できます。閲覧だけでなく、スタイルを動的に記述したり、HTMLの内容を変更することも可能です。ローカルストレージやセッションストレージの内容を操作する「Resources」タブでは、そのページが持つリソース情報を参照できます。例として、今回のサンプルでは、下記のようにしてローカルストレージに値をセットしています。"val2"]);画面の通り、実際にセットしている値を閲覧するだけでなく、値の削除や変更も可能です。グローバル変数の内容を確認する「Console」タブでは、JavaScriptコンソール機能を利用できます。この例では、getElementsByTagNameを用いてDOMの情報を読み取っています。JavaScript関数をリモートから実行するこのタブでは、関数を実行することもできます。例として、window.device.platformというPhoneGapが持つ変数にアクセスし、端末の種類を取得しています。jQueryなどの関数も実行できますので、手軽にグローバル変数の値を表示できます。このように、Monacaで開発している際のJavaScriptデバッグは、インスペクターを用いると便利なケースが多いと思います。ちなみにインスペクターの機能改良も予定していますので、そのうち新しいバージョンのインスペクターをお披露目できる予定です。モバイル開発でChromeなどのWebデベロッパーツールやFirebugのような機能を使ってみたい方は、ぜひMonacaを試していただければと思います。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。