Chrome DevTools を開く

Kayce Basques
Kayce Basques
Jecelyn Yeen
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova

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