Help us understand the problem. What is going on with this article?

Chrome 62 でキャプチャが簡単にできるようになりました

Chrome 62 より Chrome Dev Tool で選択範囲のスクリーンショットができるようになりました。
意外とLGTMがあったので記事を簡潔に再編集しました。

キャプチャの手順

  1. Command + Option + i で Dev Tools を開く
  2. Command + Shift + P でコマンドウィンドウを表示
  3. capture とか screenshot などのキーワードを入力しコマンドを選択 image.png

※ Windows の場合は Command → Ctrl に読み替え

選択できるコマンドとキャプチャの種類は以下のとおりです。

コマンド キャプチャの種類
Capture area screenshot マウスの選択範囲をキャプチャ
Capture full size screenshot ページ全体をキャプチャ
Capture node screenshot Element mode で選択している要素をキャプチャ
Capture screenshot 表示中のウィンドウサイズでキャプチャ

キャプチャ画像はいずれもPNG形式で、ダウンロードフォルダに保存されます。

zyyx-matsushita
フロントエンドエンジニア Happy hacking!
https://www.zyyx.jp/
zyyx
新しい世界の核心に触れるために。我々ジークスは、技術と感性で、テクノロジーがもたらす新しい世界を作り続けます。
https://www.zyyx.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away