Internet Explorer 11 の F12 開発者ツールの機能強化

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

新しいアイコンと通知メモリおよびプロファイラー ツールのアイコンが変更されました。

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

ツール内の F6 スーパーセット ナビゲーション F6 は、Tab キーを使用してツール内を移動するのと同じですが、選択できるすべての項目ではなく、ツール ウィンドウで最も一般的に使用される要素の選択されたセットを "タブ" します。 これは、キーボードを使用してツール内とツール間を移動するための全体的なクリーナー システムの一部です。

キーボードを使用して最近使用したツール間を行き来する Ctrl + [ を使用してツールナビゲーション履歴を後方に移動し、Ctrl + ] を使用して前方に移動できます。これは、参照時の背面矢印と前方矢印と同様です。

ドキュメント モードへのクイック アクセスインターフェイスの上部に新しいドロップダウン リストが追加され、ツールからドキュメント モードにアクセスできるため、ツールを切り替える必要はありません。

コンソールの変更

Console.timeStamp()コンソールまたはコード内から呼び出されると、Console.timeStamp() は、現在のブラウザー タブが開いているミリ秒数をコンソールに出力します。 UI 応答性ツールを使用してプロファイル セッションを実行しているときに呼び出された場合、セッションの開始後の時間に基づいて、セッションのタイムラインにユーザー マークとタイム スタンプが作成されます。

Ctrl + L キーを押して、すべてのメッセージのコンソールをクリアします

正確なオートコンプリートコンソールのオートコンプリートにインデクサー プロパティが含まれるようになりました。 これにより、オートコンプリート候補がよりクリーンで正確に選択されます。

$、$$、$x、$0-$5、および $_ は、コンソールのオートコンプリート リストに追加されており、コンソールの動作を他のブラウザーと一致させるために追加されています。

古いメッセージ インジケーター [移動時にクリア] オプションをオフにした場合、古いコンソール メッセージのアイコンが灰色表示され、アクティブなページのメッセージと履歴内の以前のページとのメッセージを区別するのに役立ちます。

DOM エクスプローラーの変更

計算ウィンドウの変更バーユーザーが [スタイル] ウィンドウを楽しんだ変更バー (変更されたプロパティ、追加されたプロパティ、削除されたプロパティの異なる色) が [計算されたスタイル] ウィンドウに表示されるようになりました。

デバッガーの変更

ソース マップの指定デバッガーでドキュメントのタブを右クリックすると、ソース マップを指定できます。 これにより、ソース マップコメントが削除された出荷コードと共にソース マップを使用できます。

WatchesNow のオートコンプリートでは、ウォッチを追加するときにオートコンプリート オプションが推奨されます。

戻り値の検査戻り値を持つ関数を中断する場合は、右中かっこにステップインするまで関数にステップインします。 戻り値は、[ウォッチ] ウィンドウの [ローカル] セクションに表示されます。 もう一度ステップすると、その値が呼び出されたコードに返されます。

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

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

関数が呼び出され、デバッガーで中断され、戻り値を確認するためにステップインできます。

ブレークポイントの複数選択Ctrl + クリック、Shift + クリック、Ctrl + A を使用して、[ブレークポイント] ウィンドウで複数のブレークポイントを選択できます。

中断を続行して無視する次の区切りを続行するには、F5 キーを押します。 F5 キーを押しながら、F5 を離すまで複数の休憩を繰り続けます。

イベント ブレークポイントと tracepointsこれらの機能は、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() メソッドを使用すると、プロファイル セッションが開始されてからの時間を持つユーザー マークがタイムラインに作成されます。

メモリ ツールの変更

ドミネーター フォールディングDominator フォールディングは、別のオブジェクトの論理的なコンポーネントである最上位のビュー (たとえば、<DIV>内の<BR>、関数によって保持されるスコープ) からオブジェクトを削除することで、スナップショットの内容を簡略化するのに役立ち、データに対する分析情報を改善しない余分な詳細になる傾向があります。 しかし、あなたの時間を無駄にする可能性があります。 

たとえば、次の画像はビューの前後を示しており、ドミネーター フォールディングによってツールが伝えている "ストーリー" がどのように向上するかを示しています。 折りたたまれたビューは、15.64 メガバイト (MB) のメモリを占め、デタッチされた DOM ノードを保持している 30 個の HTML <DIV>要素を示しています。 多くの場合、オブジェクトの構成を知ることは重要ではなく、単にオブジェクトが大きすぎたり、漏洩している (特にサードパーティ製のライブラリを使用する場合) ことを知るのと同じくらい重要です。

DOM、String & Number リテラルの色付けこの機能は、DOM 要素、文字列リテラル、および数値リテラルに色付けを追加します。 さまざまな F12 ツール内のコンテンツの外観と動作を変える以外に、メモリ分析をより視覚的に興味深いものにします。

ルートサイクルフィルタリング循環参照パスで無意識に失われることなく、オブジェクトの構成を調査できるようにするWant? この機能は、循環している子参照を検出し、無限大に走査することで混乱しないように、それらを "トリミング" します。 さらに、これらの参照に注釈を付け、参照が "トリミング" されたときに明確になります。

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

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

設定の永続化とリセットエミュレーション設定アイコンをエミュレーション ツールに追加します。 これにより、特に無効になるまで、現在のエミュレーション設定が維持されます。 これにより、作業を行い、ブラウザーを閉じ、エミュレーション設定をそのまま使用して戻ることができます。 このアイコンの右側にはエミュレーション設定のリセット アイコンがあり、ツールを既定値にすばやくリセットします。