Depurar aplicativos do PWA Kit

Bugs e gargalos de desempenho são uma parte inevitável do desenvolvimento de aplicativos da web. Com o PWA Kit, é possível chegar à raiz desses problemas com uma variedade de ferramentas e técnicas que fazem uma análise detalhada de seu app.

Antes de seguir a orientação mais precisa deste guia, tente estas etapas gerais de solução de problemas antes:

Verifique se você está executando uma versão compatível do Node (consulte o guia Como começar) antes de iniciar seu servidor de desenvolvimento local.
Confirme que seu servidor de desenvolvimento ainda está em execução e que a porta não foi controlada por outro processo.
Depois de uma mudança de código, confirme que a mensagem HTTP development server listening aparece no terminal antes de recarregar o navegador.
Procure erros tanto no console do navegador quanto no terminal.
Procure respostas a erros de rede usando as ferramentas de desenvolvedor do seu navegador. (No Chrome, em Ferramentas do desenvolvedor, vá para a guia Network.)
Para ajudar a identificar erros de sintaxe e de ortografia, execute um formatador de código e um linter. Os arquivos de configuração são fornecidos tanto para o Prettier (formatador de código) quanto para o ESLint (linter) no Retail React App.
Verifique as configurações do antivírus e do firewall de seu computador em busca de algo que esteja impedindo que o código seja executado ou que esteja bloqueando as solicitações de rede.
Para identificar e analisar problemas de análise e desempenho, use o Profiler do DevTools do Chrome. Para obter mais informações, consulte este guia do Google: Analyze Runtime Performance (Analisar o desempenho do tempo de execução). Você também pode instalar a extensão React Developer Tools para Chrome para obter outra guia Profiler, onde você pode ver informações similares no nível do componente.

Há dois parâmetros de consulta especiais que podem ser adicionados a qualquer URL usado por seu app de comércio eletrônico para ajudar a depurar problemas com códigos no lado do servidor.

O parâmetro de consulta __server_only interrompe o processo de hidratação para que a página apareça em seu navegador exatamente como apareceria depois da renderização do lado do servidor. Ver a versão renderizada da página no lado do servidor ajuda a solucionar problemas não somente com a renderização do lado do servidor, como também com o SEO, já que os mecanismos de busca rastreiam essa versão da página.

O parâmetro de consulta __pretty_print adiciona formatação ao objeto__PRELOADED_STATE__, para facilitar sua leitura. Esse objeto proporciona um snapshot do estado de seu app antes do início da hidratação, então seria útil depurar para ver se contém os valores esperados. Para ver o conteúdo do objeto, carregue seu app, consulte a origem da página e procure __PRELOADED_STATE__.

O objeto __PRELOADED_STATE__ está incluído em um tag <script> na fonte HTML da página que foi inicialmente solicitada quando seu app começou a executar no lado do servidor. O objeto __PRELOADED_STATE__ contém valores em série retornados pela função getProps (incluindo as versões getProps que estão anexadas ao componente _app e ao componente da página).

Por padrão, o servidor de apps exibe mensagens do console no terminal, mas não permite que você veja o código de execução. Esta limitação pode dificultar a depuração do código que renderiza páginas no lado do servidor (ou em sua máquina local).

Para uma melhor depuração, você pode iniciar seu servidor de desenvolvimento local com um comando alternativo que executa um processo de inspeção em Node que pode ser anexado a um depurador. (Para obter mais detalhes, consulte a documentação sobre o Node.)

Você pode anexar o depurador incluído em vários navegadores populares e editores de texto ao processo de inspeção do Node. Aqui estão as instruções para o Google Chrome e o Visual Studio Code.

Abra um terminal.
Vá para o diretório de seu projeto.
Inicie o servidor de desenvolvimento local usando npm run start:inspect.
Para confirmar que o depurador está na escuta, procure a mensagem “Debugger Listening” (Depurador na escuta) na saída do terminal.
Abra o Chrome e insira o URL chrome://inspect.
Clique em Open dedicated DevTools for Node (Abrir DevTools para Node dedicados).
O DevTools se abre em uma nova janela.
Para confirmar que o depurador está anexado, procure a mensagem “Debugger Attached” (Depurador anexado) na saída do terminal.
Defina pontos de interrupção, adicione declarações do debugger e assim por diante.
Carregue uma página do servidor de desenvolvimento local no Chrome.
Use a janela dedicada para depuração.

Agora você pode rastrear a execução do seu código no lado do servidor!

Para saber mais sobre como depurar usando pontos de interrupção no DevTools, veja este guia do Google: Debug JavaScript.

Abra os arquivos do seu projeto no Visual Studio Code.
Na barra de menu, clique em Terminal > New Terminal (Novo terminal).
Inicie o servidor de desenvolvimento local usando npm run start:inspect.
Abra a Command Palette. Atalho para Windows: Ctrl + Shift + P. Atalho para Mac: Command + Shift + P.
Digite o seguinte comando: “Debug: Attach to Node Process” (Depuração: anexar ao processo do Node).
Aparecerá uma lista dos processos do Node. Escolha o primeiro da lista.
Para confirmar que o depurador está anexado, procure a mensagem “Debugger Attached” na saída do terminal.
Defina pontos de interrupção, adicione declarações do depurador e assim por diante.
Carregue uma página do servidor de desenvolvimento local no navegador da web.
Use o depurador integrado do Visual Studio Code para depuração.

Agora você pode rastrear a execução do seu código no lado do servidor no Visual Studio Code!

Para não ter de anexar processos do Node de maneira repetida, abra a Command Palette e digite “Debug: Toggle Auto Attach” (Depuração: alternar anexação automática) Alterne a configuração para Always (Sempre) e reinicie seu servidor de desenvolvimento local no terminal do Visual Studio Code.

Quando seu aplicativo é implantado no Managed Runtime, a depuração remota não é aceita. No entanto, você pode acompanhar logs de qualquer ambiente do Managed Runtime em tempo real para ajudar a diagnosticar erros do lado do servidor.

Você tem duas opções para acompanhar logs por meio da linha de comando.

Se você está trabalhando em um projeto do PWA Kit gerado com a versão 2.4.1 ou mais recente, é possível:

Obter ajuda para o comando de logs: npm run tail-logs -- --help
Acompanhar logs de um ambiente e projeto específico: npm run tail-logs -- --environment $ENV_ID

O -- extra nos comandos acima é obrigatório.

Se você está trabalhando em um projeto que não seja do PWA Kit ou em um projeto gerado com uma versão mais antiga do que a 2.4.1, é possível usar npx para:

Obter ajuda para o comando de logs: npx @salesforce/pwa-kit-dev tail-logs --help
Acompanhar logs de IDs de projeto e de ambiente específicos: npx @salesforce/pwa-kit-dev tail-logs --environment $ENV_ID --project $PROJ_ID

Em vez dos argumentos --environment e --project, você também pode usar os argumentos mais curtos -e e -p.

Ao acompanhar logs, lembre-se das seguintes limitações:

Cada sessão de acompanhamento de log termina após 60 minutos.
Cada ambiente é compatível com até 100 sessões ativas de acompanhamento de log por vez, abrangendo todos os usuários.
Para acompanhar logs, você precisa receber permissões de usuário administrador ou desenvolvedor para o projeto do Managed Runtime.