ツールの一覧について

DevTools には、 既定のツール と その他のツールで構成される 30 を超えるツールが用意されています。

既定のツール

既定では、DevTools の上部にある アクティビティ バー に次のツールが一覧表示されます。

  • 検査ツール アイコン 検査ツール
  • デバイス エミュレーション アイコン デバイス エミュレーション
  • ようこそアイコン ようこそ
  • 要素アイコン 要素
  • 本体アイコン 本体
  • ソース アイコン ソース
  • ネットワーク アイコンネットワーク
  • パフォーマンス アイコン パフォーマンス
  • メモリ アイコン メモリ
  • アプリケーション アイコン アプリケーション

アクティビティ バーの 2 つのアイコンと 8 つのタブを含む既定のツール

既定のツールの概要

ツール 用途 記事
検査ツール アイコン 検査 検査ツールを使用して、レンダリングされた Web ページ内のアイテムに関する情報を表示します。 検査ツールがアクティブな場合は、Web ページ内のアイテムにカーソルを合わせると、DevTools によって Web ページに情報オーバーレイとグリッド強調表示が追加されます。 [検査] ツールを使用してページを分析する
デバイス エミュレーション アイコン デバイス エミュレーション デバイス シミュレーション モードまたはデバイス モードとも呼ばれるデバイス エミュレーション ツールを使用して、モバイル デバイスでのページの表示と応答を概算します。 モバイル デバイスをエミュレートする (デバイス エミュレーション)
ようこそアイコン ようこそ DevTools を初めて開くと、 Welcome ツールが開きます。 開発者ドキュメント、最新の機能、リリース ノートへのリンクが表示され、Microsoft Edge DevTools チームに問い合わせるオプションが表示されます。 ウェルカム ツール
要素アイコン 要素 HTML と CSS を検査、編集、デバッグします。 ブラウザーで変更をライブ表示しながら、ツールで編集できます。 DOM ツリーを使用して HTML をデバッグし、Web ページの CSS を検査して作業します。 要素ツールを使用して HTML と CSS を検査、編集、デバッグする
本体アイコン 本体 DevTools 内のインテリジェントでリッチなコマンド ライン。 他のツールと併用するのに最適なコンパニオン ツールです。 JavaScript を使用して、スクリプト機能を書き、現在の Web ページを検査し、現在の Web ページを操作する強力な方法を提供します。 本体の概要
ソース アイコン ソース [ソース] ツールを使用して、フロントエンド JavaScript コードを表示、変更、デバッグし、現在の Web ページを構成する HTML ファイルと CSS ファイルを検査および編集します。 ソース ツールの概要
ネットワーク アイコンネットワーク ネットワーク ツールを使用して、リソースが期待どおりにダウンロードまたはアップロードされていることを確認します。 HTTP ヘッダー、コンテンツ、サイズなど、個々のリソースのプロパティを調べます。 ネットワーク アクティビティの検査
パフォーマンス アイコン パフォーマンス ランタイム パフォーマンスを分析します。これはページが読み込み中ではなく実行中であるときのパフォーマンスです。 ランタイム パフォーマンスの分析 (チュートリアル)
メモリ アイコン メモリ メモリ リーク、メモリ膨張、頻繁なガベージ コレクションなど、ページのパフォーマンスに影響を与えるメモリの問題を見つけます。 メモリの問題を修正する
アプリケーション アイコン アプリケーション アプリケーション ツールを使用して、マニフェスト、サービス ワーカー、ローカル ストレージ、Cookie、キャッシュ ストレージ、バックグラウンド サービスなど、Web アプリ ページのストレージを管理します。 ストレージを管理するためのアプリケーション ツール

要素、コンソール、ソース ツール (タブ) は、アクティビティ バーに永続的です。 他のツール タブは削除するか、 クイック ビュー ツール バーに移動できます。

その他のツール

アクティビティ バーの [その他のツール] ([その他のツール] アイコン) ボタンには、アクティビティ バーに追加できる追加のオプション ツールが一覧表示されます。

DevTools の下部にあるクイック ビュー ツールバーには、[その他のツール] (その他のツール アイコン) ボタンもあります。 クイック ビュー パネルを表示または非表示にするには、Esc キーを押します。または、右上の [DevTools のカスタマイズと制御] をクリックしてから、[クイック ビュー パネルの切り替え] をクリックします。

