Preview はウェブアプリの出力を表示し、ブラウザの開発者ツールとデバッグ機能を提供します。 実行ボタンを使ってウェブアプリを起動すると、Replit はインターネット上でアクセス可能な一時URLを割り当てます。Preview ツールはブラウザで表示するのとまったく同じようにページをレンダリングします。また、人気のブラウザにある機能と同様の開発者ツールも含まれています。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 は Webview の新しい名前です。
機能
Preview には、ウェブアプリのテストとデバッグをシームレスに行うための以下の機能が含まれています：- ライブウェブビュー：ブラウザタブを離れずにアプリを表示して操作できます
- 開発者ツール：組み込みツールで問題を素早く診断できます
- レスポンシブテスト：異なるモバイルデバイスの画面サイズでアプリを表示できます
使用方法
Preview ツールはウェブアプリを実行すると自動的に開きます。 この動作はUser SettingsツールのAutomatic Preview設定で切り替えることができます。 以下の手順で Preview を開く方法を説明します。Preview へのアクセス方法
Preview へのアクセス方法
左のツールドックから：
すべてのツールを選択して、プロジェクトエディターのツール一覧を表示します。
Preview を選択します。
- 上部の
虫眼鏡を選択して検索ツールを開きます - “Preview” と入力してツールを見つけ、結果から選択します。
ロケーションバー
Preview タブの上部にあるロケーションバーには、以下のツールが含まれています：- 戻るボタン：閲覧履歴の前のページに戻ります
- 進むボタン：閲覧履歴の次のページに進みます
- アプリドメイン：
{...}.replit.devを選択して Replit App の一時URLに関する情報を表示します - アドレスフィールド：現在のURLパスを表示したり、新しいパスを入力したりします
ブラウザツール
ロケーションバーの右側にあるブラウザツールには、以下の機能が含まれています：- 画面サイズ：さまざまなデバイスの画面サイズプリセットから選択して、レスポンシブデザインをテストします
- 開発者ツール：開発者ツールペインを切り替えます
- 新しいタブ：ウェブアプリのURLを新しいブラウザタブで開きます
モバイルアプリを構築していますか？ Preview パネルでは、iOSシミュレーターやAndroidエミュレーターでのプレビューもサポートしています。詳細はネイティブモバイルアプリを参照してください。
開発者ツール
Eruda オープンソースプロジェクトによって動作する開発者ツールでは、以下のタスクを実行できます：- アプリのコンテキストでJavaScriptコンソールを表示・操作する
- DOM要素を検査する
- ネットワークリクエストを監視する
- 表示と動作の設定を構成する
開発者ツール
ボタンを選択して切り替えます。
以下のセクションでは、各開発者ツールタブで実行できる操作について説明します。
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の動作オプションを指定します
- 表示設定：開発者ツールのテーマ、パネルサイズ、透明度、その他の動作を変更します