Chrome DevTools を開く

Chrome DevTools を開くにはさまざまな方法があります。以下の包括的なリファレンスから、お好みの方法をお選びください。

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

• Chrome のプルダウン メニューを使用します。
• 専用のショートカットを使用して、要素、コンソール、または最後に使用したパネルを開く。

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

Chrome メニューから DevTools を開く

UI が必要な場合は、Chrome のプルダウン メニューから DevTools にアクセスします。

[要素] パネルを開いて DOM または CSS を調べます

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

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