Internet Explorer Developer Channel には、大きいものから小さいものまで、F12 開発者ツールの優れた更新点が多く含まれています。 Internet Explorer 11 を実行している Windows 8.1 ユーザーと Windows 7 SP1 ユーザーがダウンロードを入手できます。ぜひ以下で説明する機能を試して、 Microsoft Connect からフィードバックをお寄せください。

これまでと異なる点

F12 ツールの全体的なユーザー インターフェイスの新しい点を確認してから、ツールにより更新プログラムを実行します。

• F12 ユーザー インターフェイスの変更点
• コンソール
• DOM Explorer
• デバッガー
• エミュレーション
• UI の応答性
• メモリ

F12 ユーザー インターフェイスの変更点

• 新しいアイコンと通知

  メモリ ツールとプロファイラー ツールのアイコンが変更されました。

  コンソールのエラー、エミュレーション設定の変更、メモリ、プロファイラー、UI の応答性の各ツールの有効なプロファイリング セッションのインジケーターがアイコン バーに表示されるようになりました。以下の図は、コンソール ツールとメモリ ツールのアイコンに表示される、通知を含む新しいアイコンを示しており、2 つのコンソール エラーがあることと、メモリ プロファイリング セッションが現在進行中であることを示しています。

  

• F6 によるツール内のスーパーセット ナビゲーション

  F6 キーを使った移動は、タブ キーを使ってツール内を移動するのに似ていますが、選択可能なすべての項目を移動するのではなく、ツール ウィンドウ内の最もよく使う要素の選択されたセットのみ "タブ移動" します。これは、キーボードを使ってツール内およびツール間を移動するための全体的にクリーンなシステムの一部です。

• キーボードによる最近使ったツール間の前後移動

  ツール ナビゲーション履歴を戻るには CTRL + [ を使い、進むには CTRL + ] を使います。ブラウズするときの戻る矢印と進む矢印に似ています。

• ドキュメント モードへのすばやいアクセス

  ツールを切り替えずにドキュメント モードにアクセスできます。どのツールからもドキュメント モードにアクセスできる新しいドロップダウンを上部に追加しました。

  

コンソールの変更

• Console.timeStamp()

  コンソールまたはコード内から呼び出されると、ブラウザー タブが開かれたミリ秒数をコンソールに出力します。UI の応答性ツールを使ってプロファイリング セッションの実行中に呼び出された場合、セッションのタイムラインに、セッションが開始されてから経過した時間に基づくタイムスタンプ付きでユーザー マークを作成します。

• CTRL+L によるコンソールのすべてのメッセージのクリア

• 正確なオートコンプリート

  コンソールのオートコンプリート機能からインデクサー プロパティが除外されたため、オートコンプリートの候補をよりはっきりと正確に選択できるようになりました。

  コンソールのオートコンプリート一覧に $、$$、$x、$0-$5、$_ が追加され、利便性が向上しました。さらに、コンソールの動作が他のブラウザーと一貫したものになります。

• 古いメッセージ インジケーター

  [ナビゲーション時にエントリをクリア] オプションを無効にすることを選んだ場合、アクティブなページのメッセージと履歴内の以前のページのメッセージを区別しやすくするため、古いコンソール メッセージのアイコンが灰色表示されるようになりました。

  

DOM Explorer の変更点

• [属性] ウィンドウの変更バー

  [スタイル] ウィンドウにあった変更バー (変更されたプロパティ、追加されたプロパティ、削除されたプロパティには異なる色が表示されます) は、[属性] スタイル ウィンドウに表示されるようになりました。

  

デバッガーの変更点

• ソース マップの指定

  デバッガーでドキュメントのタブを右クリックし、ソース マップを指定できます。これにより、ソース マップと、コメントが削除されたソース マップを含むリリース済みコードをいっしょに使うことができます。

  

• ウォッチのオートコンプリート

  ウォッチを追加するときに、オートコンプリート オプションの候補が表示されるようになりました。

  

• 戻り値の検査

  戻り値を持つ関数を中断するとき、右中かっこにステップ インするまで関数にステップ インします。戻り値は、[ウォッチ] ウィンドウの [ローカル] 部分に表示されます。もう一度ステップ インすると、呼び出し元のコードに値が戻されます。

  簡単なデモを行うには、コンソールで次のコードを実行してください。

  function showval() { var x = 0; x++; debugger; return x; } showval();

  関数が呼び出されて debugger が中断されるため、ステップ インして戻り値を確認できます。

• ブレークポイントの複数選択

  Ctrl + クリック、Shift + クリック、Ctrl + A キーを使うと、[ブレークポイント] ウィンドウで複数のブレークポイントを選ぶことができます。

• 中断の続行と無視

  F5 キーを押すと、次の中断まで続けることができます。F5 キーを押したままにすると、F5 キーを離すまで過去の複数の中断を続けることができます。

• イベントのブレークポイントとトレースポイント

  これらは、F12 ツールに既に存在するブレークポイントやトレース ポイントと同じように機能しますが、特定のコード ブロックが実行されたときにトリガーされるのではなく、特定のイベントが発生したときにトリガーされます。検査するイベントの特定のインスタンスへのスコープを絞り込むことができるように、それぞれにオプションの条件付きフィルターが用意されています。これらは、次の図で強調表示されたイベント トレース ポイントを追加するアイコンとイベント ブレークポイントを追加するアイコンを使って追加できます。

  

UI の応答性ツールの変更点

• パフォーマンス セッションのインポート/エクスポート

  テスト ケースで生成されたデータを分析したり、同僚とそのデータを共有したりするたびに、テスト ケースを再現する必要はありません。UI の応答性ツールのアイコン バーにあるインポート (フォルダー) アイコンとエクスポート (ディスク) アイコンを使うと、後でインポートできるようにメモリのスナップショットをファイルに保存できます。

