1ヶ月ほど前になりますが、Google Chrome で バージョン62がリリースされました。

今回は、バージョン62で地味に便利なった Google Chrome の Developer Tools を利用したスクリーンショットの取得方法の紹介になります。

DOM を指定したスクリーンショット取得方法

今回新たに Developer Tools で DOM を指定してスクリーンショットが取得できるようになりました！

まずは、おなじみの Developer Tools を開きます。

その次に、「Elements」タブを選択し、一番左側の矢印マークをクリックし DOM を選択できる状態にします。

今回は当社、エンジニアブログの最新の記事部分を取得します。

取得したい箇所でマウスをクリックすると、Elements の中の DOM Tree の該当の箇所が選択された状態になります。

この状態のまま、Mac の方は 「Cmd + Shit + P」、Windows、Linux の方は「Ctrl + Shift + P」を押すと、真ん中に 「Console Menu」と呼ばれるものが表示されますので、ここに「Capture node screenshot」と入力します。
（「node」と入力すれば選択肢が表示されます）

そのまま、Enter キー でスクリーンショットがダウンロードできます

実際のスクリーンショットが以下になります

どうでしょうか、この画像だけではわかりにくいかもしれませんが、margin が削除されたものが取得されるようですね

使い所に悩むかもしれませんが、Developer Tools を利用してデバッグやテストしている状態であれば、この取得方法も選択肢に加わってくるのではないでしょうか

[番外編] FireFox Quantum でのスクリーンショット取得方法について

Google Chrome から乗り換えを検討している方もいらっしゃるのではないでしょうか。
噂の FireFox Quantum でのスクリーンショット取得方法になります

URL 部分のアイコンをクリックすると、「スクリーンショットを撮る」が表示されますのでこちらをクリックします

取得したい箇所にマウスを持っていくと白枠で囲ってくれます（便利！）

該当箇所でクリックすると、
下矢印のアイコンでダウンロードでき、保存をクリックすると共有ができるように画像がFirefox Screenshotsで共有されます

FireFox Quantum すごいですね！

一部のアドオンがうごかくなったりということもあるようですが、新規で FireFox を利用するのならばかなり便利だと思います。

いかがでしょうか、各ブラウザがいろいろ競い合いながら便利になると開発者としてはとてもうれしいですね！（ブラウザの挙動などついていくのが大変ですが、、）