Preview

O Preview mostra a saída do seu aplicativo web e oferece ferramentas de desenvolvedor do navegador e recursos de depuração. Quando você inicia seu aplicativo web usando o botão Run, o Replit atribui a ele uma URL temporária acessível pela internet. A ferramenta Preview renderiza a página exatamente como você veria em um navegador. Ela também inclui ferramentas de desenvolvedor com funcionalidade semelhante à encontrada em navegadores populares.

​

Recursos

O Preview inclui as seguintes funcionalidades para que você possa testar e depurar seus aplicativos web de forma integrada:

• Visualização web ao vivo: Veja seu aplicativo e interaja com ele sem sair da aba do navegador
• Ferramentas de desenvolvedor: Use ferramentas integradas para diagnosticar problemas rapidamente
• Teste responsivo: Visualize seu aplicativo em diferentes tamanhos de tela de dispositivos móveis

​

Uso

A ferramenta Preview abre automaticamente quando você executa um aplicativo web. Você pode alternar esse comportamento na ferramenta Configurações do Usuário, na configuração Automatic Preview. As instruções a seguir explicam como abrir o Preview.

Como acessar o Preview

No dock de ferramentas à esquerda:

1. Selecione Todas as ferramentas para ver uma lista de ferramentas do Editor de Projeto.
2. Selecione Preview.

Na barra de pesquisa:

1. Selecione a lupa no topo para abrir a ferramenta de pesquisa
2. Digite “Preview” para localizar a ferramenta e selecione-a nos resultados.

​

Barra de localização

A barra de localização no topo da aba Preview inclui as seguintes ferramentas:

• Botão Voltar: Navegue até a página anterior no histórico de navegação
• Botão Avançar: Navegue até a próxima página no histórico de navegação
• Domínio do app: Veja informações sobre a URL temporária do seu Replit App selecionando {...}.replit.dev
• Campo de endereço: Veja o caminho de URL atual ou insira um novo caminho

​

Ferramentas do navegador

As ferramentas do navegador no lado direito da barra de localização incluem as seguintes funções:

• Tamanho de tela: Selecione entre diferentes predefinições de tamanho de tela de dispositivo para testar designs responsivos
• Devtools: Alterne o painel de ferramentas de desenvolvedor
• Nova aba: Abra a URL do seu aplicativo web em uma nova aba do navegador

​

Ferramentas de desenvolvedor

As ferramentas de desenvolvedor, desenvolvidas pelo projeto de código aberto Eruda, ajudam você a realizar as seguintes tarefas:

• Visualizar e interagir com o console JavaScript no contexto do seu aplicativo
• Inspecionar elementos DOM
• Monitorar requisições de rede
• Configurar preferências de exibição e comportamento

Para acessar as ferramentas de desenvolvedor, selecione o botão Devtools no topo da aba Preview para alterná-las. As seções a seguir descrevem as ações que você pode realizar em cada aba das ferramentas de desenvolvedor.

​

Console

A aba Console exibe os logs JavaScript gerados pelo seu aplicativo. Nesta aba, você pode realizar as seguintes ações:

• Limpar saída: Remova toda a saída do console selecionando o ícone de círculo com barra.
• Filtrar saída: Visualize a saída do console filtrada por tipo (All, Info, Warning ou Error).
• Filtrar texto correspondente: Mostre a saída que corresponde ao selecionar o ícone de filtro e inserir o texto.
• Copiar saída: Copie mensagens do console selecionadas ao selecionar o botão de copiar.
• Executar código JavaScript: Execute código JavaScript no contexto do seu aplicativo ao selecionar o colchete angular direito. Insira a expressão e selecione Execute.

​

Elements

A aba Elements permite que você inspecione e modifique a estrutura DOM da página web.

• Ver detalhes do elemento: Veja detalhes sobre o elemento DOM e a localização no código HTML
• Copiar saída: Copie mensagens do console selecionadas ao selecionar o botão de copiar.

Use a seleção de seta para alternar o modo de seleção. Após entrar no modo de seleção, selecione um elemento na página web. O HTML e o CSS desse elemento devem aparecer na aba Elements.

​

Network

A aba Network monitora as requisições iniciadas pela página web. Nesta aba, você pode realizar as seguintes ações:

• Rastrear requisições: Veja todas as requisições de rede iniciadas pelo seu aplicativo. Selecione uma requisição para ver os detalhes.
• Filtrar: Veja resultados correspondentes ao selecionar o ícone de funil para mostrar resultados que correspondem ao seu texto. Insira um filtro vazio para limpá-lo.
• Copiar: Copie informações de armazenamento ao selecionar o botão de copiar.

​

Resources

A aba Resources mostra os recursos carregados pela página e o armazenamento do navegador, como cookies e armazenamento local. Você pode visualizar e atualizar listas para os seguintes tipos de recurso:

• Arquivos JavaScript
• Folhas de estilo
• Iframes
• Imagens

Nesta aba, você pode realizar as seguintes ações:

• Ver armazenamento: Revise o armazenamento local, o armazenamento de sessão e os cookies.
• Filtrar: Veja resultados correspondentes ao selecionar o ícone de funil para mostrar resultados que correspondem ao seu texto. Insira um filtro vazio para limpá-lo.
• Limpar: Exclua todos os dados desse tipo de armazenamento ao selecionar o botão de limpar.
• Excluir selecionado: Remova itens de armazenamento ao selecionar o ícone “X”.
• Copiar: Copie informações de armazenamento ao selecionar o botão de copiar.

​

Settings

A aba Settings permite que você personalize a aparência e o comportamento das ferramentas de desenvolvedor. Esta aba inclui opções de personalização para o seguinte:

• Configurações de ferramentas: Personalize opções que se aplicam a cada aba de ferramenta
• Controles JavaScript: Especifique opções de comportamento do JavaScript, como desativá-lo para testar como seu aplicativo se comporta
• Preferências de exibição: Altere o tema, o tamanho do painel, a transparência e outros comportamentos das ferramentas de desenvolvedor