chromeのDevToolsからスクリーンショットを撮る方法をメモ。
取得方法
DevToolsを開いて、右上のメニューからRun Commandを選択します。
もしくはWindowsの場合はCtrl + Shift + Pキー、Macの場合はCommand + Shift + Pキーがショートカットになります。
「Run >」の後に「screenshot」と入力します。
以下の4項目が選択できるかと思いますので、それぞれの違いを試してみます。
- Capture area screenshot
- Capture full size screenshot
- Capture node screenshot
- Capture screenshot
Capture area screenshot
Capture area screenshot は、エリア選択した上でのスクリーンショットになります。
この項目を選択するとカーソルが十字に切り替わるので、スクリーンショットを撮りたい範囲をドラッグ&ドロップで選択します。
この場合、以下のようなスクショがダウンロードされます。
Capture full size screenshot
Capture full size screenshot は、ページ全体のスクリーンショットになります。
画像サイズが大きいため実際のスクショは省略します。
Capture node screenshot
Capture node screenshot は、DevToolsのElementsタブで選択してる要素のスクリーンショットになります。
例えば1件目の記事を選択した状態でこの項目を選択すると、以下のようなスクショになります。
Capture screenshot
Capture screenshot は、スクロールバー含んだビューポート内のスクリーンショットになります。
コメントが承認されるまで時間がかかります。