• イメージのプレビュー

  イメージの HTTP 要求が表示されたが、どのイメージかわからない場合のために、イメージがイベントの詳細にプレビュー表示されるようになりました。

  

• イベントのフィルター処理

  [表示するイベント] ボタンは小さいですが強力です。このボタンの背後に隠れているのは、イベントを複数の方法でフィルター処理できるメニューであり、それぞれの方法が大きな影響力を持っています。

  • イベント名フィルター

    フィルター テキストに一致する内容を含むイベント名をフィルター処理します。

  • UI アクティビティ フィルター

    チェック ボックスを使って、イベントの大きいカテゴリを除外することで、調査する領域に集中しやすくすることができます。たとえば、ネットワーク アクティビティにのみ関心がある場合、UI とガベージ コレクションのノイズをフィルターで除外できます。

  • 時間しきい値フィルター

    この機能では、所要時間が 1 ミリ秒未満の最上位レベルのイベントをフィルターで除外します。多くのシナリオでは、イベントが大量に表示されたビューがこれにより大幅に簡略化されるため、より影響の大きいイベントに集中できます。

  

• HTML5 スクリプト イベント

  メディア クエリ リスナーまたは MutationObservers を使う場合、パフォーマンス プロファイリング セッションを実行する際の対応するコストを識別できるようになりました。

  

• フレームのグループ化

  [並べ替え] ドロップダウンと [表示するイベント] メニューの間のボタンを使うと、フレームのグループ化が切り替わります。これにより、最上位レベルのイベントが、アニメーション/表示の更新が発生していた期間の対応する作業単位 (つまり "フレーム") にグループ化されます。フレームは、その他のイベントと同様に扱われるため、並べ替えやフィルター処理を行うことができ、[包括時間の概要] を生成します。

  

• ユーザー測定

  performance.mark() API を使って、特定のイベントが発生したことを示す三角形をタイムラインに追加する場合、performance.measure() API はパフォーマンス マークの有用性を拡張します。performance.measure() を使って、2 つの performance.mark() イベント間の時間を包含するユーザー測定イベントを作成し、イベントを右クリックしてから、[イベントのフィルター] オプションを使って 2 つのマーク間のイベントのみ選びます。

  

• DOM の色付け

  この機能は、DOM 要素、文字列リテラル、数値リテラルに色付けを行います。各種 F12 ツール内のコンテンツの外観と動作を似せるだけでなく、UI の応答性ツールの視覚的な魅力も少し高めます。

• 選択の概要

  タイムラインの一部を選ぶと、イベント詳細ウィンドウに選択の概要が表示されます。円グラフの各種セグメントの上にマウスを置くと、セグメントのイベント カテゴリのヒントが表示されます。

  

• console.timeStamp() のサポート

  プロファイリング セッション中にコードやコンソールで console.timeStamp() メソッドを使うと、プロファイリング セッションが開始してからの時間のマークがタイムライン上に作成されます。

メモリ ツールの変更点

• ドミネーターの折りたたみ

  ドミネーターの折りたたみは、論理的には別のオブジェクトのコンポーネントとなっている (<DIV> 内の <BR>、関数により保持されたスコープなど) が、必要以上に詳しくすぎるためにデータの理解に役立たず、時間を浪費するだけのオブジェクトを最上位レベルのビューから削除することで、スナップショットのコンテンツを簡素化するのに役立ちます。

  たとえば、以下の図は、ドミネーターの折りたたみによりツールが述べている "ストーリー" がどのように改善されるかを示す、使用前のビューと使用後のビューです。折りたたみビューには 30 個の HTML <DIV> 要素が表示されています。これらの要素は、15.64 MB のメモリを占有しており、デタッチされた DOM ノードを保持しています。多くの場合、オブジェクトの構成を知ることは重要ではなく、大きすぎることや、リークしていること (特に、サード パーティ ライブラリを使っている場合) がわかっていれば十分です。

  

• DOM、文字列リテラル、数値リテラルの色付け

  この機能は、DOM 要素、文字列リテラル、数値リテラルに色付けを行います。各種 F12 ツール内のコンテンツの外観と動作を似せるだけでなく、メモリ分析の視覚的な魅力も少し高めます。

• ルート サイクルのフィルター処理

  循環参照パス内の位置を知らないうちに見失うことなく、オブジェクトの構成を調査することができます。この機能は、循環しているため自身を "トリミング" している子参照を検出するため、それらを無限大に走査して混乱することがありません。さらに、それらの参照に注釈を付けるため、参照が実際に "トリミング" されている場合は明らかになります。

• セッションのインポートとエクスポート

  テスト ケースで生成されたデータを分析したり、同僚とそのデータを共有したりするたびに、テスト ケースを再現する必要はありません。メモリ ツールのアイコン バーにあるインポート (フォルダー) アイコンとエクスポート (ディスク) アイコンを使うと、後でインポートできるようにメモリのスナップショットをファイルに保存できます。

  

エミュレーション ツールの変更点

• 設定の永続化とリセット

  エミュレーション ツールにエミュレーション設定の保持アイコンが追加されます。この機能により、現在のエミュレーション設定が明確に無効化されるまで保持されるため、作業後にブラウザーを閉じても、そのままのエミュレーション設定で戻ることができます。右側にあるのはエミュレーション設定のリセット アイコンで、ツールをすぐに既定値にリセットすることができます。

  

関連トピック

Windows 8.1 向け Internet Explorer Developer Channel のダウンロード

Windows 7 SP1 向け Internet Explorer Developer Channel のダウンロード