Chrome DevTools を開く方法は数多くあります。この総合的なリファレンスから、お好きな方法を選んでください。
DevTools には、Chrome UI またはキーボードを使用してアクセスできます。
- Chrome のプルダウン メニューから。
- 要素パネル、コンソールパネル、または最後に使用したパネルを開く専用のショートカット。
また、新しいタブごとに DevTools を自動的に開く方法もご確認ください。
Chrome メニューから DevTools を開く
UI を使用する場合は、Chrome のプルダウン メニューから DevTools にアクセスできます。
[要素] パネルを開いて 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 キーを押すと、[要素] パネルが
インスペクタ モードで開きます。このモードでは、ページ上の要素にカーソルを合わせると、便利なツールチップが表示されます。任意の要素をクリックして、[要素] でその 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 のカスタマイズ方法をご覧ください。