Chrome DevTools はさまざまな方法で開くことができます。この包括的なリファレンスから、お好きな方法をお選びください。
DevTools には、Chrome UI またはキーボードを使用してアクセスできます。
- Chrome のプルダウン メニューを使用します。
- 専用のショートカットを使用して、要素、コンソール、または最後に使用したパネルを開く。
また、新しいタブで DevTools を自動的に開く方法もご確認ください。
Chrome メニューから DevTools を開く
UI を使う場合は、Chrome のプルダウン メニューから DevTools にアクセスできます。
[要素] パネルを開いて DOM または CSS を検証する
検証するには、ページ上の要素を右クリックして [検証] を選択します。
DevTools で [Elements] パネルが開き、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
フラグを渡します。
実行中の 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 のカスタマイズ方法をご覧ください。