DevTools の概要

Microsoft Edge ブラウザーには、Microsoft Edge DevTools と呼ばれる組み込みの Web 開発ツールが付属しています。 DevTools は、ブラウザーでレンダリングされた Web ページの横に表示される一連の Web 開発ツールです。 DevTools は、Web ページと Web アプリを検査およびデバッグする強力な方法を提供します。 ソース ファイルを編集したり、DevTools 環境内で Web サイト プロジェクトを作成したりすることもできます。

DevTools を使用すると、次の操作を実行できます。

  • ビジュアル インターフェイスを備えたライブ ツールを使用して、Web ページ内の要素のスタイルを検査、調整、および変更します。 ブラウザーにコンテンツが格納されている場所を調べて、Web ページを作成します (例: .html.css.jsファイル .png 形式)。

  • さまざまなデバイスで Web サイトの動作をエミュレートし、さまざまなネットワーク条件を備えたモバイル環境をシミュレートします。 ネットワーク トラフィックを調べて、問題の場所を確認します。

  • ブレークポイント デバッグとライブ コンソールを使用して JavaScript をデバッグします。 Web アプリに関するメモリの問題とレンダリングの問題を見つけます。

  • 製品のアクセシビリティ、パフォーマンス、互換性、セキュリティの問題を見つけ、DevTools を使用して見つかったアクセシビリティの問題を修正します。

  • 開発環境を使用して、DevTools の変更をファイル システムと Web から同期します。

DevTools を開く

Microsoft Edge では、次のいずれかの方法で、マウスまたはキーボードを使用して DevTools を開くことができます。 どのツールを開くかは、DevTools を開く方法によって異なります。

主な方法:

操作 結果のツール
Web ページ上の項目を右クリックし、[ 検査] を選択します。 要素 ツール。 DOM ツリーが展開され、右クリックしたページ要素が表示されます。
Ctrl+Shift+I (Windows/Linux) または Command+Option+I(macOS) を押します。 以前に使用したツール、または ウェルカム ツール。
F12 を押す。 以前に使用したツール、または ウェルカム ツール。

その他の方法:

操作 結果のツール
Microsoft Edge ツール バーで、[設定と詳細] ([設定と詳細] アイコン) >その他のツール > 開発者ツールを選択します。 以前に使用したツール、または ウェルカム ツール。
Ctrl+Shift+J (Windows/Linux) または Command+Option+J(macOS) を押します。 コンソール ツール。
Ctrl+Shift+C (Windows/Linux) または Command+Option+C(macOS) を押します。 要素ツール。DOM ツリーが展開され、要素が<body>表示されます。
キーを押 Shift+F10 して右クリック メニューを開きます。 [検査] コマンドを選択するには、キーを押してから 、 を押Up ArrowしますEnter 要素ツール。DOM ツリーが展開され、要素が<html>表示されます。
ページ要素を長押 TabShift+Tab してフォーカスを設定します。 次に、キーを押 Shift+F10 して右クリック メニューを開きます。 [検査] コマンドを選択するには、キーを押してから 、 を押Up ArrowしますEnter フォーカスされたページ要素を表示するために DOM ツリーが展開された 要素 ツール。

Web ページ内の項目を右クリックして DevTools を開く

DevTools を開くには、Web ページ上の項目を右クリックし、[検査] を選択することをお勧 めします

DevTools を開くには、Web ページ上の項目を右クリックし、[検査] を選択します。

DevTools が開き、右クリックした要素が要素ツールの DOM ツリーで強調表示されます。

DevTools が開き、右クリックされた要素が [要素] ツールで強調表示されます。

Microsoft Edge ツール バーを使用して DevTools を開く

