この記事の対象読者
- ブラウザはGoogle Chromeを使っている。
- ディベロッパーツールの起動の仕方を知っている。
- スマホ用とPC用の画面とで表示が異なるレスポンシブなWebサイトを作っている。
この記事を読んでできるようになること
- スマホ用の画面を検証している時は、ドックを右側に、PC用の画面を検証している時は、ドックを下側に表示させたい。
- 以上の切り替え操作をショートカットでできるようになる。
ドック(dock)という用語について
- この記事では英語表記を参考に下図の赤枠の箇所をドック(dock)と表現しています。
- 日本語ではウィンドウ(window)という表現をされる方もいました。
設定手順
- Developer Toolを起動する。
- 縦3つのドットをクリックし、”Dock to right”を選択する。
- 再度縦3つのドックをクリックし、”Dock to bottom”を選択する。
- 以下のショートカットでドックの表示位置を切り替える。
[Windows]
Ctrl + Shift + D
[Mac]
Command + Shift + D
仕組み
-
[Windows]
Ctrl + Shift + D/ [Mac]Command + Shift + Dは直近二つの手動による表示位置を切り替えます。 -
上記手順は、ドックの表示位置を右<->下で切り替える例でしたが、右でなく、左<->下といった具合に組み合わせを変えることもできます。
その場合は、手順2で”Dock to right”を設定した後、以降の手順を試してみてください。左<->下の順で切り替わります。
参考にした記事
https://engineering.webstudio168.jp/2022/02/google-chrome-dev-shortcut/#toc5
https://developer.chrome.com/blog/toggle-the-devtools-dock-state-with-a-keyboard-shortcut/