> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Preview
> Preview を使用して、構築しながらウェブアプリを表示・操作する方法について学びましょう。
Preview はウェブアプリの出力を表示し、ブラウザの開発者ツールとデバッグ機能を提供します。
**実行**ボタンを使ってウェブアプリを起動すると、Replit はインターネット上でアクセス可能な一時URLを割り当てます。Preview ツールはブラウザで表示するのとまったく同じようにページをレンダリングします。また、人気のブラウザにある機能と同様の開発者ツールも含まれています。
Preview は Webview の新しい名前です。
## 機能
Preview には、ウェブアプリのテストとデバッグをシームレスに行うための以下の機能が含まれています：
* **ライブウェブビュー**：ブラウザタブを離れずにアプリを表示して操作できます
* **開発者ツール**：組み込みツールで問題を素早く診断できます
* **レスポンシブテスト**：異なるモバイルデバイスの画面サイズでアプリを表示できます
## 使用方法
Preview ツールはウェブアプリを実行すると自動的に開きます。
この動作は**User Settings**ツールの**Automatic Preview**設定で切り替えることができます。
以下の手順で Preview を開く方法を説明します。
左の**ツールドック**から：
1. 
**すべてのツール**を選択して、プロジェクトエディターのツール一覧を表示します。
2. 
**Preview** を選択します。
**検索バー**から：
1. 上部の
虫眼鏡を選択して検索ツールを開きます
2. "Preview" と入力してツールを見つけ、結果から選択します。
## ロケーションバー
**Preview** タブの上部にあるロケーションバーには、以下のツールが含まれています：
* **戻るボタン**：閲覧履歴の前のページに戻ります
* **進むボタン**：閲覧履歴の次のページに進みます
* **アプリドメイン**：`{...}.replit.dev` を選択して Replit App の一時URLに関する情報を表示します
* **アドレスフィールド**：現在のURLパスを表示したり、新しいパスを入力したりします
## ブラウザツール
ロケーションバーの右側にあるブラウザツールには、以下の機能が含まれています：
* **画面サイズ**：さまざまなデバイスの画面サイズプリセットから選択して、レスポンシブデザインをテストします
* **開発者ツール**：[開発者ツール](#Developer_tools)ペインを切り替えます
* **新しいタブ**：ウェブアプリのURLを新しいブラウザタブで開きます
**モバイルアプリを構築していますか？** Preview パネルでは、**iOSシミュレーター**や**Androidエミュレーター**でのプレビューもサポートしています。詳細は[ネイティブモバイルアプリ](/references/artifact-types/building-mobile-apps#preview-on-a-simulator-or-emulator)を参照してください。
## 開発者ツール
Eruda オープンソースプロジェクトによって動作する開発者ツールでは、以下のタスクを実行できます：
* アプリのコンテキストでJavaScriptコンソールを表示・操作する
* DOM要素を検査する
* ネットワークリクエストを監視する
* 表示と動作の設定を構成する
開発者ツールにアクセスするには、**Preview** タブの上部にある
**開発者ツール**
ボタンを選択して切り替えます。
以下のセクションでは、各開発者ツールタブで実行できる操作について説明します。
### Console
**Console** タブには、アプリケーションが生成したJavaScriptログが表示されます。
このタブでは、以下の操作が行えます：
* **出力のクリア**：
斜線付き円アイコンを選択して、すべてのコンソール出力を削除します。
* **出力のフィルタリング**：タイプ（全て、Info、Warning、Error）でフィルタリングしてコンソール出力を表示します。
* **テキストマッチングフィルター**：
フィルターアイコンを選択してテキストを入力し、一致する出力を表示します。
* **出力のコピー**：
コピーボタンを選択して、選択したコンソールメッセージをコピーします。
* **JavaScriptコードの実行**：
右角かっこを選択してアプリのコンテキストでJavaScriptコードを実行します。式を入力して**実行**を選択します。
### Elements
**Elements** タブでは、ウェブページのDOM構造を検査・変更できます。
* **要素の詳細を表示**：DOM要素の詳細とHTMLコード内の位置を表示します
* **出力のコピー**：コピーボタンを選択して、選択したコンソールメッセージをコピーします。
矢印選択を使用して選択モードを切り替えます。選択モードに入ったら、ウェブページ上の要素を選択します。
その要素のHTMLとCSSがElements タブに表示されます。
### Network
**Network** タブでは、ウェブページによって開始されたリクエストを監視します。
このタブでは、以下の操作が行えます：
* **リクエストの追跡**：アプリが開始したすべてのネットワークリクエストを表示します。リクエストを選択して詳細を表示します。
* **フィルタリング**：じょうごアイコンを選択してテキストを入力し、一致する結果を表示します。フィルターを空にするとクリアされます。
* **コピー**：コピーボタンを選択してストレージ情報をコピーします。
### Resources
**Resources** タブには、ページが読み込んだアセットとクッキーやローカルストレージなどのブラウザストレージが表示されます。
以下のアセットタイプのリストを表示・更新できます：
* JavaScriptファイル
* スタイルシート
* Iframe
* 画像
このタブでは、以下の操作が行えます：
* **ストレージを表示**：ローカルストレージ、セッションストレージ、クッキーを確認します。
* **フィルタリング**：じょうごアイコンを選択してテキストを入力し、一致する結果を表示します。フィルターを空にするとクリアされます。
* **クリア**：クリアボタンを選択して、そのストレージタイプのすべてのデータを削除します。
* **選択した項目を削除**：
「X」アイコンを選択してストレージアイテムを削除します。
* **コピー**：コピーボタンを選択してストレージ情報をコピーします。
### Settings
**Settings** タブでは、開発者ツールの外観と動作をカスタマイズできます。
このタブには以下のカスタマイズオプションが含まれています：
* **ツール設定**：各ツールタブに適用するオプションをカスタマイズします
* **JavaScriptコントロール**：JavaScriptをオフにしてアプリの動作をテストするなど、JavaScriptの動作オプションを指定します
* **表示設定**：開発者ツールのテーマ、パネルサイズ、透明度、その他の動作を変更します