Vista previa de WebIDE

El entorno WebIDE es particularmente útil para:

  1. Escribir y depurar código en varios lenguajes de programación (Java, JavaScript, Python, etc.)
  2. Proyectos de desarrollo web con capacidad de vista previa en vivo, consulte Cree su primera página HTML en WebIDE
  3. Administrar archivos y directorios de proyecto a través de una interfaz intuitiva
  4. Operaciones de terminal integradas para tareas de línea de comandos

Disposición del entorno

La interfaz de WebIDE consta de varios componentes clave:

  1. Barra lateral izquierda:
    • Explorador de archivos para la navegación del proyecto
    • Funcionalidad de búsqueda
    • Control de código fuente para operaciones de Git
    • Panel de extensiones
  2. Área del editor: Espacio de trabajo principal de codificación
  3. Panel inferior: Terminal, problemas y salida
  4. Barra de estado: Acceso rápido a configuraciones y vista previa en vivo
  5. Barra de menús superior: Archivo, Editar, Ver y otras opciones

Acceso a la terminal

Puede abrir la terminal de dos maneras:

  1. Haga clic en el icono en la esquina inferior izquierda, y cambie a la pestaña Terminal;
  2. Utilice el menú superior: Terminal > Nueva terminal

Vista previa de HTML

Para visualizar su archivo HTML:

  1. En la WebIDE, haga clic en el botón “Go Live” en la esquina inferior derecha.
  2. Se abrirá una nueva pestaña de navegador con su página HTML renderizada.
  3. O, puede hacer clic en la pestaña “Web 8080” para abrir la vista previa.
  4. Si su proyecto se encuentra en un subdirectorio, puede acceder a él haciendo clic en el nombre del subdirectorio en el explorador, luego se visualizará automáticamente el archivo index.html en ese directorio.
  5. Si su proyecto tiene múltiples archivos HTML, incluyendo index.html, puede adjuntar el nombre del archivo a la URL para visualizarlo directamente. Por ejemplo, https://xxx.labex.io/another-file.html.
  6. Puede abrir la vista previa en una nueva pestaña haciendo clic en el botón “Abrir en nueva pestaña”. Se abrirá la vista previa en una nueva pestaña de navegador.

“Go Live” automáticamente:

  • Iniciará un servidor web
  • Proporcionará actualizaciones en tiempo real a medida que modifique su código

Consejos: LabEx VM hospeda la vista previa en el puerto 8080. Puede compartir el enlace de vista previa con otros para mostrar su trabajo. Después de detener su máquina virtual de laboratorio, el enlace de vista previa ya no funcionará.

Escenarios de uso

Preguntas frecuentes

¿Esta página le ayudó?