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