Depurar o app no Project IDX

O Project IDX oferece algumas maneiras diferentes de depurar seu app diretamente no espaço de trabalho. Os apps da Web e do Flutter oferecem o Lighthouse e o Chrome DevTools na visualização da Web do Chrome no seu espaço de trabalho. Os apps Flutter oferecem visualizações para iOS, Android e Web para verificação e teste do app enquanto você programa. O Console de depuração integrado é compatível com a depuração automática para as linguagens mais comuns e a depuração personalizada que você pode definir em um arquivo launch.json no espaço de trabalho.

Visualizar o app

O IDX inclui visualizações de apps no espaço de trabalho para apps da Web (Chrome e Safari para dispositivos móveis) e apps Flutter (iOS, Android, Chrome). As prévias do Android e do Chrome oferecem suporte à recarga dinâmica e à atualização dinâmica, além de oferecerem recursos completos do emulador. Os simuladores do Safari e do iOS oferecem visualizações visuais e interativas em vários dispositivos iOS e simulam a experiência em apps da Web e para dispositivos móveis.

Para saber mais sobre as visualizações de IDX, consulte Visualizar seu app.

Usar o Chrome DevTools para visualizações na Web (experimental)

O Chrome DevTools ajuda a diagnosticar problemas no app diretamente pela visualização da Web. É possível acessar o Chrome DevTools no painel de visualização da Web do IDX da mesma forma que você abriria o DevTools no navegador Chrome. Painel do DevTools minimizado na visualização da Web do IDX

Esse recurso é experimental enquanto criamos uma experiência do usuário ideal. Envie feedback para nos ajudar a melhorar a ferramenta.

  1. Adicione o Chrome DevTools ao seu espaço de trabalho do IDX:

    1. Abra a janela Configurações clicando no ícone de engrenagem ou pressionando Ctrl + , (no Windows/Linux/ChromeOS) ou Cmd + , (no MacOS).
    2. Encontre a configuração IDX: Web Dev Tools e selecione Ativar o Chrome DevTools para visualização da Web (recarga do navegador). Se você usar um arquivo settings.json, também poderá definir "IDX.webDevTools": true.
    3. Atualize a janela do navegador e recarregue seu espaço de trabalho do IDX.
  2. Abra a visualização da Web no Project IDX: abra a paleta de comandos (Cmd+Shift+P no Mac ou Ctrl+Shift+P no ChromeOS, Windows ou Linux) e selecione Project IDX: Mostrar visualização da Web.

  3. O painel DevTools é minimizado no painel de visualização da Web. Clique na barra DevTools para expandir o painel e usar o DevTools dentro do painel de visualização da Web.

Use o painel do DevTools na visualização da Web do IDX da mesma forma que você faria para depurar seu app no navegador Chrome.

Executar o Lighthouse para visualizações na Web

O Lighthouse faz a auditoria do seu app com base nas categorias específicas selecionadas e retorna um relatório com descobertas e sugestões. É possível executar os relatórios do Lighthouse diretamente da visualização da Web no Project IDX.

  1. Abra a visualização da Web no Project IDX: abra a paleta de comandos (Cmd+Shift+P no Mac ou Ctrl+Shift+P no ChromeOS, Windows ou Linux) e selecione Project IDX: Mostrar visualização da Web.

  2. Clique no ícone de verificação de desempenho na barra de ferramentas de visualização da Web. imagem de um ícone de verificação de velocidade

  3. imagem do painel do farol em idx No painel do Lighthouse, selecione as categorias de auditoria que você quer. É possível escolher relatórios de auditoria de desempenho, acessibilidade, conformidade com as práticas recomendadas, SEO e desempenho do Progressive Web App. Clique na página "Analisar" para gerar os relatórios.

    Os relatórios podem levar alguns minutos para serem gerados.

  4. Quando os relatórios aparecerem no painel do Lighthouse, será possível revisar os resultados de cada categoria de auditoria ou alternar entre elas clicando no nome da pontuação e da categoria.

Usar o Console de depuração

O Project IDX inclui o console de depuração integrado do Code OSS. Use esse console para depurar seu app com depuradores prontos para uso nas linguagens de programação mais comuns ou adicione uma extensão de depuração do VSCode Marketplace.

Se você quiser programar uma depuração personalizada, adicione um arquivo launch.json ao espaço de trabalho.