WebIDE 预览

WebIDE Preview WebIDE 环境特别适用于:
  1. 用各种编程语言(Java、JavaScript、Python 等)编写和调试代码
  2. 具有实时预览功能的 Web 开发项目,请参阅 在 WebIDE 中创建您的第一个 HTML 页面
  3. 通过直观的界面管理项目文件和目录
  4. 用于命令行任务的集成终端操作

环境布局

WebIDE 界面由几个关键组件组成:
  1. 左侧边栏:
    • 用于项目导航的文件资源管理器
    • 搜索功能
    • 用于 Git 操作的源代码管理
    • 扩展面板
  2. 编辑器区域:主要编码工作区
  3. 底部面板:终端、问题和输出
  4. 状态栏:快速访问设置和实时预览
  5. 顶部菜单栏:文件、编辑、查看和其他选项

终端访问

您可以通过两种方式打开终端:
  1. 点击左下角的 图标,切换到终端选项卡; Terminal Access
  2. 使用顶部菜单:终端 > 新建终端 Terminal Access

预览 HTML

要预览您的 HTML 文件:
  1. 在 WebIDE 中,单击右下角的“Go Live”按钮。 Go Live button in WebIDE
  2. 将打开一个新浏览器标签页,其中呈现您的 HTML 页面。 HTML page rendered in browser tab
  3. 或者,您可以单击“Web 8080”选项卡以打开预览。 WebIDE Web 8080 tab preview
  4. 如果您的项目位于子目录下,您可以通过单击资源管理器中的子目录名称来访问它,然后它将自动预览该目录中的 index.html 文件。 WebIDE subdirectory preview
  5. 如果您的项目有多个 HTML 文件,包括 index.html,您可以将文件名附加到 URL 以直接预览它。例如,https://xxx.labex.io/another-file.htmlWebIDE multiple HTML files preview
  6. 您可以通过单击“在新标签页中打开”按钮在新标签页中打开预览。它将在新的浏览器标签页中打开预览。 WebIDE Open in New Tab
“Go Live”将自动:
  • 启动 Web 服务器
  • 在您修改代码时提供实时更新
提示:LabEx VM 在端口 8080 上托管预览。您可以与他人共享预览链接以展示您的工作。在您的 lab vm 停止后,预览链接将不再起作用。

使用场景

常见问题解答