Quais São Alguns Exemplos de Uso de Técnicas Avançadas de Depuração em JavaScript?

Depurar seus programas JavaScript vai além de usar declarações console.log() no seu código. Existem técnicas mais avançadas que tornam a depuração muito fácil depois que você se acostuma com elas. Vamos passar por essas técnicas mais avançadas para que você fique feliz em depurar seu programa JavaScript quando encontrar erros. O primeiro conceito que vamos analisar é trabalhar com breakpoints. Breakpoints permitem que você pause a execução do seu código em uma linha específica de sua escolha. Após a pausa, você pode inspecionar variáveis, avaliar expressões e examinar a pilha de chamadas. Para adicionar um breakpoint em qualquer linha do seu código no navegador Chrome, abra as ferramentas de desenvolvedor e navegue até a aba Sources, abra o arquivo JavaScript que você deseja depurar e clique no número da linha para definir um breakpoint. Após a execução atingir o breakpoint e parar, você pode avançar passo a passo pelo código usando os ícones no canto superior direito. Você também pode adicionar um breakpoint condicional clicando com o botão direito em uma linha e selecionando "Add conditional breakpoint…" Agora, vamos passar para assistir expressões. Watch expressions permite monitorar os valores de variáveis ou expressões enquanto o código é executado mesmo que estejam fora do escopo atual. Para adicionar uma expressão de observação, navegue até a aba Sources das ferramentas de desenvolvedor, procure o painel de observação à direita e clique no ícone de mais (+) para adicioná-la. O próximo conceito que vamos analisar é profiling. O profiling ajuda você a identificar gargalos de desempenho permitindo capturar screenshots e registrar o uso da CPU, chamadas de função e tempo de execução. Para fazer isso no seu código, abra a aba Performance, clique em record e execute a ação que você quer analisar. Depois de terminar de executar essa ação, pare a gravação para analisar os resultados. Isso pode ser útil se sua aplicação estiver lenta durante certas operações. Com o profiler, você pode ver qual função ou outro dado no código consome mais recursos. Agora, vamos passar para a inspeção de requisições de rede. Inspecionar requisições de rede pode ajudar você a depurar problemas relacionados a requisições de API como erros de parâmetro, erros de endereço ou erros de servidor. Para usar a aba Network para depuração, abra as ferramentas de desenvolvedor e vá para a aba Network, depois clique nas requisições individuais para ver detalhes como headers, responses e payloads. Para a última parte desta lição, vamos focar em console.table e console.dir. console.table() exibe dados tabulares como uma tabela no console. Ele recebe um argumento obrigatório, que deve ser um array ou um objeto, e um argumento opcional para especificar quais propriedades ou colunas exibir. console.dir() por outro lado permite que você exiba uma lista interativa das propriedades de um objeto JavaScript especificado. Ele gera uma listagem hierárquica que pode ser expandida para ver todas as propriedades aninhadas. Agora que você tem um conjunto ampliado de técnicas de depuração, coloque essas novas habilidades à prova em seus próximos projetos JavaScript. Ao aplicar essas estratégias, você será capaz de identificar e resolver problemas de forma mais eficiente, levando a um código mais limpo e confiável.
Este módulo não possui perguntas. Marque como concluído.