> ## 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. # Preview > Saiba como usar o Preview para visualizar e interagir com seu app web enquanto você o cria. 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. Preview é o novo nome para Webview. captura de tela da ferramenta Preview ## 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. No **dock de ferramentas** à esquerda: 1. Selecione Ícone de Todas as ferramentas **Todas as ferramentas** para ver a lista de ferramentas do Editor de Projetos. 2. Selecione Ícone do Preview **Preview**. Na **barra de pesquisa**: 1. Selecione a ícone de lupa 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](#Developer_tools) * **Nova aba**: Abrir a URL do seu app web em uma nova aba do navegador **Criando um app móvel?** O painel Preview também suporta prévia em **iOS Simulator** ou **Android Emulator**. Veja [Apps Móveis Nativos](/replitai/building-mobile-apps#preview-on-a-simulator-or-emulator) para mais detalhes. ## 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 ícone de chave inglesa **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 ícone de limpar 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 ícone de filtro e inserindo o texto. * **Copiar saída**: Copiar as mensagens do console selecionadas pelo botão ícone de copiar copiar. * **Executar código JavaScript**: Executar código JavaScript no contexto do seu app selecionando o ícone ícone de seta para a direita 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 ícone de copiar copiar. Use a ícone de seleção 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 ícone de filtro 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 ícone de copiar 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 ícone de filtro 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 ícone de limpar limpar. * **Excluir selecionado**: Remover itens de armazenamento selecionando o ícone ícone de excluir "X". * **Copiar**: Copiar informações de armazenamento selecionando o botão ícone de copiar 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