> ## 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 > Aprenda como usar o Preview para visualizar e interagir com seu aplicativo web enquanto o desenvolve. 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. 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 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. No **dock de ferramentas** à esquerda: 1. Selecione Ícone Todas as ferramentas **All tools** para ver uma lista de ferramentas do Project Editor. 2. Selecione Ícone do Preview **Preview**. Na **barra de pesquisa**: 1. Selecione a ícone de lupa 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](#Developer_tools) * **Nova aba**: Abrir a URL do seu aplicativo web em uma nova aba do navegador **Desenvolvendo um aplicativo mobile?** O painel Preview também suporta a visualização em um **iOS Simulator** ou **Android Emulator**. Consulte [Aplicativos Mobile Nativos](/references/artifact-types/building-mobile-apps#preview-on-a-simulator-or-emulator) para detalhes. ## 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 ícone de chave inglesa **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 ícone de limpar 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 ícone de filtro filtro e inserindo o texto. * **Copiar saída**: Copiar mensagens do console selecionadas selecionando o botão de ícone de copiar copiar. * **Executar código JavaScript**: Executar código JavaScript no contexto do seu aplicativo selecionando o ícone de seta para a direita 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 ícone de copiar copiar. Use a ícone de seleção 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 ícone de filtro 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 í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 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 ícone de filtro 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 í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 de ícone de copiar 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