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 要素 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 のカスタマイズ方法をご覧ください。