Chrome DevTools を開く

Kayce Basques
Kayce Basques
X GitHub
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 の略です。
  • JavaScript の場合は J。
  • I は、選択した内容を示します。

ショートカット C を使用すると、 インスペクタ モードで [要素] パネルが開きます。このモードでは、ページ上の要素にカーソルを合わせると、役立つツールチップが表示されます。要素をクリックして、[要素] > [スタイル] タブで CSS を表示することもできます。

検証モードの [Elements] パネルとツールチップ。

DevTools のショートカットの一覧については、キーボード ショートカットをご覧ください。

DevTools を開いた状態で、キャッシュの有無にかかわらずページを再読み込みします。

DevTools を開いた状態で、次の 3 つの方法でページを再読み込みできます。Chrome ウィンドウのメイン アクション バーで、 再読み込みボタンを長押しして、次のいずれかのオプションを選択します。

DevTools が開いている状態で 3 つの再読み込みオプションが表示されている。

すべての新しいタブで 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 をカスタマイズする方法をご覧ください。