ツール・ライブラリ » hifive開発者ツール

hifive開発者ツール

Last modified by simdy on 2015/05/26, 17:35

概要
ツールのダウンロード
デモ
起動方法
使い方
使用例

※ブラウザ内蔵の開発者ツールの使い方についてはこちらのページを参照してください。

概要

hifive開発者ツールは、hifiveを使用して開発されたアプリケーションの構造の可視化・動作ログの取得などを行うツールです。
hifiveフレームワーク本体と一緒に読み込むすることで動作します。
注：IE6では正しく動作しません。

以下のような機能を持っています。

動作中のコントローラの一覧・子コントローラの一覧表示
- コントローラのメソッド・変数の一覧と内容を表示
- イベントハンドラの場合、そのハンドラがどのDOM要素のイベントで発火するかの対応関係を表示
イベントハンドラの疑似実行
どのDOM要素にどのコントローラがバインドされているかの表示
イベントハンドラ・メソッドの呼び出しログ（ネストして表示）の表示
- イベントハンドラのみ表示、プライベートメソッドを除外する、などのフィルタリングが可能

ブラウザ内蔵の開発者ツールとの違い・使い分け

hifive開発者ツールは、hifiveによって書かれたコードの構造を認識し、コントローラ単位やロジック単位で階層構造を表示したり、コントローラごとのイベントハンドラの呼び出し回数をカウントしたりすることができます。
一方ブラウザ内蔵の開発者ツールは、ブラウザの内部状態を詳細に確認するのに向いています。例えば、DOM要素の状態を確認したり詳細なパフォーマンス計測を行うことができます。
よって、アプリケーションの全体的な構造や動作を把握したい場合にはhifive開発者ツールを使用し、詳細な内部構造の把握やスクリプトのステップ実行などを行いたい場合にはブラウザの開発者ツールを使用する、という使い分けになります。

ツールのダウンロード

ダウンロードページ

コードホスティングも利用できます。　※注：利用上の注意
こちらを利用する場合は、以下のタグをhifiveの読み込みタグの直後に記述してください。

デモ

hifive開発者ツールの動作デモはこちら。

※ポップアップブロックを解除してご利用ください。

起動方法

本ツールを起動させるには、デバッグ対象のページで、h5-dev-tool.jsをhifiveのスクリプトの直後に読み込みます。
正しく設定した状態でページを表示すると、デバッグ情報を表示するウィンドウが自動的に開きます。

例：

IE7および8の場合、ツールを正しく動作させるためには、ツール表示用のウィンドウで最初に空のページを開く必要があります。
h5devtool.htmlをブラウザがアクセスできる場所に配置し、
以下のように、__h5_devtool_pagepath変数にh5-dev-tool.htmlのパスを設定してください。
（h5.devtool.jsを読み込む前に行ってください。）
IE9以上、およびその他のブラウザでは、この設定は必要ありません（設定しても無視されます）。

使い方

ツールを起動すると、以下のようなウィンドウがポップアップで開きます。

① コントローラ及びロジックのリストを表示します。詳細
② コントローラ及びロジックのイベントハンドラ、メソッドの呼び出しログを表示します。詳細
③ ロガーを使って出力されたものが表示されます。詳細
④ 開発者ツールの設定を行います。詳細

初期状態では「コントローラ」タブが表示されます。

「コントローラ」タブ

このタブでは、左には現在バインドしているコントローラとそのコントローラが持つロジックの一覧がツリー表示されます。ツリーは親子関係を表しています。

ツリー表示されているコントローラにカーソルを当てる（マウスオーバーする）と、デバッグ対象の画面側で、そのコントローラがバインドされている要素がハイライト表示されます。親コントローラの場合は枠線が実線、子コントローラの場合は、枠線が点線になります。

左側のリストからコントローラまたはロジックを選択すると、選択したコントローラの詳細が右側に表示されます。

コントローラ・ロジックの詳細ビュー

「コントローラタブ」からコントローラまたはロジックを選択（クリック）すると、選択したインスタンスの詳細情報(以下、詳細ビュー)が表示されます。詳細ビューには以下のタブがあります。

「イベントハンドラ」タブ(コントローラインスタンスのみ)

コントローラの持つイベントハンドラ一覧が表示されます。各イベントハンドラの右上には実行された回数が表示されています。実行回数が0回のイベントハンドラはイベントハンドラ名の背景が薄く表示されます。

イベントハンドラの表示される順番は辞書順です。

イベントハンドラにマウスオーバーすると、そのイベントハンドラのターゲットが存在する場合は、その要素にオーバーレイが表示されます。複数ある場合はセレクトボックスに複数のターゲット要素が表示され、選択できます。

実行ボタンを押すと、選択されたターゲット要素に対してそのイベントハンドラが定義されているイベントをトリガします。

「メソッド」タブ

このタブでは、選択されたコントローラおよびロジックの持つメソッドの一覧が表示されます。

メソッドの表示される順番は、ライフサイクルイベント(実行される順)→パブリックメソッド(辞書順)→プライベートメソッド(辞書順)です。

注：「プライベートメソッド」とは、名前が「_」で始まる関数の事です。

「トレース」タブ

選択しているインスタンスのイベントハンドラ及びメソッドの実行履歴が表示されます。

画面上部の「イベント」「パブリック」などのチェックを外すと、その種類のログを非表示にします。

テキストボックスに文字列を入力して絞込みまたは除外ボタンを押すと、入力した文字列にマッチするトレースログに絞り込むまたは除外することができます。

トレースログの行を右クリックすると、クリックしたイベントハンドラまたはメソッドの詳細表示へ移動することができます。

「その他情報」タブ

選択されたインスタンスの詳細情報を表示しています。コントローラとロジックで表示する情報が異なります。

コントローラの場合

名前	コントローラの名前
ルートコントローラか	選択されたコントローラ自身がルートコントローラ(※)ならtrue。そうでない場合はfalse。
ルート要素	バインドされている要素。タグ名#id.クラス、のように表記されます。
ルートコントローラ	ルートコントローラ名。
親コントローラ	親コントローラ名。自分がルートコントローラなら"なし"です。
子コントローラ一覧	子コントローラ名が一覧で表示されます。
テンプレートパス一覧	コントローラで使用しているテンプレートファイルのパスが一覧で表示されます。テンプレートを使用していない場合は"なし"です。
有効なテンプレートID一覧	コントローラで使用可能なテンプレートIDの一覧が表示されます。親コントローラで使用可能なテンプレートIDやh5.core.viewで使用可能なテンプレートも含みます。

※ルートコントローラ
親子関係がネストしてバインドされているコントローラについて、一番大元のコントローラをルートコントローラと言います。

ロジックの場合

名前	ロジックの名前
ロジックインスタンスの名前	コントローラ名#コントローラのロジックインスタンスを持つプロパティの名前