[その他のツール] メニューのツールの概要

ツール 用途 記事
3D ビュー 3D パースペクティブに翻訳された Web ページを探索します。 DOM または z-index スタック コンテキストを移動して、Web ページをデバッグします。 3D ビュー ツールを使用して、Web ページ レイヤー、z-index、および DOM を移動する
アニメーション アニメーション ツールの [アニメーション検査] を使用して、CSS アニメーション効果を検査および変更します。 CSS アニメーション効果の検査と変更
変更内容 DevTools で CSS または JavaScript に加えた変更を追跡します。 DevTools を使用してサーバーから送信された Web ページ ファイルを変更した後、実際のソース ファイルに加える変更を示します。 [変更] ツールを使用してファイルの変更を追跡する
割合 使用されていない JavaScript および CSS コードを見つけるヘルプで、ページの読み込みを高速化し、モバイル ユーザーの携帯データネットワークを節約します。 カバレッジ ツールを使用して、使用されていない JavaScript コードと CSS コードを検索する
クラッシュ アナライザー Web アプリのクラッシュを分析します。 致命的でない JavaScript 例外などの JavaScript 運用スタック トレースを入力し、ソース マップをスタック トレースに適用して、デバッグを高速化できます。 クラッシュ アナライザー ツール
CSS の概要 ページの CSS をより深く理解し、潜在的な改善点を特定するのに役立ちます。 CSS 概要ツール
開発者向けリソース Web ページのリソース URL を表示します。 開発者リソース ツール
問題 問題ツールは、現在の Web ページを自動的に分析し、種類ごとにグループ化された問題を報告し、問題の説明と解決に役立つドキュメントを提供します。 問題ツールを使用して問題を検索して修正する
Lighthouse Lighthouse ツールを使用して、サイトのパフォーマンス、アクセシビリティ、ユーザー エクスペリエンスに影響を与える一般的な問題を特定して修正します。 ライトハウス ツール
Media このツールを使用して、情報を表示し、ブラウザー タブごとにメディア プレーヤーをデバッグします。 メディア プレーヤー情報を表示およびデバッグする (メディア ツール)
メモリ インスペクター メモリ インスペクターを使用して JavaScript ArrayBuffer を検査します。 メモリ インスペクター ツールを使用して JavaScript ArrayBuffer を検査する
ネットワーク条件 ネットワーク条件ツールを使用して、ブラウザー キャッシュを無効にし、ネットワーク調整を設定し、ユーザー エージェント文字列を設定し、Content-Encodings (deflate、gzip、br など) を設定します。 ネットワーク条件ツール
ネットワーク コンソール ネットワーク コンソール ツールを使用してネットワーク要求 (ネットワーク呼び出し) に変更を加え、失敗する理由を確認します。 ネットワーク要求を変更して再生し、詳細なネットワーク API 呼び出しを行います。 ネットワーク コンソール ツール
ネットワーク要求のブロック ネットワーク要求ブロック ツールを使用して、指定された URL パターンに対するネットワーク要求のブロックをテストし、Web ページの動作を確認します。 ネットワーク要求ブロック ツール
パフォーマンス モニター Web ページの実行時パフォーマンスをリアルタイムで表示し、パフォーマンスの問題の原因を特定し、Web サイトの実行を遅くします。 メモリや CPU の使用率が高い、レイアウトとスタイルの計算が頻繁すぎる、DOM ノードとイベント リスナーが多すぎることが問題の原因かどうかを調べます。 パフォーマンス モニター ツールを使用してページの実行時パフォーマンスを測定する
クイック ソース クイック ソース ツールを使用すると、ソース ツール以外のツールを使用する場合にソース ファイルを表示または編集できます。 クイック ソース ツールを使用してソース ファイルを表示または編集する
Recorder レコーダー ツールを使用してユーザー フローを手動で記録し、自動的に再生してテストとパフォーマンス調査を高速化します。 ユーザー フローを記録して再生し、パフォーマンスを測定します
レンダリング レンダリング ツールを使用して、さまざまな表示オプションや視覚障穣で Web ページがどのように見えるかを確認します。 表示オプションや視覚障穣が異なる Web ページの外観を確認するためのレンダリング ツール
検索 検索ツールを使用して、HTML、CSS、JavaScript、画像ファイルなど、Web ページの特定のソース ファイルを検索します。 検索ツールを使用してページのソース ファイルを検索する
セキュリティ ページのセキュリティを検査します。 セキュリティ ツールを使用してセキュリティの問題を理解する
センサー 位置情報のオーバーライド、デバイスの向きのシミュレート、クリック時のタッチ イベントの強制、デバイスのアイドル状態のエミュレート。 デバイス センサーのエミュレート
ソース マップ モニター ソース マップ モニター ツールを使用して、ソース マップを監視します。 ソース マップ モニター ツール
WebAudio WebAudio トラフィックを監視するには、 WebAudio ツールを使用します。 WebAudio ツールは WebAudio API を使用します。 WebAudio ツール
WebAuthn WebAuthn ツールを使用して、ソフトウェアベースの仮想認証システムを作成して操作します。 オーセンティケーターのエミュレートと WebAuthn のデバッグ

