ビジュアルバグ報告

ビジュアルバグ報告ツール

バグを文章で説明するのはもうやめましょう。ビジュアルバグ報告では、チームがライブアプリ上の壊れた要素をクリックするだけ。Patchrooms が、開発者(またはエージェント)が再現して直すのに必要なものを自動で取得します。スクリーンショット、セレクタ、URL、コンソールの状態まで。バグ報告のスクリーンショットは自動で付きます。

サインイン

ビジュアルバグ報告ツールとは?

手でバグ報告を書くのは遅く、情報が抜け落ちます。「ドロップダウンがずれている」だけでは、どのドロップダウンが、どのページで、どの状態でずれているのかが伝わらず、修正に時間がかかり、ときには違う要素を直してしまいます。

ビジュアルバグ報告ツールは、説明ではなく指し示すことで、この問題を解決します。レビューする人はライブアプリ上の要素を直接クリックし、Patchrooms が技術的なコンテキストを自動でまとめます。人でもエージェントでも、推測なしに読めるレポートになります。

バグをクリックする

レビューする人は、壊れた要素をライブアプリ上で直接クリックします。「どこにあるか」を文章で説明する必要はありません。バグそのものを指し示すだけです。

レビューする人にアカウントは不要で、必要なのはページのリンクだけ。テキストでも、自動で文字起こしされる音声メモでもコメントできます。

コンテキストは自動で取得(スクリーンショット付き)

Patchrooms は、クリックした瞬間に必要なものをまとめて取得します。バグ報告のスクリーンショットは自動で付き、手作業でのキャプチャや添付は不要です。

  • スクリーンショット、クリックした要素の DOM セレクタ。
  • ページ URL、ビューポート、ブラウザ、発生中のコンソールエラー。
  • テキストコメント、または自動で文字起こしされる音声メモ。
  • レポートごとのステータス:新規・トリアージ済み・対応中・クローズ。

開発者、またはエージェントが直す

各レポートは、技術的な詳細がすべて添付された Markdown としてエクスポートされます。だから修正は当て推量ではなく、狙った要素だけに向かいます。

開発者はレポートを開いてその要素を直します。あるいは Markdown を Claude CodeCursor などのコーディングエージェントに貼り付けるか、既存のトラッカーに添付できます。誰も貼り付けずに回すなら、エージェントは 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 のダッシュボードでトリアージしたまま管理できます。
レビューする人にアカウントは必要ですか?
いいえ。レビューはアカウント不要で無料・無制限です。アカウントが必要なのは、ダッシュボードでバグをトリアージする人だけです。