ブラウザープレビュー
ローカルアプリケーションをプレビューし、ブラウザタブを管理し、Dream内でページを検証する。
Dreamのブラウザは、プロジェクトとともにウェブページを開き、チャットを実行します。これを使って、エージェントがコードを修正している間、ローカルアプリケーションを確認できます。
アプリケーションをプレビューする#
- ターミナルで、プロジェクトの通常の起動コマンドを使ってアプリケーションを起動してください。
- アプリケーションが印刷するローカルURLをコピーし、そのポートを含めてください。
- 右のツールバーで ブラウザ をクリックしてください。
- アドレスバーにURLを入力して Enter を押してください。
ページはワークスペース内に開きます。アプリケーションが次の実行時に異なるポートを使用する場合、そのアドレスを更新してください。DreamのブラウザがURLを開きますが、アプリケーションは開始されません。
ブラウザのタブを使用する#
新しいタブをクリックして別のページを開き、タブを選択してそのタブに切り替えることができます。これは、ブラウジング履歴に2つのルートを同時に表示できるようにするのに便利です。
戻る、進む、およびブラウザを更新を使用してナビゲートします。個々のタブをその閉じるコントロールを使って閉じます。ブラウザパネルを隠すことで、後で開いているタブに戻れます。
確認し、見ている内容を共有してください#
ブラウザアクションには以下のものがあります：
| アクション | それを使って… |
|---|---|
| DevTools を開く | ページのコンソール、要素、ネットワーク活動を確認する |
| スクリーンショットを撮る | バグレポートまたはさらなる議論のためページをキャプチャする |
| ズームイン / ズームアウト / ズームリセット | プレビューの表示スケールを調整する |
| システムブラウザで開く | 通常のブラウザで現在のURLを表示する |
全体のページのスクリーンショットをエージェントに提供する必要がある場合は、チャットの添付コントロールを使用します。より多くのスペースが必要な場合はブラウザを展開し、小さなビューに戻したい場合はブラウザを折りたたむします。
チャットに要素を送信する#
- ブラウザのツールバーで 要素を選択してチャットに送信 をクリックしてください。
- ページをマウスでオーバーすると要素をアウトラインできます。検討したい要素をクリックしてください。キャンセルするには Escape を押してください。
- チャットに送信フォームにコメントをタイプし、別々の会話を作りたい場合は新しいチャットを有効にし、送信します。
Dreamは、コメントを要素のセレクタ、サイズ、テキスト、スタイル、HTMLおよびその要素のスクリーンショットと共に送信し、アグエントがコード内でその要素を特定できるようにします。詳細および制限についてはチャットへのフィードバックを参照してください。
エージェントにブラウザを使用してもらう#
Claude Code、Codex、OpenCode、およびGrokのチャットは、Dreamのブラウザに自動的にツールを提供します。これらは、同じプロジェクトブラウザタブと併用されます。Cursorのチャットにはこれらのツールが提供されません。
エージェントにページURLと具体的なタスクを渡してください、例えば：
Dream のブラウザーで http://localhost:3000/settings を開いてください。テーマを変更し、ページを再読み込みして、選択したテーマが維持されるか確認してください。維持されない場合は、コンソールとネットワークリクエストを調べてください。
これらのツールはタブを開くおよびナビゲートできるだけでなく、ページのコンテンツを検証し、クリック、入力、ホバー、オプションを選択、スクロール、スクリーンショットを撮影し、コンソールログおよびネットワークレスポンスを検証できる。また、プロジェクト内のパスを使用してプロジェクトからファイルを添付してアップロードできるコントロールも付与される。
アプリケーションを開始してから、エージェントがローカルURLを検証する前にそのアプリケーションを開始してください。ブラウザアクションはチャットの権限に従います。承認が求められた場合はチャット内で応答してください。これらのツールは組み込みであり、手動でMCPサーバ定義を設定する必要はありません。
サイトデータを再読み込みし、クリアする#
アプリケーションコードを変更した後は、通常のリフレッシュを試してください。ページが依然として古く見える場合は、ブラウザアクションから強制再読み込みを使用してください。
キャッシュを消去はキャッシュされたブラウザデータを削除します。Cookie を消去はCookieをクリアし、埋め込まれたブラウザでサイトからログアウトできる場合があります。キャッシュや認証動作を調査する際には、これらの操作を慎重に使用してください。
ローカルページが読み込まれない場合#
アプリケーションがまだ実行されているか確認し、そのターミナル出力でフルURLとポートを確認し、その中でサーバーエラーがあるかどうかをチェックする。同じアドレスをあなたのシステムブラウザで試して、問題がアプリケーション自身にあるか、埋め込まれたプレビューにあるかを絞り込む。