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 で [要素] パネルが開き、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] > [Styles] タブで 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 のカスタマイズ方法をご覧ください。