​
WebIDE プレビュー

WebIDE 環境は、以下の場合に特に便利です。

  1. 様々なプログラミング言語（Java、JavaScript、Python など）でコードを書き、デバッグすること
  2. リアルタイムプレビュー機能付きの Web 開発プロジェクト（WebIDE で最初の HTML ページを作成するを参照）
  3. 直感的なインターフェイスを通じてプロジェクトファイルとディレクトリを管理すること
  4. コマンドラインタスク用の統合端末操作

​
環境レイアウト

WebIDE インターフェイスは、いくつかの重要なコンポーネントで構成されています。

  1. 左サイドバー：
    • プロジェクトナビゲーション用のファイルエクスプローラ
    • 検索機能
    • Git 操作用のソースコントロール
    • 拡張機能パネル
  2. エディタエリア：メインのコーディングワークスペース
  3. ボトムパネル：端末、問題、出力
  4. ステータスバー：設定とリアルタイムプレビューへのクイックアクセス
  5. トップメニューバー：ファイル、編集、表示、その他のオプション

​
端末アクセス

端末を開く方法は 2 通りあります。

  1. 左下隅の アイコンをクリックし、「ターミナル」タブに切り替えます。
  2. トップメニューを使用します：「ターミナル」>「新しいターミナル」

​
HTML をプレビューする

HTML ファイルをプレビューするには：

  1. WebIDE で、右下隅の「Go Live」ボタンをクリックします。
  2. 新しいブラウザタブが開き、HTML ページがレンダリングされます。
  3. または、「Web 8080」タブをクリックしてプレビューを開くこともできます。
  4. サブディレクトリ内のプロジェクトの場合、エクスプローラー内のサブディレクトリ名をクリックすることでアクセスでき、そのディレクトリ内の index.html ファイルが自動的にプレビューされます。
  5. プロジェクトに複数の HTML ファイル（index.html を含む）がある場合、URL にファイル名を追加して直接プレビューすることができます。たとえば、https://xxx.labex.io/another-file.html。
  6. 「新しいタブで開く」ボタンをクリックすることで、新しいタブでプレビューを開くことができます。新しいブラウザタブでプレビューが開きます。

「Go Live」は自動的に：

  • Web サーバーを起動します
  • コードを変更するときにリアルタイム更新を提供します

ヒント：LabEx VM は 8080 番ポートでプレビューをホストしています。他の人に自分の作業を紹介するために、プレビューリンクを共有することができます。ラボ VM を停止した後、プレビューリンクはもはや機能しません。

​
使用シナリオ

​
よくある質問