o que você está procurando?
construindo um aplicativo da web complexo, você provavelmente encontrou o fato de que algo não funcionou como planejado. Você passou horas e horas procurando um bug em seu código e depois na internet procurando ajuda para corrigir o problema. Para facilitar, neste artigo, explicamos algumas técnicas eficazes de depuração de um aplicativo da web que reduzem significativamente a dor da depuração e reduzem o tempo de detecção de problemas.
Console.log
primeiro, um console de método javascript comumente usado.log. Você pode inserir um método em seu código com a variável fornecida. Durante a execução do código, o aplicativo retornará o valor das variáveis especificadas dentro do método no console. Esta é a maneira mais fácil de verificar se o programa retorna o valor esperado.
infelizmente, este não é um método muito eficaz de depuração. Tal abordagem t não nos permite ver o progresso da execução de código (a menos que inseramos console.registre a cada poucas linhas, mas a quantidade de dados lançados no console será ilegível e só faremos uma bagunça no código.) Além disso, ele retorna apenas a variável passada, desde que o aplicativo não lance um erro durante a execução do Código.
dica no. 1
se você tem muitos console.os logs colocam o nome em uma string e a próxima variável, por exemplo, console.log (‘variável’, variável).
Chrome DevTools(Guia de origem)
um método mais eficiente para depurar um aplicativo da web é usar o Chrome DevTools e a guia de origem. Antes de começarmos a depuração na guia Origem, precisamos adicionar node_modules ao Black boxing. Adicionamos essa regra para que, ao passar por pontos de interrupção, ela não nos mostre arquivos de pacotes externos, o que dificulta a depuração. Precisamos abrir as configurações no Chrome → Blackboxing → adicionar padrões e, em seguida, escrever lá /node_modules.
quando você adiciona node_modules ao Black boxing, podemos ir para a guia Fonte. Vamos supor que você queira seguir em tempo real o processo de sua função e verificar as saídas. Pressione Ctrl + O na guia origem e insira um nome de arquivo de origem. Em seguida, coloque os pontos de interrupção nas linhas de código que interessam, você e você pode começar a executar o processo em seu navegador. Quando as linhas selecionadas iniciam o processamento, o navegador para de executar o código. Veja a imagem abaixo.
Como você pode ver, a atual linha de código onde o navegador parou tem um fundo azul. No lado direito, há uma barra onde nosso centro de comando está localizado. Aqui está a nossa breve introdução.
controles
na parte superior da barra, você tem a seção Controles. Vamos nos concentrar nos elementos cruciais. O primeiro controle de currículo nos leva ao próximo ponto de interrupção marcado dentro do escopo do código que está sendo executado. A segunda etapa de controle sobre a próxima chamada de função nos leva à próxima linha do código que está sendo executado. O último controle de pontos de interrupção Deativos desativa os pontos de interrupção selecionados. É um controle útil quando temos muitos pontos de interrupção selecionados e queremos voltar a clicar no aplicativo por um tempo sem pausar a cada ponto de interrupção.
escopos
temos uma seção de escopos abaixo. Temos vários tipos de escopos: local (a função executada atualmente) e fechamentos dependendo do escopo em que estamos (por exemplo, o pai da função executada atualmente ou um componente). Em cada um desses escopos, o navegador nos mostra todas as variáveis que ocorrem neles.
pontos de interrupção
a última seção discutida são pontos de interrupção. Ele mostra quais pontos de interrupção e em quais arquivos estão marcados. Usando caixas de seleção, podemos desativá-las e reativá-las facilmente.
dicas não. 2-5
- se você usar imutável.js em seu projeto, instale o imutável.plugin js Object Formatter e ativá-lo nas configurações do navegador. Isso simplificará significativamente a depuração de objetos imutáveis.
- se você não usar imutável.js em seu projeto e você usa o código do Visual Studio como IDE, recomendamos fortemente a instalação e configuração do depurador para o Chrome (o VSC não tem um imutável.plugin de formatação js). Ele simplifica a depuração ainda mais e permite mudanças de código mais rápidas.
- se a guia origem não mostrar seus arquivos locais, verifique o mapa de origem em seu projeto.
- quando o navegador pára em um ponto de interrupção, você tem acesso a variáveis também no console.
React Developer Tools
React Developer Tools também são soluções úteis. Essas ferramentas permitem que você visualize facilmente a estrutura da árvore de reação em seu projeto, estados e adereços no componente. A função Selecionar um elemento na página para inspecioná-lo é poderosa, especialmente quando você não conhece todo o projeto. Ele ajuda você a encontrar o componente que você precisa atualizar.
dica nº 6
se você usar o Vue. js, você pode usar Vue.js devtools. A extensão tem funções semelhantes e acesso ao Vuex (o equivalente redux no react).
Redux DevTools
se você usar Redux em seu projeto, Redux DevTools é um must-have. Essa solução permite rastrear o fluxo total de ações, alterações de status, carga útil e visualizar o armazenamento atual após cada ação executada. Se algo não funcionar como assumimos, e tudo parece bem no código, vale a pena considerar quais ações estão despachando, com que Carga útil. Às vezes, existem erros simples, como copiar a constante da ação acima, renomear sem alterar o valor e, em seguida, chamar algo completamente diferente. Abaixo está um gif mostrando as funções Redux DevTools mais importantes.
dica no. 7
se o seu aplicativo Executar um grande número de ações, a extensão pode não funcionar corretamente devido à memória insuficiente para processar essas muitas ações. Você pode tentar configurá-lo nas opções de extensão (neste caso, a opção maxAge.)
Fiddler
a última ferramenta que gostaríamos de introduzir é Fiddler. A ferramenta foi criada para gerenciar o tráfego de rede. É extremamente útil quando temos alguns bugs de produção e não podemos copiar os dados de produção para um ambiente inferior para depurar localmente. Em tal situação, para ter acesso aos dados de produção no ambiente local, definimos o tráfego na guia AutoResponder. Quando você abre a página, em vez de baixar o arquivo js do servidor, o Fidler conecta nosso arquivo de produção construído localmente. A depuração adicional é feita na guia Fonte do chrome dev tools. Abaixo está uma captura de tela com a configuração para redirecionar o tráfego para o arquivo local. O programa também permite endpoints simulados.
dica nº 8
se você deseja criar zombarias de endpoints de maneira fácil e rápida, pode usar um programa mock moon.
resumo de uma depuração ágil de um aplicativo da web
para muitos de nós, o processo de depuração de um aplicativo da web está associado a uma dor de cabeça e longas horas gastas na frente do computador. No entanto, esse processo pode ser encurtado e mais agradável se você tiver as ferramentas e o know-how certos para usá-los. Muitas vezes eles estão ao seu alcance e de graça. Compartilhamos com você as ferramentas mais importantes e úteis que usamos diariamente.