アクティビティ バーとクイック ビュー ツールバーの [その他のツール (+)] メニューは動的で、そのツールバーで開いているタブ ツールは省略されます。

ツールにアクセスするその他の方法

次の機能は、ツールにアクセスする追加の方法です。

  • クイック ビュー パネルは、追加のツール バーと、ツールを保持するための領域であり、アクティビティ バー パネルの下または右にあります。

  • コマンド メニューは、ツールの機能を直接使用する方法です。

  • [ 設定 ] ページでは、ツールの追加機能をオンにすることができます。

実験ツール

DevTools の [設定] > [実験] で実験の [チェック] ボックスを選択した場合、Microsoft Edge DevTools には追加のツールが含まれている可能性があります。 例:

ツール 用途 記事
プロトコル モニター 検査対象ページをデバッグするために、DevTools によって送受信される DevTools プロトコル メッセージを表示します。 実験機能のプロトコル モニター。

アクティビティ バー ツールとクイック ビュー ツール

アクティビティ バー ツール は、既定で アクティビティ バー (上部ウィンドウ) で開くツールです。 クイック ビュー ツールは、既定で クイック ビュー パネル (下部ウィンドウ) で開くツールです。 クイック ビュー パネルを表示または非表示にするには: フォーカスが DevTools にあるときに、Esc キーを押します。

コマンド メニューには、最初にアクティビティ バー ツール (パネル ラベルで示されます) が表示され、次にクイック ビュー ツールが表示されます。

グループ化されたパネル ツールとクイック ビュー ツールを示すコマンド メニュー

ツールを他のツールバーに移動するには、ツールのタブを右クリックし、[ 下のクイック ビューへ移動]、[ クイック ビューの横へ移動]、または [ 一番上へ移動] を選択します。

クイック ビュー ツール バー内のツールの右クリック メニュー ([一番上のアクティビティ バーに移動] コマンドなど)

コマンド メニューを開くには、Ctrl+Shift+P (Windows、Linux) または Command+Shift+P (macOS) を押します。 または、[ DevTools のカスタマイズと制御 ] (カスタマイズ アイコン) ボタンをクリックし、[ コマンドの実行] を選択します。

ツール タブを閉じる

ツール バーにあるツール タブを閉じるには、タブを右クリックし、[ アクティビティ バーから削除 ] または [ クイック ビューから削除] を選択します。

アクティビティ バーのネットワーク ツールの右クリック メニュー ([アクティビティ バーから削除] コマンドを含む)

[要素]、[コンソール]、[ソース] ツールは永続的なタブであり、閉じたり、アクティビティ バーからクイック ビュー パネルに移動したりすることはできません。 タブをドラッグすると、 アクティビティ バーで並べ替えることができます。

コンソール ツールは、クイック ビュー ツールバーの常設タブでもあります。 これに対し、クイック ビュー ツールバーの問題ツールは削除できます。

既定のツール タブの復元

アクティビティ バーとクイック ビューのすべての既定のツール タブを復元するには:

  1. DevTools で、[ DevTools のカスタマイズと制御 ] (DevTools アイコンのカスタマイズと制御)>設定 (設定アイコン) >設定] を選択します。

  2. [ 既定値に戻して更新 ] ボタンをクリックします。 DevTools が再起動し、既定のタブが両方のツール バーに表示されます。

関連項目

  • DevTools の概要 - この記事と同様ですが、より幅広い対象範囲を説明し、DevTools の概要を説明します。
  • 最終更新: