chromeのDevToolsでスクリーンショットを取得する

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 は、スクロールバー含んだビューポート内のスクリーンショットになります。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031