F12 開発者ツールの使用

このコンテンツでは、以前のバージョンの F12 開発者ツールを取り上げています。F12 ツールに関する最新のドキュメントをご覧ください。

F12 ツールを使うと、Web ページのデバッグ、テスト、高速化を実行できます。CSS レイアウトを微調整する場合やメモリ リークを探す場合、ここで説明するツールが役立ちます。

Internet Explorer 11 で [ツール] メニューやツール バーを探す場合は、次を試してみてください。
エラー メッセージをクリックしてこのページに移動してきた場合、今後エラー メッセージが表示されないようにするには、次を試してみてください。

F12 ツールでの作業

IE11 の F12 ツールが大幅に進化しました。開発とデバッグをより早く、より簡単に実行するための新しい UI と新しい機能を備えています。さらに、更新プログラムによって他にも機能強化を展開する予定です。

ツールを開くには、キーボードの F12 キーを押します。キーボードにファンクション キーがない場合は、[ツール] メニューを使うことができます。

8 種類のツールがあります。F12 ツールのインターフェイスでは、各ツールは独自のタブで示されます。各ツールの画像を次に示します。また、ツールの機能や新機能を簡単にまとめた説明や、ツールによって簡単に実行できる一般的な開発タスクやデバッグ タスクの例についても示します。

DOM Explorer ツール (Ctrl + 数字 1)

F12 開発者ツールの DOM Explorer を選択

DOM Explorer ツールには、ブラウザーでレンダリングされる状況に従って Web ページの構造が表示されます。また、実際のページにある HTML とスタイルを編集することもできます。この編集では、ソースを編集してもう一度読み込む必要はありません。このため、表示に関する問題の解決や新しいアイデアのテストを簡単に実行できます。

新機能(DOM Explorer ツール):

  • HTML 属性や CSS プロパティを編集するときに、Intellisense のオート コンプリートの候補が表示されます。
  • DOM ノードを並べ替えるには、目的のノードをドラッグします。

簡単になる開発タスクとデバッグ タスク:

  • 要素が正しい場所や正しいサイズで表示されない原因を特定できます。
  • 要素に適用される CSS スタイルとメディア クエリを判断できます。
  • 要素を最適に表示するためにさまざまな色をテストできます。

新機能(Windows 8.1 Update 1 の DOM Explorer ツール):

  • 擬似クラスのトグルを使うと、ボックスをオンにするだけでスタイルがホバー モードと訪問済みモードで表示されます。
  • [トレース] ウィンドウと [属性] ウィンドウが結合され、DOM Explorer を使ってスタイルに加えた変更を追跡する新しい [変更] ウィンドウのスペースが確保されました。

新機能(Internet Explorer の累積的なセキュリティ更新プログラム (KB2976627) の DOM Explorer ツール):

  • [属性] ウィンドウに "変更バー" (スタイルが変更されたことを示す視覚的なインジケーター) が表示されます。
  • 新しいカラー ピッカー ツールでは、スポイト、スライダー、または選んだプリセットを使って色を簡単に選ぶことができます。

DOM Explorer ツールの詳細

コンソール ツール (Ctrl + 2)

F12 開発者ツールの JavaScript コンソールを選択

コンソール ツールでは、実行中のコードの操作、コンソールのコマンド ラインを使った情報の送信、コンソール デバッグ API を使った情報の取得を行うことができます。コンソール ツールは、開発者にとって非常に役立つツールであり、簡単に利用することができます。UI の右上、ヘルプ ボタンの横にあるコンソール ボタンまたは Ctrl + アポストロフィ (`) キーを使うと、他のツールの下部にコンソール ツールを開くことができます。

新機能(コンソール ツール):

  • コンソール ボタンまたは Ctrl + アポストロフィ (`) キーを使って、他の任意のツールの下部にコンソールを開くことができます。
  • タイミング、カウント、グループ化などで使うことができる、新しいコンソール デバッグ API メソッド。
  • コマンド ラインで Intellisense のオート コンプリートの候補を利用すると、すばやく入力したり、入力間違いを減らすことができます。また、JavaScript API のさまざまな要素を検出する場合にも役立ちます。

簡単になる開発タスクとデバッグ タスク:

  • システム エラー メッセージ、例外の警告、デバッグ出力を表示できます。
  • 新しいタイミング指定方法を使ったステートメントまでタイミング コードを実行できます。
  • 再読み込みせずに実行中のコードの変数の値を変更できます。

新機能(Windows 8.1 Update 1 のコンソール ツール):

  • [ターゲット] ドロップダウン メニューでは、ドキュメント内の特定の iFrame にコンソール コマンドが適用されます。
  • [ナビゲーション時にエントリをクリア] トグルを使うと、新しいページに移動した後、コンソール メッセージを維持するか削除するかを制御できます。
  • [開発者用コンソール メッセージを常に記録する] オプションは、出力のキャプチャを開始するためにコンソールを開く必要がないことを意味します。

