14
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ブラウザの開発者モードで特定箇所のスクショを撮る

Last updated at Posted at 2023-05-18

はじめに

ブラウザのスクリーンショットを撮りたい時にわざわざ拡張機能などをインストールするのはちょっとだるいですよね

簡単に特定の部分だけ(もちろん画面全体も)スクショを撮る方法を知ったので記録しておきます。

やりかた

今回はTwitterのツイートセルの1つだけスクショ撮ってみます

① 右上にあるメニュー開けそうなボタンを押します
(画像はのブラウザはBraveです。他のブラウザでも同じような場所にあると思います)
スクリーンショット 2023-05-18 19.45.40.png

② 「その他のツール」を選択します
③ 「デベロッパーツール」を選択します
スクリーンショット 2023-05-18 19.48.22.png

④ 四角に向かって矢印があるマークを押します
スクリーンショット 2023-05-18 19.53.45.png

⑤ スクショを撮りたい箇所にフォーカスを当てて選択します
スクリーンショット 2023-05-18 19.55.01.png

⑥ 選択すると該当のHTMLが青くなります
スクリーンショット 2023-05-18 19.56.02.png

⑦ 青くなってる箇所を右クリックします
⑧ 「Capture node screenshot」を選択します
スクリーンショット 2023-05-18 19.57.43.png

⑨ 「保存」を選択します
スクリーンショット 2023-05-18 19.59.17.png

こんな感じで綺麗にツイート部分だけスクショをすることができました!!
twitter.com_SNQ2001.png

おわり

このスクショ撮るときにこの使いました笑

14
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?