バグ報告では、問題が見える部分だけをキャプチャし、何がおかしいかを示し、非公開の情報を隠してから画像を issue に貼り付けます。OpenScreenShot では、キャプチャに選択範囲または要素をキャプチャを、印付けに矢印と手順番号のツールを、マスク処理にぼかしの塗りつぶしを使います。スクリーンショットにはアドレスバーが写らずページの内容だけが写るため、URL、ブラウザ、再現手順は issue の本文に書きます。
バグをキャプチャして印を付ける手順
- ページを開き、不具合が起きる状態にします。問題を隠しているバナーは閉じます。
- ページを右クリックし、OpenScreenShot サブメニューを開いて、選択範囲または要素をキャプチャを選びます。初期設定では、ツールバーのアイコンをクリックするとページ全体がキャプチャされます。
- 範囲の場合は、場所が分かる程度に周囲の画面も含めて、問題の周りに矩形をドラッグします。
Enterを押して確定します。要素の場合は、目的のカード、表、フォームが枠で囲まれるまでポインターを合わせ、クリックするかEnterを押します。 - エディタで、不具合のある箇所に矢印（
A）を追加します。再現に何回かクリックが必要なバグでは、操作ごとに手順番号（S）を追加します。 - ぼかし（
B）を選び、マスクで塗りつぶしを選んで、アクセス トークン、メールアドレス、アカウント名、社内のホスト名を覆います。 - コピーをクリックするか
Ctrl+C（macOS では⌘C）を押し、画像を issue に貼り付けます。
要素モードでは、↑ で親要素を、↓ で子要素を選択できます。枠が小さすぎるか大きすぎるラッパー要素に合ったときに役立ちます。要素の全体が画面に表示されていない場合、ピッカーは代わりにページ全体のキャプチャを提案します。
ホバー状態、ドロップダウン、ツールチップをキャプチャする
メニューやツールチップは、別の場所をクリックすると閉じることがよくあります。ポップアップまたは設定で遅延を 3 秒、5 秒、10 秒のいずれかにしてキャプチャを開始し、ツールバーのバッジのカウントダウンが終わる前にメニューを開きます。
遅延は範囲の選択が始まる前に適用されるため、ドラッグでメニューが閉じることがあります。ホバー状態には、遅延を設定した表示領域を使い、あとで切り抜き（C）で切り抜きます。範囲を一度選択してから、遅延を設定して右クリック メニューの前回の範囲を再キャプチャを使う方法もあります。ドラッグし直さずに同じ矩形をキャプチャできます。
クリップボード アクションでエディタを省略する
印を付ける必要がないスクリーンショットでは、ポップアップまたは設定でキャプチャ後をクリップボードにします。キャプチャはそのままクリップボードに送られ、ツールバーのバッジで確認できます。Ctrl+V または ⌘V で画像を issue に貼り付けます。
この設定はキーボード ショートカットと右クリック メニューにも適用されます。注釈やマスク処理が必要なときはエディタに戻します。クリップボードへのキャプチャではマスク処理の手順を省略するため、キャプチャする前にページに非公開のデータがないか確認してください。
スクリーンショットと一緒に書くこと
スクリーンショットは何が起きたかを示します。開発者が再現するために必要な背景は issue の本文で伝えます。
- ページの URL（非公開のクエリ パラメーターは削除する）
- ブラウザ名とバージョン、オペレーティング システム
- 再現手順（画像の手順番号と同じ順序で）
- 期待した動作と、実際に起きたこと
- ページがライブ データを表示している場合は、問題が起きた時刻
1 枚のスクリーンショットには 1 つの問題だけを入れます。同じ画像に 2 つ目のバグがあると、矢印がどちらを指しているのか分かりにくくなります。
制限事項
ぼかしとモザイクはピクセルをぼかしますが、短い文字列の手がかりが残ることがあります。塗りつぶしは書き出した画像で範囲を完全に覆います。結果の確認方法はマスク処理のガイドで説明しています。ブラウザの内部ページやその他の保護されたページでは、拡張機能によるキャプチャがブロックされます。サポートと既知の制限事項を参照してください。
選択の操作はキャプチャ モードのリファレンスで、すべてのツールとショートカットは注釈のリファレンスで確認できます。問題を報告したユーザーへの返信については、カスタマー サポート用のスクリーンショットを参照してください。バグを動きで見せる場合は、製品デモ動画を参照してください。