Visualização da WebIDE

O ambiente da WebIDE é particularmente útil para:

  1. Escrever e depurar código em várias linguagens de programação (Java, JavaScript, Python, etc.)
  2. Projetos de desenvolvimento web com capacidade de pré-visualização em tempo real, consulte Crie sua primeira página HTML na WebIDE
  3. Gerenciar arquivos e diretórios de projeto por meio de uma interface intuitiva
  4. Operações integradas de terminal para tarefas de linha de comando

Layout do ambiente

A interface da WebIDE consiste em vários componentes-chave:

  1. Barra lateral esquerda:
    • Explorador de arquivos para navegação no projeto
    • Funcionalidade de pesquisa
    • Controle de origem para operações Git
    • Painel de extensões
  2. Área do editor: Espaço de trabalho principal de codificação
  3. Painel inferior: Terminal, problemas e saída
  4. Barra de status: Acesso rápido às configurações e pré-visualização em tempo real
  5. Barra de menu superior: Arquivo, Editar, Exibir e outras opções

Acesso ao terminal

Você pode abrir o terminal de duas maneiras:

  1. Clique no ícone na esquina inferior esquerda e alterne para a guia Terminal;
  2. Use o menu superior: Terminal > Novo Terminal

Pré-visualizar HTML

Para pré-visualizar seu arquivo HTML:

  1. Na WebIDE, clique no botão “Go Live” na extremidade inferior direita.
  2. Uma nova guia do navegador será aberta com sua página HTML renderizada.
  3. Ou, você pode clicar na guia “Web 8080” para abrir a pré-visualização.
  4. Se seu projeto estiver em um subdiretório, você pode acessá-lo clicando no nome do subdiretório no explorador, em seguida, ele automaticamente pré-visualizará o arquivo index.html nesse diretório.
  5. Se seu projeto tiver vários arquivos HTML, incluindo index.html, você pode anexar o nome do arquivo à URL para pré-visualizá-lo diretamente. Por exemplo, https://xxx.labex.io/another-file.html.
  6. Você pode abrir a pré-visualização em uma nova guia clicando no botão “Abrir em Nova Guia”. Isso abrirá a pré-visualização em uma nova guia do navegador.

“Go Live” automaticamente:

  • Inicia um servidor web
  • Fornece atualizações em tempo real à medida que você modifica seu código

Dicas: O LabEx VM hospeda a pré-visualização na porta 8080. Você pode compartilhar o link de pré-visualização com outros para mostrar seu trabalho. Após a parada da sua máquina virtual do laboratório, o link de pré-visualização não funcionará mais.

Cenários de uso

Perguntas frequentes