​
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 capacidades de vista previa en vivo, consulta Crea tu primera página HTML en WebIDE
  3. Administrar archivos y directorios del proyecto a través de una interfaz intuitiva
  4. Operaciones de terminal integradas para tareas de línea de comandos

​
Diseño del entorno

La interfaz 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 Git
    • Panel de extensiones
  2. Área del editor: Espacio de trabajo de codificación principal
  3. Panel inferior: Terminal, problemas y salida
  4. Barra de estado: Acceso rápido a la configuración y vista previa en vivo
  5. Barra de menú superior: Archivo, Editar, Ver y otras opciones

​
Acceso a la terminal

Puedes abrir la terminal de dos maneras:

  1. Haz clic en el icono en la esquina inferior izquierda y cambia a la pestaña Terminal;
  2. Usa el menú superior: Terminal > Nueva terminal

​
Vista previa de HTML

Para previsualizar tu archivo HTML:

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

“Go Live” automáticamente:

  • Inicia un servidor web
  • Proporciona actualizaciones en tiempo real a medida que modificas tu código

Consejos: LabEx VM aloja la vista previa en el puerto 8080. Puedes compartir el enlace de vista previa con otros para mostrar tu trabajo. Después de que tu máquina virtual de laboratorio se detenga, el enlace de vista previa dejará de funcionar.

​
Escenarios de uso

​
Preguntas frecuentes