Chrome DevTools を開く

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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