20
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

Organization

ChromeデベロッパーツールでWebページのスクリーンショットをとる。拡張機能なしでね

拡張機能でWebページのスクリーンショットをとると

今まではChromeの拡張機能を使ってWebページのスクリーンショットをとっていたのですが、ウィンドウ内を全てまるっとキャプチャーされたり、使い勝手が悪かったりと悩みの種でした。そんな中で見つけたデベロッパーツールのキャプチャー機能が個人的にしっくりきたので紹介します。

しっくりきたポイント

  • 拡張機能をインストールしないでいい
  • ウィンドウサイズを細かく設定できる

おしいポイント

  • キャプチャーが1クリックでとれない

WebページのスクリーンショットをとるCapture screenshot

スクリーンショットをとりたいWebページを開いてデベロッパーツールを起動します。

デベロッパーツールを起動

Webページのウィンドウサイズを細かく設定できるようにデバイスツールバーを表示します。デバイスツールバーはデベロッパーツール左上のアイコンをクリックすると表示されます。

cap1.png

Qiitaのマイページはこのようになります。上部にあるUIで自由にウィンドウサイズを変更できます。

cap2.png

ウィンドウサイズが調整できたらいよいよスクリーンショットをとりましょう。デバイスツールバー右上の「・・・」の中にある「Capture screenshot」をクリックしてキャプチャーします。

cap3.png

とれました! ファイル名もどのサイズでキャプチャーしたのかわかるように良しなにつけてくれます。次の画像のファイル名はqiita.com-umi_kappa(iPhone 6 Plus).png)で保存されました。

qiita.com-umi_kappa(iPhone 6 Plus).png

ぴったりサイズでとれるけど、、、

やっぱりメニュー開いて「Capture screenshot」をクリックしてキャプチャーは少々めんどくさいですね。。今後のUI改善に期待します!

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
20
Help us understand the problem. What are the problem?