InternetExplorer 11 F12 開発者ツールの新機能
Windows 8 のアップデート版である新しい OS Windows 8.1 の配布が 10 月 18 日から開始されます。
この配布は Windows 8 用のアプリ ストアである Windows ストアを介してダウンロード提供され、Windows 8 ユーザーであれば、誰しもが無償でアップグレードすることができます。
Windows 8.1 には InternetExplorer(以降、IE) の最新バージョンである InternetExplorer 11 (以降、IE11) が搭載されています。(※1)(※2)
IE11 は、より Web 標準に準拠するとともに、SPDY、MPEG-DASH、WebGL などの最新の機能もサポートしてします。また開発者ツールも大幅な機能追加がされており、より細かな調査とデバッグができるようになっています。
今回の記事では、この IE11 に搭載されている F12 開発者ツールの新機能について紹介します。
(※1) 正式リリースまで、IE11 を使用するには、Windows 8.1 Preview をインストールする必要があります。
(※2)Windows 7 用にも IE11 が提供されます。現在は開発者の検証用としてDeveloper Preview 版が公開されています。
F12 開発者ツールとは?
IE11 の F12 開発者ツールの新機能について紹介する前に、F12 開発者ツールについて簡単に紹介しておきましょう。
F12 開発者ツールは InternetExplorer に付属の開発者ツールです。Firefox の Firebug や Chrome デベロッパーツールのようなもの、と言えばわかりやすいでしょう。
IE8 からのすべての IE に搭載されており、名前にあるとおりキーボードの [F12] キーを押下することで使用することができます。
以下に参考として IE9(※) の F12 開発者ツールの使い方について書いた記事のリンクを掲載しますので、IE11 以前の IE をお使いの方、これまでの F12開発者ツールの機能を確認したい方はぜひご覧ください。
- 使ってみよう! [F12] IE9 開発者ツール
- HTML と JavaScript のデバッグ編
- さまざまな情報の表示
- HTTP キャプチャ機能
- 検証機能
IE11 F12 開発者ツールの新機能
IE11 の F12 開発者ツールでは、新たな機能が追加されるとともにUIのデザインも大きく変更されています。
メニューとタブがなくなり、左側のツールバーのアイコンをクリックして機能を選択するようになっています。
(IE11 の F12 開発者ツールの画面)
(新しい F12 開発者ツールのメニューアイコン)
ツールバーの各メニューアイコンに割り当てられた機能の内訳は以下のとおりです。
ここからはツールバーの各アイコンの内容ごとに、新しく追加された特徴的な機能について紹介していきます。
DOM 要素の検査
調査したい DOM 要素の選択が、ページの表示画面から直接行えるようになりました。
この機能を使用するには、Web ページが表示されている状態で、調査対象となる箇所でマウスの右ボタンをクリックし、表示されるコンテキストメニューから[要素の検査]を選択します。
(コンテキストメニューに表示される [要素の検査])
F12 開発者ツールが起動し、ツール内の DOM エクスプローラーで目的の要素が選択されて表示されるとともに、ページの表示画面でも、該当する要素(エレメント)の箇所が、選択をあらわすマスクがかかった状態で表示されます。
(要素が選択されたところ)
もちろん、従来どおり DOM エクスプローラーの [要素の選択] ボタンをクリックし、表示されているページをクリックするという方法でも指定可能です。
( [要素の選択] ボタン)
DOM エクスプローラーでは、読み込まれているドキュメントの要素やスタイルの操作が行えますが、IE11 の F12 開発者ツールでは、要素を操作するための機能がさらに追加されたのに加え、ドラッグ&ドロップによる要素の入れ替えや、属性入力の際の入力補助機能がサポートされています。
(要素を操作するためのメニュー)
(入力補助機能)
また現在選択されている要素の DOM 階層は、パン屑メニューで表示され、クリックで選択を切り替えられるようになっています。
(選択するDOM階層を切り替えるためのパン屑メニュー)
コンソールの表示
JavaScript を記述してテストするためのコンソールは、画面左のツールバーアイコンからだけでなく、各画面右上部にあるコンソールの表示アイコンからも呼び出すことができるようになりました。
(コンソールの表示アイコン)
これにより、例えば、DOM エクスプローラーでページの要素を確認しながら JavaScript を記述して試すということができるようになりました。
また、JavaScript の入力支援機能がサポートされ、コードを効率よく記述することができるようになりました。
(JavaScript の入力支援機能)
JavaScript のデバッグ
デバッガーでは、ブレークポイントのほかに、トレースポイントが設定できるようになりました。
(エディタ画面でのコンテキストメニュー)
トレースポイントとは
トレースポイントは、ブレークポイントとは違い、コードの実行が設定箇所に達しても実行が中断されることはなく(または中断された後に)、デバッガで指定したトレースポイント メッセージを取得することができます。この機能を使用することで、変数やオブジェクトの状態を追いかける(トレース)することができます。
(トレースメッセージの設定画面)
トレースメッセージを設定するには、トレースポイント設定時に表示されるダイアログボックスを使用するか、トレースポイント上でマウスの右ボタンをクリックして表示されるコンテキスメニューの [トレースメッセージ] メニューを選択して行います。
条件つきブレークポイント
ブレークポイントでは、条件付きブレークポイントが指定できるようになりました。この機能を使用すると、デバッグ中のプログラムの中断条件を指定することができます。
(ブレークポイントの条件設定画面)
ブレークポイントの条件を指定するには、ブレークポイントの上でマウスの右ボタンをクリックし、表示されたコンテキストメニューより [条件] メニューを選択して行います。
その他、デバッガーでは例外動作の変更や、Web ワーカー使用の際のデバッガの振舞などを指定できるようになっています。
ネットワーク
ネットワークの機能を使用すると HTTP のキャプチャ、リクエストのアクション開始からレスポンスが返りコンテンツがロードされるまでの各タイミングの時間など、ネットワーク関連の情報を細かく分析することができます。
([ネットワーク]画面)
これらの機能は、従来のバージョンのものと大きく変わるところはありませんが、ブラウザーキャッシュの消去や、Cookie のクリア 機能が追加されています。
UI の応答
UI の応答 機能を使用すると、ページのロード、あるいは操作時の CPU 使用率とその内訳、視覚スループットや、イベントに関する細かな情報がグラフィカルに表示されます。
([UIの応答]画面)
UI の応答 機能を使用して UI 応答のプロファイリングを行うには、画面上部にある[プロファイリング セッションの開始]ボタンをクリックし、キーボードの [F5] キーを押下するなどしてページを再読み込みするか、分析対象のUI操作を行います。
([UIの応答]ツールバー)
ページの読み込み、あるいは操作が完了したら、[プロファイリング セッションの開始] ボタンの右隣りの[プロファイリング セッションの終了]ボタンをクリックし、プロファイリングを終了します。この機能はインタラクティブに動作するブラウザ アプリケーションのパフォーマンス分析などに効果を発揮します。
プロファイラー
プロファイラー機能を使用すると、コンテンツが読み込まれて描画されるまでに使用された各機能の呼び出し回数や経過時間、JS ファイルの場合はそのURL、メソッドの行番号などが記録されます。
([プロファイル]画面)
処理に要した時間や呼び出し回数を見ることで、描画処理 (正確には読み込みが完了されるまでの処理) のボトルネックを調査することができます。
ただし、ここで測られるのは Web ブラウザ内の処理時間のみなので、実際にページ読み込みのチューニングを行う際には、ネットワーク機能を使用して通信上のボトルネックがないかも合わせて調査を行う必要があります。
プロファイラー の機能を使用してプロファイリングを行うには、画面上部にある プロファイリングの開始ボタンをクリックし、キーボードの [F5] キーを押下するなどしてページを再読み込みし、読み込みが完了したらプロファイリングの終了ボタンをクリックします。
([プロファイラー]ツールボタン)
プロファイリングは複数回の結果を保持できる上、プロファイリングされたデータをファイルにエクスポートすることができます。
また、表示を 呼び出しツリーに切り替えることができます。
([プロファイラー]呼び出しツリー表示)
メモリのプロファイリング
メモリ 機能を使用すると、任意の時間でメモリ使用状況のスナップショットを取り、使用状況を観察し調査することができます。
([メモリ]画面)
各スナップショットには、ページを構成する各オブジェクトのメモリの使用状況が記録されます。
(スナップショットの内容表示画面)
メモリ機能を使用して使用メモリのプロファイリングを行うには、画面上部にあるプロファイリングセッションの開始ボタンをクリックし、メモリの使用状況について分析を行いたい操作、処理を行い、完了したら[ヒープ スナップショットを作成します]ボタンをクリックします。
([メモリ]ツールバー)
[ヒープ スナップショットを作成します] ボタンを満足のいく回数クリックし、満足のいく個数のスナップショットが取得できたら [プロファイリング セッションの終了] ボタンをクリックしプロファイリングを終了します。
この機能を使用すると、オブジェクトのメモリ使用量はもちろんのこと、複数のスナップショットを比較することでオブジェクトが正しく削除されたか、あるいは、オブジェクトが正しくメモリを解放したなどを調査することができます。
エミュレーション
エミュレーションを使用すると、ユーザーエージェントを他のWebブラウザ用のものに変えたり、ディスプレイの解像度や向きを変えたテストを行えます。
([エミュレーション]画面)
たとえば以下の図は、解像度 1280x720 の解像度でディスプレイの向きを縦に指定したものです。
(エミュレーション機能を実行したところ)
まとめ
今回の記事では Internet Explorer 11に搭載される F12 開発者ツールに追加された特徴的な新機能について簡単に紹介しました。
F12 開発者ツールには、今回紹介した機能以外にも、Web コンテンツのデバッグに役立つ非常に多くの機能が搭載されていますので、IE をお使いの方はぜひキーボードの [F12] キーを押してみてください。
なお、Surface RT に代表される ARM ベースのWindows RT 機の IE にも F12 開発者ツールは搭載されていますので、こちらをお持ちの方も手軽なWeb コンテンツのデバッグツールしてぜひご活用ください。
Windows 8.1 に搭載される IE11 F12 開発者ツールについてのより詳しい情報につきましては、現状はまだ英語ですが、以下のドキュメントが公開されておりますので、ご覧ください。
Using the F12 developer tools
https://msdn.microsoft.com/library/ie/bg182326(v=vs.85)