今回は私が普段使っている便利なコマンドについて紹介したいと思います。
コマンドを使うステップ
- デベロッパーツールを開く
- ショートカットキーはCtrl+Shift+Iもしくは F12 キー（Windows / Linux）またはCommand+Option+I（Mac）
- コマンドメニューを開く
- ショートカットキーはCtrl+Shift+P キー（Windows / Linux）または Command+Shift+P キー（Mac）
screenshotの種類
コマンドメニューを開いて「screenshot」と入力すると以下の4種類のスクリーンショットに関するコマンドが表示されます。
| コマンド | 内容 |
|---|---|
| Capture screenshot | 現在表示されている範囲のスクリーンショットを撮影します。 |
| Capture node screenshot | 選択した HTML 要素 (ノード) のスクリーンショットを撮影します。 |
| Capture area screenshot | 指定した領域のスクリーンショットを撮影します。 |
| Capture full size screenshot | Web ページ全体のスクリーンショットを撮影します。 |
使いたいコマンドをクリックすると使用することができます。
中でもCapture full size screenshotはスクロールが必要な画面を1枚のキャプチャに収めたいという時に便利です。
chromeでは拡張機能を使わずにキャプチャができるのは知らない方も多いのかもしれません。
最後に
スクリーンショットのコマンドだけではなくさまざまなコマンドがあるので、暇な時に色々みておくと使えることもあるかもしれません。
ぜひコマンドを活用してみてください。