Neste guia, gostaria de lhe dar a conhecer as funções básicas da consola nas Ferramentas de desenvolvimento do Chrome. A consola é uma ferramenta poderosa para programadores que lhe permite executar código JavaScript , ver mensagens de registo e monitorizar erros. Se estiver a iniciar-se no desenvolvimento de aplicações Web ou se já tiver experiência, esta visão geral da consola ajudá-lo-á a trabalhar de forma mais eficiente e produtiva.
Principais aprendizagens
- A consola é uma ferramenta versátil para executar JavaScript e apresentar resultados de registo e erros.
- Pode utilizar diferentes tipos de resultados, tais como console.log(), console.error() e console.warn().
- A filtragem e o controlo do que é apresentado na consola são cruciais para manter o controlo das coisas.
- Pode trabalhar diretamente no contexto de pontos de interrupção e aceder a variáveis e respectivos valores durante a resolução de problemas.
Guia passo a passo
Para trabalhar com a consola das Ferramentas de desenvolvimento do Chrome, siga estes passos:
Na primeira vez que utilizar a consola, deverá saber como aceder à mesma. Pode abrir a consola clicando no separador "Consola" ou utilizando o atalho "Escape". Em alternativa, também pode abrir a consola através do item de menu "Mostrar gaveta da consola". Isto mostra a consola na parte inferior do ecrã.
Depois de abrir a consola, pode fazer os seus primeiros registos de saída. Utilize console.log() para mostrar mensagens na consola. Pode passar tantos parâmetros quantos quiser e eles serão formatados em conformidade.
Outro comando útil na consola é a conclusão. Quando escreve algo, pode simplesmente premir a tecla Tab para obter sugestões. Isto aplica-se não só a console.log(), mas também a outras funções como console.error() ou console.warn().
Com console.error() pode criar mensagens de erro que aparecem em fonte vermelha. Isto ajuda-o a identificar problemas no seu código mais rapidamente. Também pode enviar avisos com console.warn(), que aparecem a amarelo.
Se tiver criado muitas entradas de registo, estas podem tornar-se rapidamente confusas. Por isso, a consola oferece a opção de filtrar os níveis de registo apresentados. Pode personalizar a visualização de modo a que apenas sejam mostrados erros, avisos ou informações. Por exemplo, defina o filtro para "Erro" para ver apenas mensagens de erro.
Certifique-se de que minimiza a utilização de console.log() e funções semelhantes no código de produção. É importante que o grande número de saídas de registo não afecte o desempenho da sua aplicação. No entanto, é útil durante o desenvolvimento para eliminar erros.
Uma caraterística útil da consola é a capacidade de executar diretamente o código JavaScript. Se definir um ponto de interrupção no código, pode utilizar o contexto atual na consola para apresentar variáveis ou executar operações. Pode introduzir facilmente variáveis como uma matriz na consola e apresentar o seu conteúdo.
Outra caraterística emblemática da consola é a capacidade de executar trechos de código de várias linhas. Por exemplo, se quiser criar uma função com setTimeout(), pode fazer o mesmo. Escreva o seu código, prima "Return" e veja a execução na consola.
A monitorização de variáveis à medida que navega pelo código é particularmente intuitiva com o DevTools. Quando atinge o ponto de interrupção, pode consultar as variáveis na consola e ver os seus valores, o que facilita muito a resolução de problemas.
Se houver vários quadros ou iFrames na sua aplicação, você pode selecionar o contexto através do console e trabalhar com os vários objetos de janela. Isto significa que também pode trabalhar eficazmente em sistemas numéricos complexos.
A consola oferece uma variedade de métodos para interagir com o DOM. Depois de apresentar as opções básicas, pode continuar com estes comandos adicionais para tornar o seu trabalho ainda mais eficiente.
Resumo
Este guia deu-lhe uma visão geral das funções mais importantes da consola das Ferramentas de desenvolvimento do Chrome. Já sabe como gerar resultados de registo, como filtrar os diferentes níveis de registo e como executar código JavaScript diretamente. Utilize estas funções para otimizar o seu trabalho de desenvolvimento e corrigir erros de forma eficiente.
Perguntas mais frequentes
Como posso abrir a consola?Pode abrir a consola utilizando o separador "Consola" ou o atalho "Escape".
Qual é a diferença entre consola.log() e consola.error()?A consola.log() apresenta a saída geral do registo, enquanto a consola.error() apresenta as mensagens de erro a vermelho.
Como posso filtrar os níveis de registo na consola?Pode personalizar os níveis de registo nas opções de filtro para apresentar apenas determinados tipos de saída.
Também posso executar código de várias linhas na consola?Sim, pode escrever e executar código de várias linhas na consola, utilizando os parênteses adequados e premindo "Return".
O que devo considerar no código de produção relativamente à consola?No código de produção, deve minimizar a utilização de console.log() e funções semelhantes para manter o desempenho.
