hifive開発者ツール
※(注記)ブラウザ内蔵の開発者ツールの使い方についてはこちらのページを参照してください。
概要
hifive開発者ツールは、hifiveを使用して開発されたアプリケーションの構造の可視化・動作ログの取得などを行うツールです。
hifiveフレームワーク本体と一緒に読み込むすることで動作します。
注:IE6では正しく動作しません。
以下のような機能を持っています。
- 動作中のコントローラの一覧・子コントローラの一覧表示
- コントローラのメソッド・変数の一覧と内容を表示
- イベントハンドラの場合、そのハンドラがどのDOM要素のイベントで発火するかの対応関係を表示
- イベントハンドラの疑似実行
- どのDOM要素にどのコントローラがバインドされているかの表示
- イベントハンドラ・メソッドの呼び出しログ(ネストして表示)の表示
- イベントハンドラのみ表示、プライベートメソッドを除外する、などのフィルタリングが可能
ブラウザ内蔵の開発者ツールとの違い・使い分け
(追記) hifive開発者ツールは、hifiveによって書かれたコードの構造を認識し (追記ここまで)、コントローラ単位やロジック単位で階層構造を表示したり、コントローラごとのイベントハンドラの呼び出し回数をカウントしたりすることができます。
一方(追記) ブラウザ内蔵の開発者ツールは、ブラウザの内部状態を詳細に確認するのに向いています。 (追記ここまで)例えば、DOM要素の状態を確認したり詳細なパフォーマンス計測を行うことができます。
よって、アプリケーションの全体的な構造や動作を把握したい場合にはhifive開発者ツールを使用し、詳細な内部構造の把握やスクリプトのステップ実行などを行いたい場合にはブラウザの開発者ツールを使用する、という使い分けになります。
ツールのダウンロード
コードホスティングも利用できます。 ※(注記)注:利用上の注意
こちらを利用する場合は、以下のタグをhifiveの読み込みタグの直後に記述してください。
デモ
※(注記)ポップアップブロックを解除してご利用ください。
起動方法
本ツールを起動させるには、デバッグ対象のページで、h5-dev-tool.jsをhifiveのスクリプトの直後に読み込みます。
正しく設定した状態でページを表示すると、デバッグ情報を表示するウィンドウが自動的に開きます。
例:
<!-- hifiveの直後に開発者ツールのファイルを読み込む -->
<script src="//code.htmlhifive.com/h5-dev-tool.js"></script>
IE7および8の場合、ツールを正しく動作させるためには、ツール表示用のウィンドウで最初に空のページを開く必要があります。
h5devtool.htmlをブラウザがアクセスできる場所に配置し、
以下のように、__h5_devtool_pagepath変数にh5-dev-tool.htmlのパスを設定してください。
(h5.devtool.jsを読み込む前に行ってください。)
IE9以上、およびその他のブラウザでは、この設定は必要ありません(設定しても無視されます)。
<!-- IE7,8用の追加設定ここから -->
<script type="text/javascript">
var __h5_devtool_page = "/path/to/h5-dev-tool.html"; //IE7,8用のダミーページのパスを指定
</script>
<!-- 追加設定ここまで -->
<script src="h5-dev-tool.js"></script>
使い方
ツールを起動すると、以下のようなウィンドウがポップアップで開きます。
overview.png
1 コントローラ及びロジックのリストを表示します。詳細
2 コントローラ及びロジックのイベントハンドラ、メソッドの呼び出しログを表示します。詳細
3 ロガーを使って出力されたものが表示されます。詳細
4 開発者ツールの設定を行います。詳細
初期状態では「コントローラ」タブが表示されます。
「コントローラ」タブ
このタブでは、左には現在バインドしているコントローラとそのコントローラが持つロジックの一覧がツリー表示されます。ツリーは親子関係を表しています。
ツリー表示されているコントローラにカーソルを当てる(マウスオーバーする)と、デバッグ対象の画面側で、そのコントローラがバインドされている要素がハイライト表示されます。親コントローラの場合は枠線が実線、子コントローラの場合は、枠線が点線になります。
controller-highlight.png
左側のリストからコントローラまたはロジックを選択すると、選択したコントローラの詳細が右側に表示されます。
コントローラ・ロジックの詳細ビュー
「コントローラタブ」からコントローラまたはロジックを選択(クリック)すると、選択したインスタンスの詳細情報(以下、詳細ビュー)が表示されます。詳細ビューには以下のタブがあります。
「イベントハンドラ」タブ(コントローラインスタンスのみ)
detail-eventhandler1.png
コントローラの持つイベントハンドラ一覧が表示されます。各イベントハンドラの右上には実行された回数が表示されています。実行回数が0回のイベントハンドラはイベントハンドラ名の背景が薄く表示されます。
イベントハンドラの表示される順番は辞書順です。
イベントハンドラにマウスオーバーすると、そのイベントハンドラのターゲットが存在する場合は、その要素にオーバーレイが表示されます。複数ある場合はセレクトボックスに複数のターゲット要素が表示され、選択できます。
実行ボタンを押すと、選択されたターゲット要素に対してそのイベントハンドラが定義されているイベントをトリガします。
detail-eventhandler2.png
「メソッド」タブ
detail-method.png
このタブでは、選択されたコントローラおよびロジックの持つメソッドの一覧が表示されます。
メソッドの表示される順番は、ライフサイクルイベント(実行される順)→パブリックメソッド(辞書順)→プライベートメソッド(辞書順)です。
注:「プライベートメソッド」とは、名前が「_」で始まる関数の事です。
「トレース」タブ
detail-trace1.png
選択しているインスタンスのイベントハンドラ及びメソッドの実行履歴が表示されます。
画面上部の「イベント」「パブリック」などのチェックを外すと、その種類のログを非表示にします。
detail-trace2.png
テキストボックスに文字列を入力して絞込みまたは除外ボタンを押すと、入力した文字列にマッチするトレースログに絞り込むまたは除外することができます。
detail-trace3.png
トレースログの行を右クリックすると、クリックしたイベントハンドラまたはメソッドの詳細表示へ移動することができます。
detail-trace4.png
「その他情報」タブ
選択されたインスタンスの詳細情報を表示しています。コントローラとロジックで表示する情報が異なります。
コントローラの場合
detail-other1.png
| 名前 | コントローラの名前 |
|---|---|
| ルートコントローラか | 選択されたコントローラ自身がルートコントローラ(※(注記))ならtrue。そうでない場合はfalse。 |
| ルート要素 | バインドされている要素。タグ名#id.クラス、のように表記されます。 |
| ルートコントローラ | ルートコントローラ名。 |
| 親コントローラ | 親コントローラ名。自分がルートコントローラなら"なし"です。 |
| 子コントローラ一覧 | 子コントローラ名が一覧で表示されます。 |
| テンプレートパス一覧 | コントローラで使用しているテンプレートファイルのパスが一覧で表示されます。テンプレートを使用していない場合は"なし"です。 |
| 有効なテンプレートID一覧 | コントローラで使用可能なテンプレートIDの一覧が表示されます。親コントローラで使用可能なテンプレートIDやh5.core.viewで使用可能なテンプレートも含みます。 |
※(注記)ルートコントローラ
親子関係がネストしてバインドされているコントローラについて、一番大元のコントローラをルートコントローラと言います。
ロジックの場合
detail-other2.png
| 名前 | ロジックの名前 |
|---|---|
| ロジックインスタンスの名前 | コントローラ名#コントローラのロジックインスタンスを持つプロパティの名前 |
「トレース」タブ
trace.png
全てのコントローラとロジックを横断するトレースログです。コントローラ及びロジックの詳細ビューのトレースと同様に、トレースログのフィルタ、関数へジャンプする機能があります。
「ロガー」タブ
logger.png
ロガー(h5.log.createLogger()で生成したロガーオブジェクト)から出力されたメッセージが表示されます。
「設定」タブ
settings.png
hifive開発者ツールの設定を行います。
| ログの最大表示件数 | トレースログで表示する最大件数を設定します。デフォルトは1000です。 |
|---|
使用例
どこに何のコントローラがバインドされているかも分からない、他の人が開発したhifiveアプリの修正を頼まれた、というケースで使い方を説明します。
頼まれた修正内容は、
- 動画検索アプリの検索ボタンを押した時に、検索ワードが空だったら何もしないようにしてほしい
です。
まずは、その修正内容をどこに記述するかを調べる必要があります。hifive開発者ツールを読み込んで、どこに何のコントローラがバインドされて、イベントハンドラがどこにバインドされているかを調べましょう。
まず、対象のアプリに開発者ツールを読み込む記述を書き、アプリのページを開きます。
debug1.png
コントローラのリストに、youtube.controller.SearchControllerと言う名前のコントローラがいます。
debug2.png
どうやらこのコントローラで検索を行っていそうです。
実際に、検索ワードが空のまま検索をしてみたときのトレースログを確認してみましょう。アプリ側で検索ボタンを押して、トレースログを見てみます。
debug3.png
トレースログを見ると、次のことが分かります。
- youtube.controller.SearchControllerの.form-search submitでイベントを受け取っている
- コントローラはyoutube.logic.SearchLogicのsearchメソッドを呼び出している
- ロジックのsearchメソッドは非同期で、reject(失敗)している
一応、検索キーワードが空でない時のトレースログも確認してみます。キーワードに何か文字を入力して検索ボタンを押し、トレースログを確認します。
debug4.png
キーワードが空でない時は、非同期処理も成功しており、動作に問題はなさそうです。アプリ側にも検索結果が表示されています。
修正要件は、キーワードが空の時には何もしないでほしいとのことでした。
イベントハンドラの先頭でキーワードのチェックを行い、キーワードが空なら何もしない、ロジックのメソッドも呼ばない、とすれば良さそうです。
トレースログから、イベントハンドラは、youtube.controller.SearchControllerの'.form-search submit'で受け取っているということが分かりました。開発者ツールでそのイベントハンドラがどう記述されているか確認してみましょう。
トレースログの、youtube.controller.SerachController#.form submit の行を右クリックして、関数を表示をクリックし、そのイベントハンドラを表示します。
debug5.png
'.form-search submit' のイベントハンドラにマウスオーバすると、アプリの検索フォームがハイライト表示されます。
debug6.png
修正するのはこのイベントハンドラで間違いないようです。ソースコードを見てみると、キーワードが空の時に何かする、という記述はなさそうです。
こうして修正するべき箇所をhifive開発者ツールを使って特定できました。後は、該当するソースファイルを編集すればOKです。