Preview

O Preview mostra a saída do seu aplicativo web e oferece ferramentas de desenvolvedor do navegador e capacidades 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 na 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 ao que você encontra 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 User Settings sob a 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 All tools para ver uma lista de ferramentas do Project Editor.
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: Navegar para a página anterior no histórico de navegação
• Botão Avançar: Navegar para a próxima página no histórico de navegação
• Domínio do aplicativo: Ver informações sobre a URL temporária do seu Replit App selecionando {...}.replit.dev
• Campo de endereço: Ver o caminho de URL atual ou inserir 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: Selecionar entre diferentes predefinições de tamanho de tela de dispositivo para testar designs responsivos
• Devtools: Alternar o painel de ferramentas de desenvolvedor
• Nova aba: Abrir 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: Remover toda a saída do console selecionando o ícone de círculo com barra.
• Filtrar saída: Visualizar a saída do console filtrada por tipo (All, Info, Warning ou Error).
• Filtrar texto correspondente: Mostrar saída que corresponde selecionando o ícone de filtro e inserindo o texto.
• Copiar saída: Copiar mensagens do console selecionadas selecionando o botão de copiar.
• Executar código JavaScript: Executar código JavaScript no contexto do seu aplicativo selecionando 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: Ver detalhes sobre o elemento DOM e a localização no código HTML
• Copiar saída: Copiar mensagens do console selecionadas selecionando 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 CSS daquele 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: Ver todas as requisições de rede iniciadas pelo seu aplicativo. Selecione uma requisição para ver os detalhes.
• Filtrar: Ver resultados correspondentes selecionando o ícone de funil para mostrar resultados que correspondem ao seu texto. Insira um filtro vazio para limpá-lo.
• Copiar: Copiar informações de armazenamento selecionando o botão de copiar.

​

Resources

A aba Resources mostra os ativos 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 ativos:

• Arquivos JavaScript
• Folhas de estilo
• Iframes
• Imagens

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

• Ver armazenamento: Revisar armazenamento local, armazenamento de sessão e cookies.
• Filtrar: Ver resultados correspondentes selecionando o ícone de funil para mostrar resultados que correspondem ao seu texto. Insira um filtro vazio para limpá-lo.
• Limpar: Excluir todos os dados para aquele tipo de armazenamento selecionando o botão de limpar.
• Excluir selecionado: Remover itens de armazenamento selecionando o ícone “X”.
• Copiar: Copiar informações de armazenamento selecionando 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: Personalizar opções que se aplicam a cada aba de ferramenta
• Controles JavaScript: Especificar opções de comportamento do JavaScript, como desativá-lo para testar como seu aplicativo se comporta
• Preferências de exibição: Alterar o tema, tamanho do painel, transparência e outros comportamentos das ferramentas de desenvolvedor