hifive開発者ブログコンテンツへスキップFollow:RSSTwitterhifive開発者ブログWebクライアント開発プラットフォーム「hifive」の開発者ブログです。DevToolsに続いて、今回はFirefoxの提供する開発ツールについて見ていきます。この手のツールが注目を浴びたのはFirefoxアドオンだったFirebugが最初だったのではないでしょうか。それもあってかFirefoxの提供する開発者ツールは細かい点まで気が配られた、とても使い勝手の良い機能となっています。MozillaFirefoxの種類についてFirefoxには2つの種類があります。Editionになります。Editionは標準のFirefoxをベースに、開発に役立つアドオンがインストールされているものになります。Editionをベースにしていきます。開発ツールは実に多機能で、設定から表示するタブを切り替えられるくらいです。UIの設計、確認が容易なインスペクタまず基本となるインスペクタです。DOM構造やスタイル設定などが確認できます。該当部分のDOMはハイライト表示されるのでわかりやすいです。スタイルを一時的に変更して表示確認もできます。HTMLについても編集できます。スタイルの変更などはその場で反映されます。JavaScriptのデバッグ、確認に便利なコンソールこちらもインスペクタ同様によく使われる機能だと思います。補完も行われるので便利です。したコードを試したり、変数の状態を調べるのに使えます。ユニークな機能としてファイルの切り替えがあります。iframeで読み込まれているソーシャルボタンなど、外部サイトの解析を行う際に対象ファイルを切り替えることができます。スマートフォン向けの画面サイズで確認するといったシミュレーション機能もあります。JavaScriptのデバッグに使えるデバッガ読み込まれているコードのデバッグに使うのはデバッガタブです。ブレークポイントを設定したり、ウォッチを入れることができます。同時にコンソールを使うこともできます。スタイルシートの設定を確認するのに使えるとスタイルエディタインスペクタではマウスを当てたDOMのスタイルを確認する方法でしたが、スタイルエディタでは個々のファイルに対する全体の設定を確認できます。ここで修正した内容はそのまま反映されますし、保存ボタンを押してダウンロードすることもできます。HTML/JavaScriptのパフォーマンスチェックにPerformancePerformanceタブはそのままで、Webアプリケーション全体のパフォーマンスをチェックできます。DOMイベントにかかった時間を見たり、JavaScriptで時間のかかっている処理を確認するのが便利です。グラフで見たり、一覧表で確認することもできます。JavaScriptについてだけ掘り下げてみることもできます。通信内容を確認するネットワークネットワークタブでは接続した情報を確認できます。ヘッダ情報などを編集してその場で再実行できる機能が便利です。テキストエリアを使って内容を編集したり、コピーして別なツールで使ったりするのもよくあるニーズと言えそうです。Canvas処理の内容を確認Firefoxだけではないかと思われる機能がCanvasの解析です。今後アニメーションコンテンツが増えていく中でかなり役立つのではないでしょうか。細かく処理を追いかけられるようになっています。Audioについてもビジュアル化させることができます。開発ツール上からプロパティの値を変更して、ピッチを変えたりすることができます。ストレージの中身をビジュアル化ストレージタブを使えばCookie、セッションストレージ、IndexedDBなどの値を表形式で閲覧できます。Challengerというコンテンツを用意しています。これは深海へ潜行していくのを通じて開発ツールの使い方を学んでいくコンテンツです。やるべきミッションが書かれていますので、それをこなすとさらに潜行(スクロールしていく)といったゲーム形式で開発ツールの使い方を習得できるようになっています。こんな感じでアニメーション速度をビジュアル的に変えられる、なんてマニアックな機能も覚えられます。コンテンツは英語ですが、そんなに難しい言葉はありませんし、動画をみて操作を確認できます。Challengerを使って覚えるのがお勧めです。Editionは開発者向けとあって、多くの開発時に役立つのでは機能が用意されています。IDE(まだIDEと呼ぶには機能不足感はありますが)もあり、Web開発を行う方にとって強力なツールになるのではないでしょうか。hifive開発者ブログコメントは受け付けていません。Blog.%d人のブロガーが「いいね」をつけました。