Chrome DevTools を開く方法はいくつかあります。この総合的なリファレンスから、お好きな方法を選んでください。
DevTools には、Chrome UI またはキーボードを使用してアクセスできます。
- Chrome のプルダウン メニュー。
- 専用のショートカットを使用して、[要素]、[コンソール]、または最後に使用したパネルを開くことができます。
また、新しいタブごとに DevTools を自動的に開く方法もご覧ください。
Chrome メニューから DevTools を開く
UI を使用する場合は、Chrome のプルダウン メニューから DevTools にアクセスできます。
[Elements] パネルを開いて DOM や CSS を調べる
検査するには、ページ上の要素を右クリックして [検証] を選択します。
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
フラグを渡します。
実行中の Chrome インスタンスをすべて終了します。
好きなターミナル アプリケーションまたはコマンドライン アプリケーションを実行します。
オペレーティング システムに応じて、次のコマンドを実行します。
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 のカスタマイズ方法をご覧ください。