Help us understand the problem. What is going on with this article?

開発効率を数倍アップ!hifive開発者ツールを使いこなそう

More than 5 years have passed since last update.

システム開発は順当に行くだけとは限りません。むしろ開発よりもデバッグやテストの方が使っている時間が多かったりもします。そのため、効率的なデバッグ環境があるというのは大きな利点になるでしょう。

hifiveではそのためのhifive開発者ツールを用意しています。複雑になりがちなJavaScript開発もhifive開発者ツールを使えばすっきり見通しの良い開発が続けられるはずです。

デバッグツールの設定

まずは設定からです。といってもとても簡単で、

<script src="//code.htmlhifive.com/h5-dev-tool.js"></script>

を読み込むだけです。またはこちらからダウンロードしたZipファイルを解凍して、同じフォルだ内に入れて読み込んでください。

注意点としては、 h5.dev.js を読み込んだ後に h5-dev-tool.js を読み込むようにしてください。

hifive開発者ツールを起動

JavaScriptファイルを読み込む記述をしたら、HTMLファイルをブラウザから開きます。

Google Chromeなどポップアップウィンドウをデフォルト禁止しているブラウザではこのような注意アラートが出るかも知れません。ポップアップブロックを解除して再読み込みしてください。

こちらがhifive開発者ツールが開いた状態になります。左下にあるウィンドウはWebアプリケーション、右上にあるのがhifive開発者ツールです。

hifive開発者ツールの主な機能

では主な機能を順番に見ていきます。まずメソッドの内容が分かります。

あるコントローラーのあるロジックにおけるメソッドが分かるようになっています。0と表示されているのはメソッドがコールされた回数です。

次にトレースです。トレースではメソッドの呼び出しと終了がリストになって表示されます。これでどういった処理が行われたかが一目で分かるようになります。

さらにトレースでは右クリックで該当関数に飛べるようになっています。

コントローラレベルではイベントハンドラを見ることもできます。例えば下の頭の場合、 #calc click に対してイベントがついているのが分かります。

ちょっとこの画像では分かりづらいのですが、 #calc click をマウスオーバーすると、左側の = ボタンがハイライトされます。つまりイベントハンドラと結びついたDOMをハイライトしてくれます。これはどのイベントがどのDOMと関連しているかが一目で分かるので開発効率があがるはずです。

さらにコントローラ自身を選んだ場合、そのコンテナがハイライトされます。これでコントローラがどのDOMを監視しているかが一目で分かります。

便利なところ

hifiveはMVCフレームワークなので、ファイル名の命名規則や配置を決めておくことで誰でも開発に加わりやすいです。とはいえ、大型なWebアプリケーションのある一部を修正してほしいと言われてもとっかかりがないと始めることすらできないと思います。

そこでhifive開発者ツールを使うと画面を見つつ、該当する画面中の該当するメソッドがどこにあるのかすぐに突き止められるようになります。さらにトレースを見ながら処理を追いかけていくことで、どこを修正すべきかと言ったあたりをつけるのも簡単になるでしょう。

デバッグ時においてもロガーやトレースを組み合わせることで開発効率はぐっとアップするはずです。JavaScriptのMVCフレームワークはいくつかありますが、hifiveはこういった業務の中で求められるであろう機能が充実しているのが大きな特徴になります。ぜひご利用ください!

今回のコードはGitHub上にアップしてあります(calc.html)。こちらもあわせてご覧ください。

hifive - HTML5とスマートフォンのための開発プラットフォーム - hifive

hifive
hifiveはHTML5企業Webシステムのための開発プラットフォームです。
http://www.htmlhifive.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした