Este guia fornecerá uma visão geral abrangente da utilização de snippets e da função de temporização nas Ferramentas de desenvolvimento do Chrome. Os snippets permitem-lhe criar snippets de código reutilizáveis que podem ser úteis ao programar e testar o seu código. Também lhe mostramos como medir o tempo de execução do código JavaScript para otimizar o desempenho das suas aplicações. Estas funcionalidades podem ser cruciais para obter uma melhor perceção do seu ambiente de desenvolvimento JavaScript.
Principais aprendizados
- Os snippets são snippets de código reutilizáveis que são armazenados nas Ferramentas de desenvolvimento do Chrome.
- Pode criar, editar e executar snippets para automatizar tarefas comuns.
- Pode utilizar as funções consola.time() e consola.timeEnd() para medir o tempo de execução de snippets de código.
- O tratamento correto das chamadas de tempo e tempo final é crucial para obter valores de medição corretos.
Guia passo-a-passo
Criar e gerir fragmentos de código
Primeiro, vamos ver como pode criar e gerir trechos de código nas Ferramentas de desenvolvimento do Chrome.
Para aceder aos snippets, abra as Ferramentas de desenvolvimento do Chrome, clique no separador "Fontes" e localize o painel Snippets. Pode aceder ao painel de snippets personalizando a vista ou através do menu.
Aqui pode criar novos snippets. Clique em "Novo snippet" para criar um novo snippet. Ser-lhe-á pedido que introduza um nome para o seu snippet; por exemplo, chame-lhe "Teste".
Assim que tiver dado um nome ao snippet, pode editá-lo de imediato. Aqui pode escrever o código JavaScript desejado, que será executado quando executar o snippet.
As alterações são guardadas temporariamente até as guardar premindo Ctrl + S (ou Command + S no Mac). Note que os snippets são guardados independentemente do sítio Web visitado, o que significa que pode utilizar os snippets em qualquer página.
Para executar um excerto, basta clicar no ícone de reprodução ou utilizar a combinação de teclas Ctrl + Enter (ou Command + Enter no Mac).
Quando executar o snippet, receberá o resultado diretamente na área da consola das Ferramentas de desenvolvimento.
Medição de tempo com console.time() e console.timeEnd()
Agora que você criou trechos com sucesso, vamos ver como medir o desempenho dos seus códigos JavaScript usando as funções console.time() e console.timeEnd().
Você pode iniciar uma medição de tempo inserindo console.time('Loop') no início do trecho de código que deseja medir. Certifique-se de que utiliza a mesma cadeia de caracteres em console.timeEnd('Loop') no final do código em questão. O tempo entre os dois é então exibido em milissegundos.
Se as duas cadeias de caracteres não corresponderem ou se se esquecer de chamar a função timeEnd, receberá um aviso.
Exemplo de medição de tempo
Vejamos um exemplo simples em que faz um loop sobre 100.000 elementos e os escreve numa matriz.
Defina console.time('Loop') antes do loop e console.timeEnd('Loop') depois do loop. Isto permite-lhe medir o tempo que o ciclo demora a ser executado.
Depois de experimentar esta funcionalidade, verá que a medição do tempo o ajuda a identificar e otimizar os estrangulamentos.
Notas importantes sobre a utilização
Note que a utilização de console.time() e console.timeEnd() não é recomendada para ambientes de produção. Estas funções só devem ser utilizadas para testes, uma vez que podem ser suportadas de forma diferente em diferentes ambientes JavaScript.
Conclusão
Aprendeu agora as noções básicas de utilização de snippets e dos métodos console.time() e console.timeEnd() nas Ferramentas de desenvolvimento do Chrome. Estas funções são poderosas para trabalhar de forma mais eficiente e compreender melhor o desempenho das suas aplicações.
Resumir
Resumindo, a utilização de snippets e de temporização nas Ferramentas de desenvolvimento do Chrome fornece-lhe ferramentas valiosas para aumentar a eficiência do seu desenvolvimento e obter uma visão mais aprofundada dos tempos de execução dos seus códigos JavaScript.
Perguntas frequentes
Como posso criar um snippet nas Ferramentas de desenvolvimento do Chrome? Clique em "Novo snippet" no separador "Fontes" e dê um nome ao seu snippet.
Como é que executo um snippet? Clique no símbolo de reprodução ou utilize a combinação de teclas Ctrl + Enter ou Command + Enter.
Como posso medir o tempo de execução de um código?Utilize console.time('label') no início e console.timeEnd('label') no fim do seu código para medir o tempo.
Posso utilizar snippets em qualquer página Web? Sim, os snippets são armazenados nas Ferramentas de desenvolvimento do Chrome e podem ser utilizados em qualquer página Web.
Existem restrições quanto à utilização de console.time()?Sim, console.time() não deve ser incluído no código de produção, uma vez que pode dar origem a erros inesperados.
