Bugpilot

Bugpilotとは？

Bugpilotは、ブラウザのデバッグ文脈を記録し、AIアシスタント向けの構造化Markdownに変換するChrome拡張です。コンソール出力、ネットワークリクエスト、DOM状態、バグに至る一連のユーザー操作を収集し、ClaudeやChatGPTのようなツールに1つのレポートとして貼り付けられるようにします。

この製品は、AIに再現に必要な情報が不足しているときに起こりがちなやり取りを減らすために設計されています。スクリーンショット、コンソールログ、ネットワーク情報を手作業で集める代わりに、ユーザーはセッションを記録して問題を再現し、キャプチャを停止して、AIが読み取れる形式で結果を出力します。

主な機能

• エラー、警告、ログ、タイムスタンプ、スタックトレースを含むコンソールイベントを記録し、デバッグ文脈を1か所にまとめます。
• URL、メソッド、ステータスコード、レスポンスのプレビュー付きでネットワークリクエストを取得し、不具合発生時にアプリが何をしていたかを記録します。
• キャプチャ時点のouter HTMLやクリックされた要素を含むDOM文脈を保存し、問題の背後にあるUI状態の説明に役立てます。
• クリック、フォーム入力、ナビゲーションなどのユーザー操作をログに残し、文章化した要約に頼らず再現手順をたどれるようにします。
• 必要に応じて、記録開始時、コンソールエラー時、停止時にWebPフレームとしてスクリーンショットを保存し、各フレームをトリガーイベントに結びつけるタイムラインメタデータを付与します。
• 保存前に、パスワード、メールアドレス、クレジットカード番号、JWT、APIキー、Authorizationヘッダー、URLトークンを自動的にマスキングします。
• Proプランでは、Markdown以外にもClaude XML、OpenAI JSON、単一ファイルHTML、Markdown＋JSONのZIPバンドルでエクスポートできます。
• ブラウザ内でローカル実行され、アカウント、サーバー、テレメトリー、トラッキング、アナリティクスは不要なため、キャプチャはエクスポートするまでユーザーの端末内に残ります。

Bugpilotの使い方

Chrome拡張をインストールし、Webアプリで不具合に遭遇したらポップアップを開きます。Recordをクリックして問題を再現し、Stopをクリックして、キャプチャをMarkdownまたは対応形式でコピーします。

出力をClaudeやChatGPTなどのAIコーディング支援ツールに貼り付けるか、後で確認できるようレポートとして保存します。必要に応じて、コピーやダウンロードの前にスクリーンショットを有効にするか、Proのエクスポート形式を使用します。

利用例

• AIアシスタント向けのバグ報告を作成する: 開発者が問題を一度記録し、ログを手作業でまとめる代わりに構造化された出力をClaudeやChatGPTに貼り付けます。
• チームメイトと再現用パッケージを共有する: キャプチャされたユーザー操作、コンソール出力、ネットワークリクエストにより、別の開発者が同じ手順を追いやすくなります。
• UI操作の不具合を調査する: DOM状態とクリック対象の取得により、問題に実際に関与した要素を説明しやすくなります。
• APIやリクエストの失敗をデバッグする: ネットワークタイムラインが、失敗を引き起こしたユーザー操作と並んで、リクエスト詳細やステータスコードを表示します。
• 深いデバッグのためにフレームワーク状態を取得する: Proプランには、コンソールログだけでは不十分なケース向けに、Reactコンポーネントツリー、props、hook stateが含まれます。

FAQ

Bugpilotはブラウザ内で動作しますか、それともサーバー上ですか？ ブラウザ内でローカル動作します。ソースでは、サーバー、テレメトリー、トラッキング、アナリティクスはないとされています。

Bugpilotは何をエクスポートしますか？ 無料版はMarkdownをエクスポートでき、スクリーンショット付きのZIPをダウンロードできます。Proプランでは、Claude XML、OpenAI JSON、HTML、Markdown/JSONをまとめたZIP出力など、いくつかのAI向け形式が追加されます。

マスキングは任意ですか？ いいえ。ソースではマスキングは常に有効で、無効化できないとされています。

Bugpilotにアカウントは必要ですか？ ソースではアカウントは不要とされています。

どのアシスタントを対象にしていますか？ Claude、ChatGPT、Cursor、およびMarkdownやProのエクスポート形式を読めるその他のAIコーディングツール向けに位置付けられています。

代替案

• 手動のDevTools取得: スクリーンショット、コピーしたコンソール出力、貼り付けたネットワーク詳細を手作業でまとめられますが、作業は遅く、構造化も弱くなります。
• 汎用のバグ報告ツール: これらはスクリーンショットやフォームベースの報告の収集に重点を置くことが多く、AI利用のためにコンソール、ネットワーク、DOM、操作履歴をまとめる用途には向きません。
• セッションリプレイやエラーモニタリングツール: デバッグには役立ちますが、通常はアシスタント向けのコピペ用レポートよりも可観測性や再生を中心にしています。
• プレーンなMarkdownメモ: 開発者は再現手順を書いてログを手動で貼れますが、その方法ではブラウザ状態の自動取得や機密値のマスキングは行われません。