---
title: プレビューと開発サーバー
description: 実行中の開発サーバーを OpenChamber の中で開きます。
---

# プレビューと開発サーバー

開発サーバーを起動すると、OpenChamber は別のブラウザタブではなくアプリ内でそれを開けます。チャットの隣にサイトを表示したまま、要素を指し示して質問できます。

## 開発サーバーを開く

ヘッダーの地球儀ボタンからブラウザパネルを開きます。開発サーバーがすでに動いていれば一覧に表示され、クリックひとつで開けます。OpenChamber はマシン上で実際に待ち受けているものから見つけるので、どうやって起動したかに関係なく機能します。

次の場合にも開発サーバーは自動で開きます。

- ターミナルのローカルアドレスで **プレビューを開く** を押したとき
- 自動オープンを有効にした[プロジェクトアクション](/project-actions/)が起動したとき
- チャットメッセージ内のローカルリンクをたどったとき

アドレスはいつでも自分で入力できます。`localhost:5173` のようにスキームを省いた入力は `http://` として扱われます。

## リモートの OpenChamber を使う場合

OpenChamber が別のマシンで動いているとき、開発サーバーも*そちら*のマシンにあります。手元のノートPCの `localhost` はまったく別の場所を指します。デスクトップアプリはこれを引き受けます。ローカルポートを開いてリモートの開発サーバーまで接続を通すので、ページは普通に読み込まれ、ホットリロードも開発者ツールも動きます。入力するアドレスは期待どおりのままで、裏側の仕組みが邪魔をすることはありません。

これにはデスクトップアプリが必要です。ブラウザのタブでは、自分のマシン上の開発サーバーだけを開けます。

## ページに注釈を付ける

要素を指し示す、ページに描き込む、それらをまとめてチャットへ送る方法は[ブラウザパネル](/desktop-browser/)を参照してください。

## 関連

- [プロジェクトアクション](/project-actions/) — 起動時にサーバーを自動で開く
- [ブラウザパネル](/desktop-browser/) — ページへの注釈とエージェントによる操作