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.

Google Chrome

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

Visual Studio Code

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