​
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. プロジェクトに index.html を含む複数の HTML ファイルがある場合は、ファイル名を URL に追加して直接プレビューできます。たとえば、https://xxx.labex.io/another-file.html です。
  6. 「新しいタブで開く」ボタンをクリックして、プレビューを新しいタブで開くことができます。新しいブラウザタブでプレビューが開きます。

「Go Live」は自動的に以下を実行します。

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

ヒント：LabEx VM はポート 8080 でプレビューをホストします。他の人とプレビューリンクを共有して、作業を紹介できます。ラボ VM が停止すると、プレビューリンクは機能しなくなります。

​
使用シナリオ

​
よくある質問