Chrome DevTools を開く

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome DevTools はさまざまな方法で開くことができます。この包括的なリファレンスから、お好きな方法をお選びください。

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

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

Chrome メニューから DevTools を開く

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

[要素] パネルを開いて DOM または CSS を検証する

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

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

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

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

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

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

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

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

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

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

OS 要素 コンソール 最後のパネル
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 ショートカットを使用すると、検査する。 インスペクタ モードで [要素] パネルが開きます。このモードでは、ページ上の要素にカーソルを合わせると便利なツールチップが表示されます。要素をクリックして、その 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 のカスタマイズ方法をご覧ください。