新機能(Internet Explorer の累積的なセキュリティ更新プログラム (KB2976627) のコンソール ツール):

  • console.timeStamp() コマンドは、現在のブラウザー タブを開いてからのミリ秒数を表示します。または、UI の応答性のプロファイリング セッションで使って、セッション タイムラインにタイム スタンプを作成することができます。
  • [ナビゲーション時にエントリをクリア] がオフのときに古いメッセージを区別すると、前のページのコンソール メッセージのアイコンが灰色で表示され、最新のメッセージだけを特定しやすくなります。
  • IntelliSense のオートコンプリートが強化され、候補を見つけにくい原因となっていたインデクサー プロパティが取り除かれました。
  • Ctrl キーを押しながら L キーを押すとコンソールが消去されるようになりました。

コンソール ツールの詳細

デバッガー ツール (Ctrl + 3)

F12 開発者ツールのデバッガー ツールを選択

デバッガー ツールを使って、コードの実行内容、実行タイミング、実行方法を調べることができます。実行の途中でコードを一時停止したり、コード行を 1 行ずつ実行したりすることができます。また、各ステップでの変数やオブジェクトの状態を確認することもできます。

新機能(デバッガー ツール):

  • 更新不要なデバッグ。ブレークポイントを設定できます。デバッグの実行時には、再読み込みを行う必要がなく、状態を失うこともありません。
  • 複数のスクリプトの管理を容易に実行できるタブ付きドキュメント インターフェイス。
  • ブレークポイントおよび一致する検索結果を強調表示するスクロール バー。

簡単になる開発タスクとデバッグ タスク:

  • コール スタックを使って関数の呼び出し元を確認できます。
  • 圧縮されたコードまたは縮小されたコードを読みやすくできます。
  • Web ワーカーでの作成や実行を監視できます。

新機能(Windows 8.1 Update 1 のデバッガー ツール):

  • ソース マップのサポートにより、圧縮されたコード内のエラーを読みやすいソース ファイルでトレースできるようになりました。
  • [マイ コードのみ] を使うと、第三者のライブラリをデバッグ タスクから除外できるため、コードをデバッグするときに他の人のハンドルされない例外を調べてしまうことがなくなります。
  • ブレークポイントと開いているファイルがセッション間で維持されるため、セッションを終了してもすべての情報を失うことがなく戻ることができます。

新機能(Internet Explorer の累積的なセキュリティ更新プログラム (KB2976627) のデバッガー ツール):

  • ソース マップを選ぶと、ファイルのソース マップが内部で指定されていない場合に指定できます。
  • ブレークポイントトレース ポイントをイベントにアタッチすることができます。
  • 非同期呼び出しスタックにより、応答ハンドラーで中断したときに関連する呼び出しスタックを表示して、非同期呼び出しを簡単にデバッグできます。

デバッガー ツールの詳細

ネットワーク ツール (Ctrl + 4)

F12 開発者ツールのネットワーク ツールを選択

ネットワーク ツールを使うと、Web ページの読み込みや操作に関連するネットワーク要求の詳細を確認できます。

新機能(ネットワーク ツール):

  • 要求の時間情報が向上しています。
  • 圧縮情報の取得機能が強化されています。

簡単になる開発タスクとデバッグ タスク:

  • ページがリソース全体で使っている帯域幅の量を表示できます。
  • 要求と応答のヘッダーや本文を表示することによって、AJAX 要求をデバッグできます。
  • Web ページの読み込みが遅くなっているネットワーク要求を識別できます。

ネットワーク ツールの詳細

UI 応答性ツール (Ctrl + 5)

F12 開発者ツールの UI 応答性ツールを選択

+

UI 応答性ツールを使うと、ページの処理が低速になった場合に何が起きているかを調べることができます。このツールを使って、ページの処理速度が低下している特定の時点をプロファイリングします。この時点によって、速度低下の原因となる操作が示されます。

UI 応答性ツールは、IE11 での F12 ツールの新機能です。重要な機能の一部を次に示します。

  • UI の処理速度を低下させた、CPU 活動に関するさまざまな原因を特定できます。
  • Web ページのフレーム レートに関する情報を取得できます。
  • タイムラインにラベルを設定して、ユーザー シナリオを分離できます。

簡単になる開発タスクとデバッグ タスク:

  • テスト コードの最適化。
  • Web ページの高速化。

新機能(Windows 8.1 Update 1 の UI の応答性ツール):

  • イベントの種類のフィルターにより、最も重要なイベントの種類に集中できます。
  • [イベントのフィルター] では、包括時間内のイベントと項目だけにドリルダウンすることができます。
  • JavaScript によって開始された DOM の更新が、スクリプト イベントの子として一覧表示されるようになりました。

