このページでは、Chrome DevTools のキーボード ショートカットについて説明します。
ツールチップにもショートカットがあります。DevTools の UI 要素にカーソルを合わせて、ツールチップを表示します。
要素にショートカットがある場合は、ツールチップにショートカットが表示されます。
DevTools を開くためのキーボード ショートカット
DevTools を開くには、ブラウザにカーソルを合わせた状態で、次のキーボード ショートカットを押します。
ビューポート:
アクション | Mac | Windows / Linux |
---|
前回使用したパネルを開く | command option I | F12 または Ctrl Shift I |
[Console] パネルを開く | command option J | Ctrl Shift J |
[Elements] パネルを開く | Command Shift C または Command Option C | Ctrl Shift C |
グローバル キーボード ショートカット
次のキーボード ショートカットは、ほとんど(すべてではないにしても)の DevTools パネルで使用できます。
アクション | Mac | Windows / Linux |
---|
設定を表示 | ? または Function F1 | ? または F1 |
次のパネルにフォーカスする | Command ] | Control ] |
前のパネルにフォーカス | command [ | Ctrl [ |
前回使用した装着位置に戻します。DevTools がセッション全体のデフォルトの位置にある場合、このショートカットにより DevTools の固定が解除されて別のウィンドウが表示されます。 | command Shift D | Ctrl Shift D |
デバイスモードを切り替えます | command Shift M | Ctrl Shift M |
[要素を検証] モードを切り替えます | command Shift C | Ctrl Shift C |
コマンド メニューを開きます。 | command Shift P | Ctrl Shift P |
ドロワーを切り替えます | Esc | Esc |
通常の再読み込み | command R | F5 または Ctrl R |
ハードリロード | command Shift R | Ctrl F5 または Ctrl Shift R |
現在のパネル内でテキストを検索します。[Elements]、[Elements]、[Elements]、[Elements]、[Elements]、[Elements]、[Elements] パネルでのみサポートされます。 | command F | Ctrl F |
ドロワーの [Search] タブを開きます。読み込まれたすべてのリソースからテキストを検索できます。 | command option F | Ctrl Shift F |
[ソース] パネルでファイルを開く | Command O または Command P | Ctrl O または Ctrl P |
拡大 | command Shift | Ctrl Shift |
縮小 | command - | Ctrl - |
デフォルトのズームレベルに戻す | command 0 | Ctrl 0 |
スニペットを実行 | Command O キーを押してコマンド メニューを開き、「!」と入力します。スクリプト名を入力して Enter キーを押します。 | Ctrl O キーを押してコマンド メニューを開き、「!」と入力します。スクリプト名を入力して Enter キーを押します。 |
[要素] パネルのキーボード ショートカット
アクション | Mac | Windows / Linux |
---|
変更を元に戻す | command Z | Ctrl Z |
変更をやり直す | command Shift Z | Ctrl Y |
現在選択されている要素の上位 / 下位の要素を選択します | 上矢印 / 下矢印 | 上矢印 / 下矢印 |
現在選択されているノードを開きます。ノードがすでに展開されている場合は、このショートカットによりその下の要素が選択される | 右矢印 | 右矢印 |
現在選択されているノードを折りたたみます。ノードがすでに折りたたまれている場合、このショートカットで上位の要素が選択される | 左矢印 | 左矢印 |
現在選択されているノードとそのすべての子を展開または折りたたむ | Option キーを押したまま、要素名の横にある矢印アイコンをクリックします | Ctrl Alt キーを押したまま、要素名の横にある矢印アイコンをクリックします。 |
現在選択されている要素の [属性を編集] モードを切り替える | 入力 | 入力 |
[属性を編集] モードに入った後、次または前の属性を選択する | Tab / Shift Tab | Tab / Shift Tab |
現在選択されている要素を非表示 | H | H |
現在選択されている要素の [HTML として編集] モードを切り替える | Function F2 | F2 |
[スタイル] ペインのキーボード ショートカット
アクション | Mac | Windows / Linux |
---|
プロパティ値が宣言されている行に移動 | command キーを押したままプロパティ値をクリックする | Ctrl キーを押したままプロパティ値をクリックする |
色の値の RGBA、HSLA、16 進数表現を循環させる | Shift キーを押しながら、値の横にある [カラー プレビュー] ボックスをクリックします | Shift キーを押しながら、値の横にある [カラー プレビュー] ボックスをクリックします |
次または前のプロパティまたは値を選択 | プロパティ名または値をクリックし、Tab または Shift Tab キーを押す | プロパティ名または値をクリックし、Tab または Shift Tab キーを押す |
プロパティ値を 0.1 インクリメント / デクリメントする | 値をクリックし、option ↑ または option ↓ キーを押す | 値をクリックし、Alt 上矢印 / Alt 下矢印を押す |
プロパティ値を 1 インクリメント / デクリメントする | 値をクリックし、上矢印または下矢印を押す | 値をクリックし、上矢印または下矢印を押す |
プロパティ値を 10 インクリメント / デクリメントする | 値をクリックし、Shift 上矢印 / Shift 下矢印を押す | 値をクリックし、Shift 上矢印 / Shift 下矢印を押す |
プロパティ値を 100 インクリメント / デクリメントする | 値をクリックしてから、command 上矢印 / command 下矢印キーを押します。 | 値をクリックし、Ctrl 上矢印 / Ctrl 下矢印を押す |
角度値の度数(deg)、グラディアン(grad)、ラジアン(rad)、ターン(ターン)表現を循環させる | Shift キーを押しながら、値の横にある [角度のプレビュー] ボックスをクリックします | Shift キーを押しながら、値の横にある [角度のプレビュー] ボックスをクリックします |
角度の値を 1 ずつ増減する | 値の横にある [角度のプレビュー] ボックスをクリックし、上矢印 / 下矢印を押す | 値の横にある [角度のプレビュー] ボックスをクリックし、上矢印 / 下矢印を押す |
角度の値を 10 ずつ増減する | 値の横にある [角度のプレビュー] ボックスをクリックし、Shift 上矢印 / Shift 下矢印を押す | 値の横にある [角度のプレビュー] ボックスをクリックし、Shift 上矢印 / Shift 下矢印を押す |
角度の値を 15 ずつ増減する | 値の横にある [角度のプレビュー] ボックスをクリックし、Shift キーを押したまま、角度時計のオーバーレイ上をクリックまたはマウスでスライドさせます | 値の横にある [角度のプレビュー] ボックスをクリックし、Shift キーを押したまま、角度時計のオーバーレイ上をクリックまたはマウスでスライドさせます |
ソースパネルのキーボード ショートカット
アクション | Mac | Windows / Linux |
---|
スクリプトの実行を一時停止(現在実行中の場合)、再開(現在一時停止している場合) | F8 または command \ | F8 または Ctrl \ |
次の関数呼び出しのステップオーバー | F10 または command ' | F10 または Ctrl ' |
次の関数呼び出しにステップイン | F11 または command ; | F11 または Ctrl ; |
現在の関数からステップアウト | Shift F11 または Command Shift ; | Shift F11 または Ctrl Shift ; |
一時停止中に特定のコード行に移動する | command キーを押したままコード行をクリックする | Ctrl キーを押したまま、コード行をクリックする |
現在選択されているフレームの下 / 上の呼び出しフレームを選択 | Ctrl . / Ctrl , | Ctrl . / Ctrl , |
ローカルの変更の保存 | command S | Ctrl S |
すべての変更を保存 | command option S | Ctrl Alt S |
行に移動 | Ctrl G | Ctrl G |
現在開いているファイルの行番号に移動 | Command O キーを押してコマンド メニューを開き、「:」に続けて行番号を入力してから Enter キーを押します。 | Ctrl O キーを押してコマンド メニューを開き、「:」に続けて行番号を入力してから Enter キーを押す |
現在開いているファイルの列に移動(例: 行 5、列 9) | Command O キーを押してコマンド メニューを開き、:、行番号、:、列番号の順に入力し、Enter キーを押します。 | Ctrl O キーを押してコマンド メニューを開き、:、行番号、:、列番号の順に入力し、Enter キーを押す |
関数宣言(現在開いているファイルが HTML またはスクリプトの場合)またはルールセット(現在開いているファイルがスタイルシートの場合)に移動します。 | Command Shift O キーを押し、宣言 / ルールセットの名前を入力するか、オプションのリストから選択します。 | Ctrl Shift O キーを押し、宣言またはルールセットの名前を入力するか、オプションのリストから選択する |
アクティブなタブを閉じる | option W | Alt W |
次または前のタブを開く | Function Command ↑ または ↓ | Ctrl PageUp または PageDown |
左側の [ナビゲーション] サイドバーを切り替えます | Command Shift Y | Ctrl Shift Y |
右側の [Debugger] サイドバーを切り替え | command Shift H | Ctrl Shift H |
コードエディタのキーボード ショートカット
アクション | Mac | Windows / Linux |
---|
最後の単語からカーソルまでの文字をすべて削除 | option Delete | Ctrl Delete |
コード行ブレークポイントを追加または削除する | その行にカーソルを置いて、command B キーを押します。 | その行にカーソルを置いて、Ctrl B キーを押します。 |
ブレークポイントの編集ダイアログを開いて、条件付きブレークポイントまたはログポイントを編集します。 | その行にカーソルを置いて、Command Alt B キーを押します。 | その行にカーソルを置いて、Ctrl Alt B キーを押します。 |
[条件付きブレークポイント] ダイアログを開く | command 行番号をクリック | Ctrl キーを押しながら行番号をクリック |
[ログポイント] ダイアログを開く | Command Shift 行番号をクリック | Ctrl Shift キーを押しながら行番号をクリックする |
対応する角かっこに移動 | Ctrl M | Ctrl M |
単一行コメントを切り替えます。複数の行が選択されている場合、DevTools は各行の先頭にコメントを追加します。 | command / | Ctrl / |
カーソル位置の単語で次に出現する単語を選択または選択解除します。各箇所が同時にハイライト表示されます | command D / command U | Ctrl D / Ctrl U |
ネットワーク パネルのキーボード ショートカット
アクション | Mac | Windows / Linux |
---|
ヘッダー、ペイロード、レスポンスを検索する | command F | Ctrl F |
録画を開始 / 停止する | command E | Ctrl E |
再読み込みを記録 | command R | Ctrl R |
選択した XHR リクエストを再生する | R | R |
選択したリクエストの詳細を非表示 | Esc | Esc |
アクション | Mac | Windows / Linux |
---|
録画を開始 / 停止する | command E | Ctrl E |
Save recording | command S | Ctrl S |
録音を読み込む | command O | Ctrl O |
メモリパネルのキーボード ショートカット
アクション | Mac | Windows / Linux |
---|
録画を開始 / 停止する | command E | Ctrl E |
コンソール パネルのキーボード ショートカット
アクション | Mac | Windows / Linux |
---|
予測入力の候補を承認 | 右矢印または Tab | 右矢印または Tab |
予測入力の候補を拒否 | Esc | Esc |
予測入力リストを上下に移動する | ↑ / ↓、または Ctrl P / N | ↑ / ↓、または Ctrl P / N |
前のステートメントを取得する | 上矢印 | 上矢印 |
次のステートメントを取得する | 下矢印 | 下矢印 |
コンソールにフォーカス | Ctrl ` | Ctrl ` |
コンソールをクリアする | Command K または Option L | Ctrl L |
複数行の入力を強制します。DevTools ではデフォルトで複数行のシナリオが検出されるため、このショートカットは通常不要になりました。 | Shift Return | Shift Enter |
実行 | 返品 | 入力 |
コンソールに記録されたオブジェクトのサブプロパティをすべて開く | Alt キーを押したまま、[開く] > をクリックします。 | Alt キーを押したまま、[開く] > をクリックします。 |
[検索] タブのキーボード ショートカット
アクション | Mac | Windows / Linux |
---|
すべての検索結果を開く/閉じる | command option { または } | Ctrl Shift { または } |
レコーダー パネルのキーボード ショートカット
アクション | Mac | Windows / Linux |
---|
録画を開始または停止する | command E | Ctrl E |
録音を再生 | command Enter | Ctrl Enter |
録音または選択したステップをコピー | command C | Ctrl C |
コードビューを切り替える | command B | Ctrl B |