Preview

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

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

​

Recursos

O Preview inclui as seguintes funcionalidades para que você possa testar e depurar seus apps web sem interrupções:

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

​

Uso

A ferramenta Preview abre automaticamente quando você executa um app web. Você pode alternar esse comportamento na ferramenta Configurações do Usuário, em Preview Automático. 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 a lista de ferramentas do Editor de Projetos.
2. Selecione Preview.

Na barra de pesquisa:

1. Selecione a lupa na parte superior 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 na parte superior 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 app: 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 presets de tamanho de tela para testar designs responsivos
• Devtools: Alternar o painel de ferramentas de desenvolvedor
• Nova aba: Abrir a URL do seu app web em uma nova aba do navegador

​

Ferramentas de desenvolvedor

As ferramentas de desenvolvedor, desenvolvidas pelo projeto open source Eruda, ajudam você a realizar as seguintes tarefas:

• Visualizar e interagir com o console JavaScript no contexto do seu app
• 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 na parte superior da aba Preview para ativá-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. Nessa aba, você pode realizar as seguintes ações:

• Limpar saída: Remover toda a saída do console selecionando o ícone círculo com barra.
• Filtrar saída: Ver a saída do console filtrada por tipo (Tudo, Informação, Aviso ou Erro).
• Filtrar por texto correspondente: Exibir saída que corresponda selecionando o ícone e inserindo o texto.
• Copiar saída: Copiar as mensagens do console selecionadas pelo botão copiar.
• Executar código JavaScript: Executar código JavaScript no contexto do seu app selecionando o ícone colchete angular direito. Insira a expressão e selecione Executar.

​

Elements

A aba Elements permite inspecionar e modificar 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 as mensagens do console selecionadas pelo botão copiar.

Use a seta de seleção 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. Nessa aba, você pode realizar as seguintes ações:

• Rastrear requisições: Ver todas as requisições de rede iniciadas pelo seu app. Selecione uma requisição para ver detalhes.
• Filtrar: Ver resultados correspondentes selecionando o ícone funil para exibir resultados que correspondam ao seu texto. Insira um filtro vazio para limpá-lo.
• Copiar: Copiar informações de armazenamento selecionando o botão 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

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

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

​

Settings

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

• Configurações da ferramenta: 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 app se comporta
• Preferências de exibição: Alterar o tema, tamanho do painel, transparência e outros comportamentos das ferramentas de desenvolvedor