Chrome DevTools を開く

Chrome DevTools を開く方法は数多くあります。この総合的なリファレンスから、お好きな方法を選んでください。

DevTools には、Chrome UI またはキーボードを使用してアクセスできます。

また、新しいタブごとに DevTools を自動的に開く方法もご確認ください。

Chrome メニューから DevTools を開く

UI を使用する場合は、Chrome のプルダウン メニューから DevTools にアクセスできます。

[Elements] パネルを開いて DOM や CSS を調べる

検査するには、ページ上の要素を右クリックして [検証] を選択します。

Chrome のプルダウン メニューにある [検証] オプション。

DevTools で [Elements] パネルを開き、DOM ツリーの要素を選択します。[スタイル] ペインで、選択した要素に適用されている CSS ルールを確認できます。

[要素] パネルで選択された要素。

Chrome のメインメニューから、最後に使用したパネルを開く

最後の DevTools パネルを開くには、アドレスバーの右にある その他メニュー。 ボタンをクリックし、[その他のツール] >デベロッパー ツール

その他メニューから選択したデベロッパー ツール オプション。

または、ショートカットで最後のパネルを開くこともできます。詳しくは次のセクションをご覧ください。

ショートカットでパネルを開く: 要素、コンソール、最後のパネル

キーボードを使用する場合は、オペレーティング システムに応じて Chrome のショートカットを押します。

OS 要素 Console 最後のパネル
Windows または Linux Ctrl + Shift + C Ctrl + Shift + J F12
Ctrl + Shift + I
Mac Cmd + Option + C Cmd + Option + J Fn + F12
Cmd + Option + I

ショートカットを覚える簡単な方法は次のとおりです。

  • C は CSS の略です。
  • J: JavaScript
  • I はユーザーの選択を表します。

C ショートカットを押すと、検査する。 インスペクタ モードで [要素] パネルが開きます。このモードでは、ページ上の要素にカーソルを合わせると、便利なツールチップが表示されます。任意の要素をクリックして、[Elements] でその CSS を表示することもできます。[スタイル] ペイン。

インスペクタ モードの [要素] パネルとツールチップ。

DevTools のショートカットの一覧については、キーボード ショートカットをご覧ください。

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

コマンドラインから Chrome を実行し、--auto-open-devtools-for-tabs フラグを渡します。

  1. 実行中の Chrome インスタンスを終了します。

  2. 任意のターミナルまたはコマンドライン アプリケーションを実行します。

  3. ご使用のオペレーティング システムに応じて、次のコマンドを実行します。

  • macOS:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs
    
  • Windows:

    start chrome --auto-open-devtools-for-tabs
    
  • Linux:

    google-chrome --auto-open-devtools-for-tabs
    

Chrome を閉じるまで、新しいタブごとに DevTools が自動的に開きます。

次のステップ

次の動画では、DevTools を素早く移動するための便利なショートカットと設定について説明します。

より実践的な学習体験については、DevTools のカスタマイズ方法をご覧ください。