Chromeの開発者ツールを使って特定のDOM要素だけスクリーンショットする方法 - Qiita

特定のDOM要素のみスクショする機能がChromeにあるってことをさっき知りました。 大変便利だったので書き留めます。 元ネタ: Chrome DevTools: Capture the screenshot of a specific element /dev tips 特定DOM要素をスクショする方法 例えばQiitaのあるコードブロックだけ撮影したいとします。 Command + Shift + i で開発者ツールを起動して自力で選択 または 右クリック → 検証 として開発者ツールのElementsタグを開き、DOMが選択されている状態にします。 この状態で Command + Shift + p を押すと文字入力欄が開くので、 node screenshotと打ち込むと、打ってる途中で Mobile Capture node screenshot という選択肢が絞りこめます。 ク

[rAdio]

便利。

[kuracom]

縦に長ーい要素を切り取るのに便利そう

[iguchi1124]

便利

[daruyanagi]

自動化したい

[ttskch]

一瞬便利そうな気がしたけど普通にめんどくさくなって手で範囲選択しそうって思い直した

[hatappi1225]

めっちゃ便利!!

[side_tana]

へ〜

[unarist]

Ctrl+Shift+Pで呼べるコマンドがあるという話。というかページ全体のスクショも同様にできるのか。

[tmatsuu]

うえーまじか。最高かよ。headless chromeでもできたりしないかな。

[karatte]

ページ全体のスクショもデベロッパーツールでいけるしこういうの何気に便利