Windows 8.1 徹底解剖　第4回　「Internet Explorer 11」（後編）

　「Internet Explorer 11（以下IE11）」では、これまでの「F12 開発者ツール」が一新され、まったく新しいUIをもつWebの統合環境として生まれ変わった。第4回となる本特集では、この「F12 開発者ツール」の新しいUIと基本的な使い方を紹介していく。

「F12 開発者ツール」とは

　「F12 開発者ツール」は、その名の通りブラウザ上で［F12］キーを押すことで表示されるツールで、Web開発者の開発やデバッグを効率的にしてくれる機能が多数盛り込まれている。IE8に搭載されて以来、少しずつ機能を増やしてきたが、IE11では機能だけではなくUIも大幅に変わっている。まさに“生まれ変わった”と言ってもよいだろう。

　では、IE10までの「F12 開発者ツール」と比較してみよう。まったく見た目が違うことがわかる。

IE10の「F12 開発者ツール」

IE11の「F12 開発者ツール」

　まず目につくのは、上部に設けられたタブがなくなって、新たにサイドバーのアイコンが設けられたことだろう。これまでのタブの役割がサイドバーに移されたと考えてよい。各アイコンの機能は上から順に以下の通り。

• DOM Explorer
• Console
• デバッガー
• ネットワーク
• UIの応答（New）
• プロファイラー
• メモリ(New)
• エミュレーション

　これまで「F12 開発者ツール」を使っていた方なら、これまでの機能を踏襲しつつ機能強化されていることに気づくだろう。それでは、順番に機能を見ていこう。

“DOM Explorer”

タグの階層や、描画時に適用されているスタイルを確認できる“DOM Explorer”

　“DOM Explorer”では、ブラウザーで表示しているページの構造とスタイルが確認可能。

　タグの階層や、描画時に適用されているスタイルを確認することができ、試しにスタイルを消してみたり、追加してみたりして、理想のスタイルをトライ＆エラーで作っていくといったことができる。

　そしてすばらしいのが、編集時にインテリセンスで候補が表示されること。ただし、エディターではないので、編集したソースコードを上書き保存することはできない。

HTMLの要素をドラッグ＆ドロップすることで、レイアウトを変更することもできる

　また、HTMLの要素をドラッグ＆ドロップすることで、レイアウトを変更することもできる。デザインやレイアウトを試行しているときの強力なツールになることは間違いないだろう。

“Console”

　“Console”は、ページ内のエラーの確認やデバッグを行うことができる機能だ。

ページ内のエラーの確認やデバッグを行う“Console”

　上の画像を見てほしい。ページ遷移（ナビゲーション）のイベントやページ内で発生した警告やエラーが表示されていることがわかるだろう。また、document.getElementById()で取得したHTML要素を階層で表示したり、JavaScriptのオブジェクトである“ipw”のオブジェクトの状態を表示したりしていることがわかる。

　“Console”は以前からあったが、IE11ではさらに強化されている。まず、インテリセンス（入力自動補完機能）が使えるようになっており、入力の負担が大幅に減った。

インテリセンスが利用可能に

　また、IE10まではオブジェクトの階層が深い場合、一部が省略されてしまっていたが、IE11では階層がすべて表示されるようになったため、デバッグがしやすくなっている。

深いオブジェクトの階層もすべて表示

　もうひとつ“Console”の非常に便利な機能を紹介しておこう。“Console”はオブジェクトの値を動的に書き換えることができる。これによって、デバッグの効率が大幅に上がる。たとえば、下の例では、このページの左上に表示されている窓の杜のロゴにある<a>タグのリンク先（http://www.forest.impress.co.jp/）をYahoo!のURL（http://www.yahoo.co.jp/）に書き換えている。これによって窓の杜のロゴをクリックすると、Yahoo!に遷移させることができる。

最初に現れる<a>タグのリンク先を書き換え

　説明のわかりやすさからリンクの差し替えで説明したが、JavaScriptの変数やオブジェクトの値を動的に書き換えたり、ページ内のタグを書き換えたりとさまざまな操作が可能になっている。これを知っているだけでデバッグ効率は大幅に向上するはずだ。

“デバッガー”

　“デバッガー”も以前から存在していたが、IE11では機能が強化されたのに加えレイアウトが改善されて、より使いやすくなっている。

IE10のF12開発者ツール。1ファイルしか扱えない

IE10のF12開発者ツール。複数のファイルをタブで扱える

　左ペインがコード表示部分で、IE10では1ファイルしか表示できなかったが、IE11ではタブで複数のファイルが表示できるようになっている。また、追加情報を表示する右ペインが1ペイン構成から上下に分割の2ペイン構成に変更されたため、タブを切り替えずにデバッグすることが可能になった。特に大きいのが、ローカルとウォッチ式が一緒に表示されるようになったこと。同時に見比べることができるため、デバッグが非常に楽になっている。

