Chrome DevTools を開く方法はたくさんあります。この包括的なリファレンスから、お好みの方法を選択してください。
DevTools には、Chrome UI またはキーボードを使用してアクセスできます。
- Chrome のプルダウン メニューから。
- 要素、コンソール、または最後に使用したパネルを開く専用のショートカット。
また、新しいタブごとに DevTools を自動的に開く方法もご覧ください。
Chrome メニューから DevTools を開く
UI を使用する場合は、Chrome のプルダウン メニューから DevTools にアクセスできます。
[要素] パネルを開いて DOM または CSS を検査する
検証するには、ページ上の要素を右クリックして [検証] を選択します。
![Chrome のプルダウン メニューにある [検証] オプション。](https://developer.chrome.com/static/docs/devtools/open/image/the-inspect-option-a-dro-e98bce489fabb_2880.png?hl=ja)
DevTools の [要素] パネルが開き、DOM ツリー内の要素が選択されます。[スタイル] タブには、選択した要素に適用されている CSS ルールが表示されます。
![[要素] パネルで選択された要素。](https://developer.chrome.com/static/docs/devtools/open/image/an-element-selected-the-45e3ba473a721_2880.png?hl=ja)
Chrome のメインメニューから最後に使用したパネルを開く
最後に開いた DevTools パネルを開くには、アドレスバーの右にある ボタンをクリックし、[その他のツール] > [デベロッパー ツール] を選択します。
![その他メニューから [デベロッパー ツール] オプションが選択されている。](https://developer.chrome.com/static/docs/devtools/open/image/the-developer-tools-optio-2d9d9b7c0ac96_2880.png?hl=ja)
また、ショートカットを使用して最後のパネルを開くこともできます。詳しくは、次のセクションをご覧ください。
ショートカットでパネルを開く: [要素]、[コンソール]、または最後に開いたパネル
キーボードを使用する場合は、オペレーティング システムに応じて 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] パネルとツールチップ。](https://developer.chrome.com/static/docs/devtools/open/image/the-elements-panel-inspe-6e5ff3c13f7a3_2880.png?hl=ja)
DevTools のショートカットの一覧については、キーボード ショートカットをご覧ください。
DevTools を開いた状態で、キャッシュの有無にかかわらずページを再読み込みします。
DevTools を開いた状態で、次の 3 つの方法でページを再読み込みできます。Chrome ウィンドウのメイン アクション バーで、 再読み込みボタンを長押しして、次のいずれかのオプションを選択します。
通常の再読み込み。キャッシュを使用して再読み込み時間を短縮します。
ショートカット: Cmd+R（macOS）または Ctrl+R（Windows/Linux）。
ハード再読み込み。キャッシュをバイパスしますが、キャッシュは空になりません。
ショートカット: Cmd+Shift+R（macOS）または Ctrl+Shift+R（Windows/Linux）。
キャッシュの消去とハード再読み込み。再読み込みする前にすべてのサイトのキャッシュを空にします。
すべての新しいタブで DevTools を自動オープン
コマンドラインから Chrome を実行し、--auto-open-devtools-for-tabs フラグを渡します。
実行中の Chrome インスタンスをすべて終了します。
お気に入りのターミナル アプリケーションまたはコマンドライン アプリケーションを実行します。
オペレーティング システムに応じて、次のコマンドを実行します。
macOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsWindows:
start chrome --auto-open-devtools-for-tabsLinux:
google-chrome --auto-open-devtools-for-tabs
Chrome を閉じるまで、新しいタブを開くたびに DevTools が自動的に開きます。
次のステップ
次に、次の動画で、DevTools をすばやく操作するための便利なショートカットと設定について学びます。
より実践的な学習については、DevTools をカスタマイズする方法をご覧ください。