今回は私が普段使っている便利なコマンドについて紹介したいと思います。

コマンドを使うステップ

デベロッパーツールを開く
1. ショートカットキーはCtrl+Shift+Iもしくは F12 キー（Windows / Linux）またはCommand+Option+I（Mac）
コマンドメニューを開く
1. ショートカットキーは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では拡張機能を使わずにキャプチャができるのは知らない方も多いのかもしれません。

スクリーンショットのコマンドだけではなくさまざまなコマンドがあるので、暇な時に色々みておくと使えることもあるかもしれません。
ぜひコマンドを活用してみてください。