Chrome DevTools を開く

Chrome DevTools を開く方法は数多くあります。この総合的なリファレンスから、お好きな方法を選んでください。

DevTools には、Chrome UI またはキーボードを使用してアクセスできます。

また、新しいタブごとに DevTools を自動的に開く方法もご確認ください。

Chrome メニューから DevTools を開く

UI を使用する場合は、Chrome のプルダウン メニューから DevTools にアクセスできます。

[要素] パネルを開いて DOM または CSS を検査する

検査するには、ページ上の要素を右クリックして [検証] を選択します。

Chrome のプルダウン メニューにある [検証] オプション。

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 フラグを渡します。

  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 のカスタマイズ方法をご覧ください。