Microsoft Edge ツール バーで、[設定] などを選択できます (...その他の****ツール > >開発者ツール:

Microsoft Edge ツール バーで、'その他のツール' > [開発者ツール] > [設定とその他] を選択します。

新しいタブを開くときに DevTools を自動的に開く

ブラウザーで新しいタブを開くたびに DevTools を自動的に開くには:

  1. コマンド ラインで、次のようにフラグを --auto-open-devtools-for-tabs 渡して Microsoft Edge を開きます。

    Windows コマンド プロンプト:

    start msedge --auto-open-devtools-for-tabs
    

    Windows PowerShell:

    Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"
    

    macOS 上の bash shell:

    /Applications/Microsoft\ Edge\ Beta.app/Contents/MacOS/Microsoft\ Edge\ Beta --auto-open-devtools-for-tabs
    

    Linux 上の bash shell:

    microsoft-edge-dev --auto-open-devtools-for-tabs
    

F12 キーボード ショートカットをオフにする

DevTools を開くのを押 F12 さないようにするには:

  1. Microsoft Edge で 、 edge://settings/system.

  2. [ 開発者ツール] セクションで、 F12 キーが押されたときに DevTools を開くトグルを オフにします。

    [エッジ設定] で、DevTools を開くときに F12 キーを無効にします。

キーボードのサポート

DevTools は、マウスまたはキーボードを使用して操作できます。 キーボード ショートカットは、機能にすばやくアクセスする方法を提供し、アクセシビリティのために必要です。 キーボードやスクリーン リーダーなどの支援技術を通じて、さまざまなツールにアクセスする可能性が高まっています。

キーボード ショートカットと支援テクノロジを使用した DevTools の移動に関するページを参照してください。

DevTools がブラウザーにドッキングされている場所を変更する

ブラウザーの右、左、または下部に DevTools をドッキングするか、別のウィンドウにドッキング解除することができます。 「DevTools の配置を変更する (Undock、Dock to bottom、Dock to left)」を参照してください。

DevTools を拡大または縮小する

DevTools UI は、WEB ページなどの HTML と CSS を使用して実装されているため、標準のキーボード ショートカットを使用して拡大および縮小できます。 DevTools とレンダリングされたページのズーム レベルは独立しています。

ブラウザーの DevTools 部分を拡大するには:

  1. まだ DevTools にフォーカスがない場合は、DevTools のどこかをクリックします。
  2. または (Windows または+- CtrlLinux) キーを押します。Ctrl++ または、または (macOS) キーを押しますCommand++Command``+``-

DevTools が縮小されました。

レンダリングされたページをズームするには、ページをクリックし、上記と同じキーボード ショートカットを使用します。

ズームを 100% に復元するには:

  1. DevTools またはレンダリングされたページのブラウザーの目的の部分にフォーカスがあることを確認します。
  2. または (Windows または Linux)、または Command``0+(macOS) キーを押します。Ctrl+0 Ctrl+NumPad0

DevTools 設定をズームするには:

  1. DevTools の設定で、右上の [閉じる ] (x) をクリックします。
  2. 前述のように、DevTools のズーム レベルを変更します。
  3. [ 設定] ([設定] アイコン.) ボタンをクリックします。

コマンド メニューを使用して DevTools をズームするには:

  1. [ DevTools のカスタマイズと制御 ] ([カスタマイズ] アイコン.) メニュー ボタンをクリックし、[ 実行] コマンドを選択します。
  2. コマンド メニュー、ズームの入力を開始し、ズーム コマンドを選択します。
    • ズーム レベルをリセットする
    • 拡大する
    • 縮小

DevTools ツールヒントを表示する

DevTools ツール ヒント機能を使用すると、さまざまなツールとウィンドウについて学習できます。 DevTools のアウトライン領域にマウス ポインターを合わせると、ツールの使い方の詳細が確認できます。 ツールヒントを有効にするには、次のいずれかの操作を行います。

  • [DevTools をカスタマイズおよび制御する] (...) > [ヘルプ] > [DevTools ヒントを切り替える] の順に選択します。
  • Ctrl+Shift+H (Windows/Linux) または Cmd+Shift+H(macOS) を押します。
  • コマンド メニューを開きtooltipsと入力します。

次に、DevTools のアウトライン化された各リージョンにマウス ポインターを合わせます。

DevTools ツールヒント。

ツールヒントをオフにするには、Esc キーを押します。

メイン ツール バーの機能

DevTools を使用すると、ブラウザーに現在表示されている Web サイトを検査、デバッグ、および変更するための膨大な量の機能が提供されます。 ほとんどのツールは、変更をライブで表示します。 ライブ アップデートにより、ツールは、Web プロジェクトを更新または構築することなく、Web プロジェクトの外観、ナビゲーション、または機能を改善するのに非常に役立ちます。

タブとページを含むタブ付きツール パネル

いくつかのアイコン ツール ( 検査 ツールと デバイス エミュレーション) 以外に、DevTools は 、要素 ツール、 コンソール ツール、 ソース ツールなどのタブ付きツールのセットに分割されます。 コマンド メニュー内では、ツールは_パネル_と呼ばれます。 ツールのタブには、ツールの UI を含むパネルが含まれています。

上位レベルのタブ:

ツールは、メイン ツール バーとドロワー ツール バーの一連のタブに編成されます。 ほとんどのツールは _パネル_とも呼ばれます。 パネルは、ツールの内部 UI です。 ツールには、メイン ツール バーとドロワー ツール バーに表示できるタブがあります。

下位レベルのタブ:

一部のツールのパネル内には、1 つまたは複数のタブ セット (タブ付きウィンドウ) があります。 たとえば、 要素 ツールには、 スタイルイベント リスナーおよびアクセシビリティ タブを含む一連のタブが含まれています。 その他のツールの場合、ツールのパネルには左側にページが一覧表示されます。

メイン ツール バーとドロワー ツール バー

2 つのツール バーがあります。DevTools の上部にあるメイン ツール バーと、キーを押Escしたときの下部にあるドロワー

メイン ツール バーには、次の機能が含まれています。

  • アイコン ツール:

    • 検査ツール (検査ツール アイコン.) トグル ボタン。
    • デバイス エミュレーション ([デバイス エミュレーション] アイコン.) ボタン。
  • ツール タブ:

    • ウェルカム ツール。
    • 要素 ツール。 永久。
    • コンソール ツール。 永久。
    • ソース ツール。 永久。
    • ネットワーク ツール。
    • パフォーマンス ツール。
    • メモリ ツール。
    • アプリケーション ツール。
    • セキュリティ ツール。
    • Lighthouse ツール。
    • CSS の概要 ツール。
  • アイコン:

    • その他のタブ (その他のタブ アイコン.) ボタン。
    • その他のツール ([その他のツール] アイコン.) ボタン。
    • JavaScript エラー カウンター (JavaScript エラー カウンター アイコン.) ボタン。
    • 問題カウンター (問題カウンター アイコン.) ボタン。
    • [設定] ([設定] アイコン.) ボタン。
    • [フィードバックの送信 ] ([フィードバックの送信] アイコン.) ボタン。
    • DevTools ([カスタマイズ] アイコン.) メニュー ボタンをカスタマイズおよび制御します。
    • 閉じる DevTools ([開発ツールを閉じる] アイコン.) ボタン。

メイン ツール バー。機能を識別するラベルが付きます。

ツール バーの機能については、以下で説明します。

検査ツール

[ 検査ツール (検査ツール アイコン.)] ボタンをクリックすると、現在の Web ページで要素を選択できます。 検査ツールがアクティブな間は、ページ要素に関する詳細情報と、ページ要素のレイアウトサイズ、パディング、余白を示す複数色のオーバーレイを取得するために、Web ページのさまざまな部分にマウスを移動できます。

この記事の最初の見出しでカーソルを合わせながら検査ツール。

デバイス エミュレーション

デバイス エミュレーション (デバイス エミュレーション アイコン.) ボタンをクリックして、エミュレートされたデバイス モードで現在の Web サイトを表示します。 デバイス エミュレーション ツールを使用すると、ブラウザーのサイズを変更したときに製品がどのように反応するかを実行およびテストできます。 また、モバイル デバイスのレイアウトと動作の見積もりも提供します。

エミュレートされた携帯電話にこの記事の DevTools が表示されます。

「モバイル デバイスのエミュレート (デバイス エミュレーション)」を参照してください。

ウェルカム ツール

DevTools の新機能、チームへの連絡方法に関する情報が含まれ、特定の機能に関する情報が提供されます。

要素ツール

HTML と CSS の検査、編集、デバッグを行うことができます。 ブラウザーでライブで変更を表示している間は、ツールで編集できます。

要素ツールは、常にメイン ツール バーに表示されます。

コンソール ツール

コンソール ツールでは、次のことができます。

  • ネットワーク要求または JavaScript ログ ステートメントからログに記録されたメッセージを表示およびフィルター処理します。
  • リアルタイムで評価する JavaScript ステートメントを入力します。 式は、 ソース ツールの JavaScript デバッガーがブレークポイントで一時停止されている場合など、現在のコンテキストで評価されます。

コンソール ツールは、常にメイン ツール バーとドロワー ツール バーに表示されます。

コンソールを参照 してください

ソース ツール

ソース ツールは、コード エディターと JavaScript デバッガーです。 プロジェクトの編集、スニペットの管理、現在のプロジェクトのデバッグを行うことができます。

ソース ツールは、常にメイン ツール バーに表示されます。

ネットワーク ツール

ネットワーク ツールを使用すると、ネットワークキャッシュとブラウザー キャッシュからの要求または応答を監視および検査できます。 要求と応答をフィルター処理してニーズに合わせてフィルター処理し、さまざまなネットワーク条件をシミュレートできます。

「ネットワーク アクティビティの検査」を参照してください。

パフォーマンス ツール

ランタイム パフォーマンスの分析を開始する方法に関する参照してください。

メモリ ツール

「メモリの問題を修正する」を参照してください。

アプリケーション ツール

Cookie の表示、編集、削除に関する記事を参照してください。

セキュリティ ツール

セキュリティ ツールを使用したセキュリティの問題の理解に関する説明を参照してください。

ライトハウス ツール

「Lighthouse ツール」を参照してください。

CSS の概要ツール

CSS の潜在的な機能強化を特定します。

CSS の概要ツールを参照してください。

[その他のタブ] ボタン

ウィンドウが狭すぎるために開いているが非表示になっているツールを表示するには、[ その他のタブ ] ([その他のタブ] アイコン) ボタンをクリックします。

[その他のツール] ボタン

ツールをツール バーに追加するには、[ その他のツール ] ([その他のツール] アイコン.) ボタンをクリックします。

JavaScript エラー カウンター

JavaScript エラー カウンター (JavaScript エラー カウンター アイコン.) ボタンには、次のものが表示されます。

  • 現在の Web ページで自動的に検出された JavaScript エラーの数が続 Xく赤い円。

  • 感嘆符を含む黄色の三角形の後に、現在の Web ページで自動的に検出された JavaScript 警告の数。

JavaScript カウンター ボタンのツールヒントは 、#エラー、# 警告を表示するコンソールを開くです。

JavaScript エラー カウンターをクリックしてコンソールを開き、エラーの詳細を確認 します

問題カウンター

[問題カウンター (問題カウンター アイコン.)] ボタンには、現在の Web ページで自動的に検出される HTML または CSS の問題の数が表示されます。

問題カウンターのツールヒントは、#問題を表示するためのオープンイシューです。 ボタンのアイコンは青い吹き出しアイコンで、その後に HTML または CSS の問題の数が表示されます。

[問題] カウンターをクリックして[、問題] ツールを開きます。

[設定] ボタン

DevTools の [設定] Web ページを開くには、[ 設定] ([設定] アイコン.) ボタンをクリックします。 [設定] ページには、次のサブページが含まれています。

  • 基本設定
  • ワークスペース
  • テスト
  • ライブラリ コード
  • デバイス
  • 抑制 (スロットリング)
  • 場所
  • ショートカット
  • Symbol Server

_DevTools のカスタマイズ_の設定を参照してください。

[フィードバックの送信] ボタン

[フィードバックの送信] ダイアログを開くには、[フィードバックの送信] ([フィードバックの送信] アイコン.) ボタンをクリックします。 [ フィードバックの送信 ] ダイアログが開きます。 発生した内容を説明する情報を入力し、スクリーンショットを自動的に含めます。 フィードバックの送信を使用して DevTools チームに接続し、問題、問題、アイデアの提案を報告します。

Microsoft Edge DevTools チームにお問い合わせください

DevTools メニューのカスタマイズと制御

[DevTools のカスタマイズと制御] (DevTools のカスタマイズと制御) ボタンをクリックすると、DevTools をドッキングする場所、検索する場所、さまざまなツールを開く場所などを定義できるドロップダウン メニューが開きます。

[DevTools を閉じる] ボタン

DevTools の右上隅にある DevTools を 閉じる (![開発ツールを閉じる] アイコン.) ボタンをクリックして DevTools を閉じ、ウィンドウ全体を使用して現在の Web ページを表示します。

すべてのツールの概要

各ツールの概要については、「ツールの一覧について」のすべてのツールの概要_に関するページを_参照してください。

ツール、タブ、またはパネル

多くの場合、"tool"、"tab"、または "panel" という単語は同じ意味で使用されます。 コマンド メニューで、ツールは_パネル_と呼ばれます。たとえば、要素ツールは要素****パネルと呼ばれます。 要素ツールに切り替えるには、[要素] タブを選択します。 その他のツール (+) ボタンと一覧があり、ツール バーには [その他のタブ] ボタンがあり、どちらもツールの選択に使用され、_これらはパネル_とも呼ばれます。

各ツールをカスタマイズでき、コンテキストに基づいてツールの内容を変更できます。

パネル ツールと引き出しツールについて

その他のツール () に一覧表示されているツールは、パネル ツール (+ メイン ツール バー) またはドロワー ツール (ドロワー ツール バー) として表示できます。 コマンド メニューでは、これらの各ツールにパネル ツールまたはドロワー ツールとしてラベルが付けられます。 ただし、それらをメイン ツール バーまたはドロワー ツール バーに追加し、次のいずれかの方法を使用して、それらを開いたり、2 つのツール バー間で移動したりできます。

[その他のツール ] (+) メニューを使用して、パネル ツールまたはドロワー ツールのいずれかを選択します。 [その他のツール] メニューが複数の場所に表示されます。

  • DevTools の右上にあるメイン ツール バーの [ DevTools のカスタマイズと制御 ] (DevTools のカスタマイズと制御) ボタンをクリックし、[ その他のツール ] コマンドにマウス ポインターを合わせ、ツールを選択します。

  • DevTools の上部にあるメイン ツール バー ( 通常はパネル ツールが移動します)。

  • ドロワー ツール バー (ドロワー ツールが通常使用される場所) で表示されます。

タスク 手順
DevTools の上部にあるメイン ツール バーでツールを開く DevTools の上部にあるメイン ツール バーで、[ その他のツール ( )+] をクリックし、ツールを選択します。
ドロワー ツール バーでツールを開く DevTools にフォーカスがある場合は、 Esc キーを押してドロワーを表示します。 ドロワー ツール バーの [ その他のツール (+)] をクリックし、ツールを選択します。
ツールをドロワー ツール バーからメイン ツール バーに移動する DevTools にフォーカスがある場合は、 Esc キーを押してドロワーを表示します。 ドロワー ツール バーで、ツールのタブを右クリックし、[ 上へ移動] を選択します。
ツールをメイン ツール バーからドロワー ツール バーに移動する メイン ツール バーで、ツールのタブを右クリックし、[ 下へ移動] を選択します。
既定のツール バーでツールを開く DevTools にフォーカスがある場合は、(Windows、Linux) または+Shift+P Command(macOS) キーを押Ctrl``P++Shiftしてコマンド メニューを開きます。 ツールの名前を入力し、ツールを選択します。

パネル ツールとドロワー ツールに加えて、DevTools には次のツールが含まれています。

関連項目

電源ヒント: コマンド メニューを使用する

DevTools には、Web サイトで使用する多くの機能と機能が用意されています。 DevTools のさまざまな部分にはさまざまな方法でアクセスできますが、多くの場合、コマンド メニューを使用するのが速い方法です。

DevTools の [コマンド] メニュー。

コマンド メニューで、ツールは "パネル" と呼ばれます。たとえば、要素ツールは要素****パネルと呼ばれます。 要素ツールに切り替えるには、[要素] タブを選択します。

コマンド メニューを開くには、次のいずれかの操作を行います。

  • [ DevTools のカスタマイズと制御 ] (DevTools のカスタマイズと制御) ボタンをクリックし、[ 実行] コマンドを選択します。

  • Ctrl+Shift+P (Windows/Linux) または Command+Shift+P(macOS) を押します。

コマンド メニューでは、DevTools で機能を表示、非表示、または実行するコマンドを入力できます。 コマンド メニューを開き、 変更という単語を入力し、[ ドロワー: 変更の表示] を選択します。

[変更] ツールが開きます。これは、CSS を編集するときに便利です。 この場合、コマンド メニューには、[その他のツール] (...) を選択してから [変更] を選択するか、[ソース] ツールでファイルを.js編集してから、右クリックして [ローカル変更] を選択する方法が用意されています。

cha と入力すると、コマンド メニューにオプションが表示されます。

コマンド メニューには、「変更ツールをドロワーに表示する」など、「cha」と入力した後のオプションが表示されます。

を押 Enterし、 変更 ツールが開きます。

変更ツールを開いた DevTools。

Microsoft Edge DevTools コマンド メニューを使用したコマンドの実行も参照してください。

DevTools のカスタマイズ

DevTools は、作業方法のニーズに合わせてカスタマイズできます。 設定を変更するには、[ 設定] (右上の歯車アイコン) をクリックするか、キーを押します F1

[設定****設定] > ページでは、DevTools のいくつかの部分を変更できます。 たとえば、[ ブラウザーの言語に一致する ] 設定を使用して、ブラウザーで使用されている DevTools で同じ言語を使用できます。 別の例として、 テーマ 設定を使用して DevTools のカラー テーマを変更します。

DevTools のすべての設定。

次のような高度な機能の設定を変更することもできます。

  • ワークスペースにローカル ファイルを追加 します
  • [リストを無視] を使用してライブラリ コードをフィルター処理します。
  • デバイス シミュレーションおよびテスト モードに含めるデバイスを定義します。 詳細については、「モバイル デバイスのエミュレート (デバイス エミュレーション)」を参照してください。
  • ネットワーク調整プロファイル 選択します。
  • シミュレートされた場所を定義します。
  • キーボード ショートカットをカスタマイズする。 たとえば、Visual Studio Code と同じショートカットを DevTools で使用するには、事前設定 > されたVisual Studio Code から [ショートカットの一致] を選択します。

Visual Studio Code のショートカットに一致するすべてのキーボード ショートカットとメニュー。

試験的な機能を試す

DevTools チームは、DevTools の 実験 として新機能を提供します。 各実験のオンとオフを切り替えることができます。 試験的機能の完全な一覧を表示するには、DevTools で [設定] (歯車アイコン) を選択し、[実験] を選択します。

DevTools に来る最新の機能をプレビューするには、夜間にビルドされる Microsoft Edge Canary をダウンロードしてください。

関連項目