　また、デバッグ実行時に変数にカーソルを当てるとその時点の変数の値を表示することができる。これもIE10からあった機能だが、IE11ではより見やすくなっている。

デバッグ実行時に変数にカーソルを当てる

　もうひとつ開発者にとって重要な機能は、“整形出力の有効化”だろう。最近のJavaScriptはファイルサイズを縮小するためにミニファイ（余分な空白や改行を取り除くこと）されていることが多く、そのままでは読みにくい。しかし、この機能を使うことで可読性が大幅に改善される。ツールバーにある［整形出力の有効化］ボタンを押すと、表示中のJavaScriptコードが整形されて表示される。

ミニファイされたJavaScript

“整形出力の有効化”で整形したJavaScript

“ネットワーク”

“ネットワーク”機能

　“ネットワーク”機能も以前からある機能のひとつだ。［ネットワーク トラフィックのキャプチャを有効にする］ボタン（ツールバーの三角形のボタン）をクリックすると、その後の通信をキャプチャしてくれる。

　ページを表示するまでに発生した通信とそれにかかった時間が一覧で表示される。さらに、リストの行をダブルクリックするか［詳細］タブに切り替えることで通信内容の詳細を確認できる。

　［要求ヘッダ］タブおよび［要求本文］タブで要求（リクエスト）の詳細を、［応答ヘッダ］タブおよび［応答本文］タブで応答（レスポンス）の詳細を確認できる。［Cookie］タブではサイトから返されたCookieを確認できる。［イニシエーター］タブでは、要求の起点になったイベントを確認できる。［タイミング］タブでは、要求から応答、描画が完了するまでの詳細な時間を確認することができる。またグラフには、要求を出してから応答が開始されるまで、そして応答がすべて返るまでを視覚的に確認することができるため、通信のどこがパフォーマンスに影響しているのかを切り替える役に立つだろう。

［要求ヘッダ］タブ

［タイミング］タブ

　このようにページが表示されるまでにかかった通信の詳細を確認することができるため、Web開発者がもっとも多く使う機能のひとつになるだろう。

“UIの応答”（New）

UIのレスポンスに影響を与える可能性のあるバックグラウンド処理を調査できる“UIの応答”

　“UIの応答”は、UIのレスポンスに影響を与える可能性のあるバックグラウンド処理を調べることで、パフォーマンスの問題点を見つけ出すために役に立つ機能である。

　この機能も他の機能と同様に三角ボタンをクリックして開始から、四角ボタンで停止するまでの間、データを収集する。

ユーザーが指定したイベントが“▼”で示される

　ルーラーには、イベントが記録されている。“▼”は、ユーザーが指定したイベントだ。パフォーマンスを確認したいポイントでJavaScriptの“performance.mark(markName);”を呼び出すことで、“markName（文字列変数）”としてタイミングが記録される。

処理時点でのCPU使用率とその詳細がグラフで表示

　CPU使用率は、処理時点でのCPU使用率とその詳細がグラフで表示されている。視覚スループットは、秒ごとのフレームレートをグラフ化したものだ。

グラフをさらに掘り下げた詳細情報

　タイムラインの詳細には、グラフをさらに掘り下げた詳細情報が表示される。ただし、全体を表示すると情報量が多すぎるので、確認したい範囲を選択してに絞り込むとよいだろう。イベントを選択すると、処理にかかった時間、理由などより詳しい情報を確認することができる。また、ツリーを展開すると要素ごとにかかった時間まで確認することができる。

　これまでは描画が遅いと感じても、経験をもとに原因を想像するしかなかったが、この機能を使うことで、ブラウザー内部でなにが起きているのかを具体的に特定し、迅速に対処できる。

“プロファイラー”

　“プロファイラー”は、JavaScriptのfunctionごとに呼び出し回数と処理時間を一覧表示してくれる。処理時間が長いもの、呼び出し回数が多いものを探して、パフォーマンスチューニングする役に立つだろう。

　“プロファイラー”には、“機能”と“呼び出しツリー”の2つのビューが提供されている。“機能”ビューはfunctionごとに呼び出し回数、処理時間を表示することができる。“呼び出しツリー”ビューは、ルートからの階層で呼び出し回数、処理時間を表示することができる。包括時間は、function単体とその内部で呼び出されているfunctionを含めた処理時間で、排他時間は名前からはわかりにくいが、functionの中から呼び出している子functionの時間を含めない単体の処理時間だ。

“機能”ビュー

“呼び出しツリー”ビュー

function名をダブルクリックすると、“デバッガー”に表示が切り替わる

　また、function名をダブルクリックすると、“デバッガー”に表示が切り替わり、functionのソースを閲覧できる。

　このようにJavaScriptのパフォーマンスに問題がある場合、問題がある箇所を特定するために使用することができる。この機能はIE10にも存在していたが、以前よりもユーザーインターフェイスが整理されていて、より使いやすくなっている。

“メモリ”

　“メモリ”を使うと、メモリのスナップショットをとって、メモリの使用量が多いオブジェクトを特定することができる。

　ページを開くと、画面中央に［プロファイリングを開始してパフォーマンスセッションを開始します］というリンクが表示される。これをクリックすると現在のメモリ量がグラフで表示される。

メモリのスナップショットをとって、メモリの使用量が多いオブジェクトを特定する“メモリ”

［プロファイリングを開始してパフォーマンスセッションを開始します］というリンクをクリックしてモニタリングを開始

　［ヒープ スナップショットを作成します］ボタンをクリックするとその時点のメモリ詳細のスナップショットが記録される。

スナップショットを複数とって、互いに比較

　複数回スナップショットを撮ると、前回のスナップショットからの増分が表示されていることがわかる。これによってメモリ増加前後でなにが変化しているのかを調査できる。

　メモリ使用量、またはオブジェクト数のリンクをクリックすることで、その時点のメモリ使用量の詳細を確認できる。

“ドミネーター”ビュー

　“ドミネーター”は、どこからも参照されていないオブジェクトの一覧である。上の図ではインフォメーションアイコンが表示されているが、ここにフォーカスを当てると、詳細を確認できる。

“種類”ビュー

　“種類”ビューでは、オブジェクトの種類ごとのサイズとカウントを確認できる。ここでは、配列が巨大になりすぎていないか、文字列結合のしすぎで巨大なStringを作成していないかなどを確認できる。ルートビューは、主要なルートオブジェクトとその子オブジェクトを確認することができる。

追加オプション［ビルトインを表示します］および［オブジェクトIDを表示します］

　また、追加オプションとして、［ビルトインを表示します］と［オブジェクトIDを表示します］が準備されている。それぞれ、ブラウザーが作成したオブジェクトのメモリ使用量の表示とオブジェクトのIDを表示するオプションだ。通常はここからなにかをすることはないため、デフォルトではオフに設定されている。

　これらのビューを使用してメモリの使用量が大きくなりすぎたオブジェクトを特定して、Webアプリなどの設計を改善していくとよいだろう。

“エミュレーション”

　“エミュレーション”は、IE以外のブラウザーでの表示を確認したり、GPSの位置情報を変更したりして、Webアプリなどの動作を確認することができる。

IE10までは“ブラウザーモード”および“ドキュメントモード”が指定できた

　IE10までは、「F12開発者ツール」でブラウザーモード、ドキュメントモードで以前のバージョンを指定することができた。ブラウザーモードは、ユーザーエージェント文字列の切り替え、ドキュメントモードは、描画エンジンの切り替えができ、古いブラウザーでの表示を確認することができていた。

　IE11ではこの複雑なマトリックスを排除して、ネイティブモードであるエッジモードのみが選べるようになっている。そのため、設定の変更をユーザーに行わせるのではなく、タグでX-UA-Compatible(http://msdn.microsoft.com/en-us/library/ie/ms533876(v=vs.85).aspx)を設定して、開発者が指定する必要がある。

　それでは、ユーザーエージェント文字列の切り替えを確認してみよう。

　ユーザーエージェント文字列にはあらかじめIE9以前、「Google Chrome」、「Firefox」などが準備されているが、それ以外にもカスタムを選択して、好みのユーザーエージェント文字列を指定することができる。たとえば、iPhoneのユーザーエージェント文字列を指定してYahoo!を表示してみよう。

初期状態

カスタムユーザーエージェント文字列としてiPhoneのものを指定

　このようにユーザーエージェント文字列でブラウザーを判定しているサイトで、表示が変更されていることを確認することができる。

　もうひとつGPSシミュレートを使ってみよう。GPSシミュレートを有効にして、緯度・経度を設定すると、位置情報の問い合わせがあったときにこの緯度・経度を返すという機能だ。

　これを有効に設定して、“Bing Map”で現在位置に移動してみると、ワシントン大学近くの道路が表示されることがわかる。

GPSシミュレートを無効化

GPSシミュレートを有効化（緯度・経度を入力しない場合）

　この機能を使うことで、実際に移動することなく位置情報を使ったWebアプリなどの動作確認が簡単に行える。

まとめ

　このようにIE11では、「F12 開発者ツール」が大幅に拡張されており、デバッグやパフォーマンスチューニングがしやすくなっている。これまで「Google Chrome」と組み合わせて確認していたこともIEだけで確認できる場合が多いことが理解できるだろう。これまでの開発ツールでは調べようがなかった描画エンジンの処理やメモリ使用量の詳細を確認することができたり、UIが変わることによってこれまで見つけにくかった機能が使いやすくなっていたりと、より使いやすいツールに生まれ変わっている。

　これまで「F12 開発者ツール」を使いこなしていた人にとっては覚え直しになってしまうので、不満に思う人もいるかもしれないが、たとえ苦労して覚え直したとしても、その労力に見合う見返りが得られるだろう。