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を停止した後、プレビューリンクはもはや機能しません。

使用シナリオ

よくある質問

このページは役に立ちましたか?