Neste guia, vou te mostrar como usar as Ferramentas de Desenvolvedor do Chrome para controlar de forma eficiente e detalhada o processo de depuração. Você aprenderá como navegar pelo código fonte passo a passo e apoiar pontos específicos no fluxo do programa de forma direcionada. O foco está em te apresentar atalhos úteis e funções que facilitarão a depuração e melhorarão seu fluxo de trabalho.
Principais conhecimentos
- Você pode navegar rapidamente e efetivamente por grandes bases de código usando a pesquisa de arquivos.
- A depuração passo a passo é suportada por diferentes atalhos e funções que facilitam a navegação pelo código.
- Para funções assíncronas, existem mecanismos especiais para tornar compreensível quais partes do código estão sendo executadas.
Guia passo a passo
Para começar a depurar nas Ferramentas de Desenvolvedor do Chrome, siga estes passos:
Para encontrar os arquivos corretos, você pode usar o atalho de teclado "Command P" em um Mac ou "Ctrl P" no Windows. Isso abrirá uma barra de pesquisa onde você poderá digitar o nome do arquivo que procura. Você verá instantaneamente os resultados sendo filtrados e poderá encontrar o documento desejado muito mais rapidamente.
Caso esteja procurando por um arquivo específico e não conheça o nome exato, você também pode inserir partes do nome ou termos de pesquisa que contenham partes do nome do arquivo. Isso permitirá uma filtragem eficaz, especialmente em projetos grandes com muitos arquivos.
No Chrome Developer Tools, existem atalhos de teclado que facilitam a navegação no código. Esses atalhos são muito úteis para percorrer o código fonte. Use as teclas F8 (para continuar na função atual) e F10 (para a próxima chamada de função). Isso permitirá que você conduza sua sessão de depuração muito mais rapidamente e de forma eficiente.
Se deseja pular para uma função, pressione F11. Isso te levará diretamente para a função selecionada. Você também pode sair de uma função pressionando "Shift F11", que te levará a um nível acima. Esses movimentos são essenciais para entender a sequência de ações do programa e os efeitos de um código específico.
Ao lidar com código assíncrono, há considerações especiais a serem feitas. Em chamadas assíncronas, você pode distinguir entre os botões "Step into" (F11) para mergulhar na função e "Step over" (F9) para pular a execução.
Para tornar o processo de depuração ainda mais eficiente, você também pode configurar pontos de interrupção temporários. Basta clicar com o botão direito do mouse em uma linha de código e selecionar "Continue to here". O programa será executado até esse ponto sem interrupções contínuas em outras linhas.
Outra ferramenta útil dentro das Ferramentas de Desenvolvedor é a capacidade de reiniciar a execução de uma função. Isso significa que, ao pressionar o botão "Restart Frame", você volta ao início da função sem redefinir as variáveis. Essa função é especialmente útil quando você deseja testar repetidamente o comportamento de uma função sob condições específicas.
Todos esses truques e atalhos tornam a depuração um processo muito mais rápido. Sempre que sentir que a depuração está travada, verifique as opções oferecidas pelas Ferramentas de Desenvolvedor. Enquanto segue os passos, familiarize-se com os atalhos para aumentar ainda mais sua eficiência.
Conclusão
Neste guia, você aprendeu como utilizar ao máximo as Ferramentas de Desenvolvedor do Chrome para navegar pelo código fonte e lidar com situações de depuração complexas. O uso de atalhos e funções específicas proporciona um controle mais profundo sobre o processo de depuração, seja trabalhando com código síncrono ou assíncrono.