新機能(Internet Explorer の累積的なセキュリティ更新プログラム (KB2976627) の UI の応答性ツール):

  • プロファイリング セッションを保存し、後で読み込んで分析することができます。
  • イメージの HTTP 要求を行うと、イメージのプレビューが詳細ウィンドウに表示されます。
  • UI アクティビティ フィルターを使うと、UI 関連のイベントに集中したり、フィルター処理したりすることができます。
  • 項目のフィルター処理にかかる時間は 1 ミリ秒未満であり、プロファイル レポートが整理されます。

UI 応答性ツールの詳細

プロファイラー ツール (Ctrl + 6)

F12 開発者ツールのプロファイラー ツールを選択

プロファイラー ツールは、純粋な JavaScript の速度を測定するツールで、プロファイリング セッションの実行中に呼び出された関数、これらの関数が呼び出された回数、これらの関数が完了するまでにかかった時間が示されます。

新機能(プロファイラー ツール):

  • Web ワーカーで実行された関数の追跡。
  • 整理された、応答性の高い UI。

簡単になる開発タスクとデバッグ タスク:

  • コードの最も低速な部分の分離。
  • テスト コードの最適化。
  • Web ページの高速化。

プロファイラー ツールの詳細

メモリ ツール (Ctrl + 7)

F12 開発者ツールのメモリ ツールを選択

Web ページを開始したときは高速で、しばらく使った後で速度が低下した場合、通常、原因となるのはメモリ リークです。メモリ ツールでは、Web ページによるメモリの使用状況を追跡します。これにより、メモリ使用量が多くなっている場所、メモリ使用量が多くなっている理由、その修正方法を確認できます。

メモリ ツールは、IE11 での F12 ツールの新機能です。重要な機能の一部を次に示します。

  • メモリ使用量の連続的な変化を表示するタイムライン。
  • 特定の時点におけるメモリ使用量の詳細を調べるためのスナップショット。
  • メモリ使用量が多くなっている特定の時点を示すスナップショット比較。

簡単になる開発タスクとデバッグ タスク:

  • デタッチされた DOM ノードの識別。
  • メモリ使用量が多くなっている時点の識別。
  • オブジェクトのメモリ使用量の測定。

新機能(Windows 8.1 Update 1 のメモリ ツール):

  • 関数に関連するオブジェクトは、デバッガー ツールに関連付けられます。クリックすると、関連するスクリプトがデバッガー ツールで開き、スクリプト ウィンドウがその関数までスクロールされます。
  • さまざまな視点を示すため、スナップショット比較に [スコープ] メニューが追加されました。
  • ECMAScript 6 の SetMapWeakMap の各コンテナーがサポートされるようになりました。

新機能(Internet Explorer の累積的なセキュリティ更新プログラム (KB2976627) のメモリ ツール):

  • メモリ プロファイリング セッションを保存し、後で読み込んで分析することができます。
  • ドミネーターの折りたたみを行うと、親項目の下に表示される関連項目が減るため、重要なメモリの問題が目立つようになります。
  • 循環参照が認識しやすくなり、適切に処理できるため、無限ループを移動することがありません。

メモリ ツールの詳細

エミュレーション ツール (Ctrl + 8)

F12 開発者ツールのエミュレーション ツールを選択

エミュレーション ツールを使うと、さまざまな画面サイズやハードウェアの機能に対して Web ページがどのように動作するか、また、さまざまなユーザー エージェント文字列に Web ページがどのように応答するかをテストすることができます。

エミュレーション ツールは、IE11 での F12 ツールの新機能です。重要な機能の一部を次に示します。

  • さまざまな画面サイズや解像度をエミュレートできます。
  • GPS シミュレーション。

簡単になる開発タスクとデバッグ タスク:

  • 複数の画面の種類を対象としたレスポンシブ デザインのテスト。
  • モバイル サイトでの位置情報認識機能のテスト。

新機能(Windows 8.1 Update 1 のエミュレーション ツール):

  • サイト間だけでなくウィンドウ間でもエミュレーション設定を維持できるトグルがあります。
  • ドキュメント モードの理由に、IE が別のモードでエミュレートしている理由が示されます。
  • エンタープライズ モードがサポートされします。

新機能(Internet Explorer の累積的なセキュリティ更新プログラム (KB2976627) のエミュレーション ツール):

  • すべてのツールの上部にある [ドキュメント モード] ドロップダウンから、最もよく使われるエミュレーション機能にすばやくアクセスできます。

エミュレーション ツールの詳細

関連トピック

Microsoft Edge のブラウザー ポータルで、現在の F12 開発者ツールのドキュメントを探す
IE11: F12 開発者ツールの新機能
IE11: kb2976627 の F12 更新プログラム
IE11: 新しいコンソール API メソッド
Internet Explorer 10 の F12 開発者ツール
IE11 の F12 開発者ツールのキーボード ショートカット

 

 

表示: