proofrogにはChrome拡張機能があります。
これは、今見ているWebサイトのスクリーンショットを自分のproofrogのワークスペースにアップロードする拡張機能です。
Webサイトを即座にアップロードできますので、手軽に製作中のWebサイトを比較することができます。
ここではChrome拡張機能の使用方法についてご説明します。

proofrogのChrome拡張機能のインストール方法については、以下のリンクを参照してください。
http://help.proofrog.cloud/ja/articles/3740617

proofrog-chrome-extension の使用方法

まず、はじめにスクリーンショットを撮りたいWebサイトを開きます。

右上のChrome拡張機能一覧にあるproofrogのアイコンをクリックすると以下のようなメニュー画面が表示されます。

APIキーを登録する

Chrome拡張機能をインストールしたばかりでは、Webサイトのスクリーンショットを撮って自分のワークスペースに上げることができません。
まず、このChrome拡張機能を自分のワークスペースにひもづけるために、APIキーを登録する必要があります。

ワークスペースのAPIキーの取得方法については、以下のサイトを参照してください。
この拡張機能では 読み込み&書き込み権限 が必要になります。注意してください。

APIキーを登録する をクリックして、取得したAPIキーをフォームに入力して、登録してください。 

また、一度APIキーを登録しても、別のワークスペースのAPIキーを登録しなおせば、別のワークスペースにスクリーンショットをアップロードすることができます。

ワークスペースにスクリーンショットをアップロード

画面を撮影する をクリックすると、現在開いているWebサイトのスクリーンショットが撮影され、以下のようなページが開かれます。
スクリーンショットは自動でページスクロールが行われてページ全体に対して行われます。

右上のアイコンから各種操作を行います。

  • ワークスペースにアップロード
  • PCに画像を保存(PNG形式)
  • APIキーの設定

ワークスペースにアップロード をクリックすると、どのワークスペースにスクリーンショットをアップロードするかの選択ダイアログが表示されます。
中央のリストから、アップロード先のワークスペースを選択して アップロード をクリックしてください。

また、新しくワークスペースを作成し、そのワークスペースに対してスクリーンショットをアップロードすることもできます。
+ワークスペースを追加してアップロード
を選択して、新しいワークスペースの 名前・備考 を入力し、アップロードをクリックしてください。

これで、今開いていたWebサイトのスクリーンショットを選択したワークスペースにアップロードすることができました。

例えば、「Chrome拡張機能で作ったワークスペース」としてアップロードしてみます。
実際にproofrogのワークスペースを見てみると、新ワークスペースが作成されて、アップロードしたWebサイトのスクリーンショットがアップロードされていることが確認できます。

これで、Chrome拡張機能の使用方法についての説明は終了です。

この拡張機能を用いて、製作中のWebサイトなどのスクリーンショットを随時アップロードし、比較処理を行うことで、手軽にバージョン管理や修正結果の確認を行うことができます。

比較プロジェクトの作成方法については、以下のページを参照してください。

回答が見つかりましたか?