Entry Product

DOMのスナップショットも取れるChrome拡張「Save Page State」を使ってみた

2019-04-30

author:

DOMのスナップショットも取れるChrome拡張「Save Page State」を使ってみた

分析のため、ページをまるごと保存しておきたい時はないでしょうか。そんな時便利なChrome拡張「Save Page State」を使ってみました。

◆ Chrome拡張「Save Page State」
https://chrome.google.com/webstore/detail/save-page-state/aokllhajmkihfihciggkmpgdhgecgaic

導入

Chromeに追加、説明不要ですね。

あとは、キャプチャしたい画面で追加したボタンをクリックするだけ。非常に簡単ですね。

成功するとキャプチャしたデータが保存されます。これで分析やコードの共有も簡単になりますね。

  • dom・・・スナップショットしたhtml
  • layout・・・スナップショットしたmhtml
  • metadata.txt・・・タイトルなどのメタ情報
  • screenshot.png・・・画面のキャプチャ

ちなみに、Save Page Stateはオープンソースとしても提供されています。

◆ GitHub「Save Page State」
https://github.com/vrtdev/save-page-state

リモートワークでUIの細かい部分のニュアンスが伝わらないなど、困ったときは使ってみてください。