Home-theater-designers
O console do navegador da web é uma das ferramentas mais amplamente usadas para depurar aplicativos front-end. A API do console fornece aos desenvolvedores a capacidade de lidar com erros e mensagens de log.
console.log () é provavelmente o método mais comumente usado na API do console, mas também existem outros métodos que você pode usar em seu fluxo de trabalho. Este guia mostra os diferentes métodos de console do navegador da web que você pode usar para melhorar seu fluxo de trabalho de depuração.
Por que o registro é importante?
O registro no console do navegador da web é um dos melhores métodos de depuração de aplicativos front-end ou baseados em JavaScript.
Relacionado: 6 frameworks JavaScript que vale a pena aprender
A maioria dos navegadores da web modernos oferece suporte à API do console, tornando-a prontamente disponível para os desenvolvedores. O objeto console é responsável por fornecer acesso ao console de depuração do navegador. A implementação pode ser diferente entre os navegadores, mas a maioria dos métodos funcionará em todos os navegadores modernos.
Gorjeta : O console do seu navegador pode executar todos os códigos discutidos neste guia. pressione F12 no teclado para abrir as ferramentas dos desenvolvedores do navegador no Chrome ou Firefox.
Logging String Messages
Um dos métodos de console mais comuns é console.log () . Ele simplesmente envia uma mensagem de string ou algum valor para o console da web. Para valores simples ou mensagens de string, o console.log () método é provavelmente a melhor opção a ser usada.
qual é melhor otf ou ttf
Para produzir um Olá Mundo mensagem, você pode usar o seguinte.
console.log(`Hello World`); Outra característica especial do console.log () método é a capacidade de imprimir a saída de elementos DOM ou a estrutura de uma parte de um site, por exemplo, para produzir a estrutura do elemento body e tudo dentro dele usa o seguinte.
console.log(document.body) A saída é uma coleção de elementos DOM como uma árvore HTML.
Registro de objetos JavaScript interativos
o console.dir () método é usado para registrar propriedades interativas de objetos JavaScript. Por exemplo, você pode usá-lo para visualizar os elementos DOM em uma página da web.
A saída típica do console.dir () método é composto por todas as propriedades do objeto JavaScript especificado no formato JSON. Use o método abaixo para imprimir as propriedades de todos os elementos no corpo de uma página HTML:
console.dir(document.body) Avaliando Expressões
Você pode estar familiarizado com métodos de declaração de testes de unidade - bem, o console.assert () método funciona de maneira semelhante. Use o console.assert () método para avaliar uma expressão ou condição.
Quando o método assert falha, o console imprime uma mensagem de erro; caso contrário, não imprime nada. Use o código abaixo para avaliar se a idade de uma pessoa é maior que 18:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); A declaração acima falha e uma mensagem de erro é impressa de acordo.
Registro de dados em tabelas
Use o console.table () método para exibir dados em um formato tabular. Bons candidatos para exibição em forma de tabela incluem matrizes ou dados de objeto.
Observação : Alguns navegadores, como o Firefox, têm um limite máximo de 1.000 linhas que podem ser exibidas com o console.table () método.
Supondo que você tenha a seguinte matriz de objetos de carro:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Você pode exibir a matriz acima em uma tabela usando o método abaixo:
console.table(cars); Registro de mensagens por categoria
As mensagens do console do navegador da Web são categorizadas principalmente em três grupos: erro, aviso e informações.
Erros
Para imprimir especificamente mensagens de erro no console usando o console.error () método, as mensagens relacionadas ao erro são exibidas em fonte vermelha.
console.error('error message'); Avisos
Para imprimir avisos, use o seguinte. Como na maioria dos cenários, as mensagens de aviso são exibidas em laranja:
console.warn('warning message');Informações
Para imprimir informações gerais no console, use o console.info () método:
console.info('general info message') É fácil filtrar ou localizar mensagens no console do navegador quando estão devidamente categorizadas.
Rastreando o fluxo do programa
Use o console.trace () método para imprimir um rastreamento de pilha do fluxo ou execução do programa. Este é um recurso muito útil para depuração porque imprime a ordem em que as funções são executadas em seu programa.
Para ver o console.trace () método em ação, você pode criar três funções (conforme abaixo) e colocar um rastreamento de pilha em uma das funções.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}No console do seu navegador, chame ou acione functionOne () e você obterá um rastreamento de pilha das chamadas de função impressas na última ordem a entrar, primeiro a sair (LIFO) porque é uma pilha.
Execução do programa de cronometragem
Para cronometrar quanto tempo uma operação leva para ser executada em seu programa, você pode usar o console.time () método. console.time () é normalmente usado junto com o console.timeEnd () método onde o último é usado para encerrar o cronômetro.
Você pode ter até 10.000 cronômetros em execução por página da web, destacando a importância de rotular corretamente seus cronômetros.
Para cronometrar quanto tempo um loop for leva para percorrer os números de 1 a 50.000, você pode usar o cronômetro da seguinte maneira.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Contando
o console.count () método é usado para controlar o número de vezes que uma função ou algum trecho de código foi chamado em um programa. Por exemplo, podemos controlar o número de vezes que um loop for foi executado da seguinte maneira:
for(i=0; i<4; i++ ){
console.count();
}Agrupando mensagens de registro
Assim como o método do cronômetro, o console.group () , e console.groupEnd () os métodos são geralmente usados em pares.
O método de grupo ajuda a organizar melhor suas mensagens de log. Por exemplo, podemos criar um grupo de mensagens de aviso com os avisos de rótulo da seguinte maneira.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()As duas mensagens dentro do grupo de aviso são categorizadas visualmente conforme visto na saída abaixo.
Limpando o console
Por último, mas não menos importante, aqui estão várias maneiras de limpar mensagens de log no console do navegador.
Use o console.clear () método da seguinte forma.
console.clear() Você também pode limpar o console do navegador usando os atalhos de teclado do navegador.
Google Chrome : Ctrl + L
Raposa de fogo : Ctrl + Shift + L
Usando o console do navegador ao máximo
Este guia mostrou alguns dos diferentes métodos de console do navegador da web disponíveis para ajudá-lo a depurar aplicativos front-end. A API do console é muito leve, fácil de aprender e amplamente suportada na maioria dos navegadores modernos.
downloads gratuitos do microsoft office para mac
Faça uma validação CAPTCHA de seu próximo projeto e coloque suas novas habilidades de depuração à prova!
Compartilhado Compartilhado Tweet O email Crie um formulário de validação CAPTCHA usando HTML, CSS e JavaScriptProteja seus sites com validação CAPTCHA.
Leia a seguir Tópicos relacionados- Programação
- Desenvolvimento web
- JavaScript
Mwiza desenvolve software profissionalmente e escreve extensivamente em Linux e programação front-end. Alguns de seus interesses incluem história, economia, política e arquitetura empresarial.
Mais de Mwiza KumwendaAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever