ビジュアルバグ報告
ビジュアルバグ報告ツール
バグを文章で説明するのはもうやめましょう。ビジュアルバグ報告では、チームがライブアプリ上の壊れた要素をクリックするだけ。Patchrooms が、開発者(またはエージェント)が再現して直すのに必要なものを自動で取得します。スクリーンショット、セレクタ、URL、コンソールの状態まで。バグ報告のスクリーンショットは自動で付きます。
サインインビジュアルバグ報告ツールとは?
手でバグ報告を書くのは遅く、情報が抜け落ちます。「ドロップダウンがずれている」だけでは、どのドロップダウンが、どのページで、どの状態でずれているのかが伝わらず、修正に時間がかかり、ときには違う要素を直してしまいます。
ビジュアルバグ報告ツールは、説明ではなく指し示すことで、この問題を解決します。レビューする人はライブアプリ上の要素を直接クリックし、Patchrooms が技術的なコンテキストを自動でまとめます。人でもエージェントでも、推測なしに読めるレポートになります。
バグをクリックする
レビューする人は、壊れた要素をライブアプリ上で直接クリックします。「どこにあるか」を文章で説明する必要はありません。バグそのものを指し示すだけです。
レビューする人にアカウントは不要で、必要なのはページのリンクだけ。テキストでも、自動で文字起こしされる音声メモでもコメントできます。
コンテキストは自動で取得(スクリーンショット付き)
Patchrooms は、クリックした瞬間に必要なものをまとめて取得します。バグ報告のスクリーンショットは自動で付き、手作業でのキャプチャや添付は不要です。
- スクリーンショット、クリックした要素の DOM セレクタ。
- ページ URL、ビューポート、ブラウザ、発生中のコンソールエラー。
- テキストコメント、または自動で文字起こしされる音声メモ。
- レポートごとのステータス:新規・トリアージ済み・対応中・クローズ。
開発者、またはエージェントが直す
各レポートは、技術的な詳細がすべて添付された Markdown としてエクスポートされます。だから修正は当て推量ではなく、狙った要素だけに向かいます。
開発者はレポートを開いてその要素を直します。あるいは Markdown を Claude Code・Cursor などのコーディングエージェントに貼り付けるか、既存のトラッカーに添付できます。誰も貼り付けずに回すなら、エージェントは MCP サーバー(list_reports / get_report)でキューを直接読めます。エージェントが読むテキストは英語です。
## Bug: Misaligned modal - **Element:** `div.confirm-modal` - **Comment:** Modal is offset ~24px to the right on desktop. - **Screenshot:** blob/scr_41bd.png - **URL:** https://staging.example.com/billing - **Console:** no errors
よくある質問
- ビジュアルバグ報告は何を取得しますか?
- スクリーンショット、クリックした要素のセレクタ、ページ URL、コンソールの状態を自動で取得します。手入力は不要です。
- 本番のライブアプリでも使えますか?
- はい。埋め込みはあなたが配信するどのページでも動きます。本番・ステージング・プレビュービルドを含みます。
- 今のイシュートラッカーを置き換えますか?
- トラッカーに流し込むことも、単独で使うこともできます。レポートは Markdown としてエクスポートでき、トラッカーやコーディングエージェントに貼るか、Patchrooms のダッシュボードでトリアージしたまま管理できます。
- レビューする人にアカウントは必要ですか?
- いいえ。レビューはアカウント不要で無料・無制限です。アカウントが必要なのは、ダッシュボードでバグをトリアージする人だけです。