Asial Blog

Recruit! Asialで一緒に働きませんか?

Monacaのインスペクターはモバイル版Webデベロッパーツール

カテゴリ :
バックエンド(プログラミング)
タグ :
Tech
Monaca
社長BLOG
最近たびたび登場する田中です。本日はMonacaが持つインスペクター機能を紹介したいと思います。

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



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

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

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

○ どうやって使うの?



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

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

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



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



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



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



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

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

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

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



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



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

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





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

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

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

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

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

コメント

  • road

    先月から利用はじめた初心者で恐縮なのですが、説明頂いている画面とは違い
    element,resource,console のみの3つしか機能が表示されません。
    google mapを使用したツールを開発したいのですが、ブレークポイントを設定したり
    辿れるプロパティ、メソッドや変数の値を表示したりすることは可能でしょうか?
    プラグイン等の設定が必要でしょうか?
    無理であれば、eclipseなどを使えば可能など代替の方法をご教授頂けると助かります。

    monacaのみで開発できることを望んで使い始めましたが、デバッグ方法が実機とコンソールへの
    alert出力のみで開発しており効率が悪く感じ上記のような質問をさせて頂きました。
    初心者ゆえ、場違いな内容かもしれませんがご了承ねがいます。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事