Curso de JavaScript — Parte 2/3
Introdução de JavaScript — Console
Clique aqui para ir para a parte 1!
Clique aqui para ir para a parte 3!
Console
Para trabalhar com javascript uma das funções mais utilizadas é o console.log(), porém existem várias da qual será descrita e detalhada mais abaixo.
Você pode usar o formato de comando mais longo, window.console.[command], se precisar evitar uma possível confusão com objetos locais chamados console.
assert
Usado para fazer teste no navegador, verificando se uma instrução é verdadeira ou falsa.
let x = 2;
console.assert((x == 1), "assert message: x != 1");clear
Limpa as mensagens da janela do console, incluindo mensagens de erro de script, e limpa também o script exibido na janela do console. Não limpa o script inserido no prompt de entrada do console.
console.clear();count
Exibe o número de vezes em que a chamada count() em particular foi invocada. Essa função recebe um argumento opcional label. console.count([label]);
for (let index = 0; index < 10; index++) {
console.count('loop');
}countReset
O método console.countReset() redefinir o contador usado com console.count().
console.countReset([label]);error
Essa função ‘Escreve’ uma mensagem de erro no Web Console.
Nota: console.exception() é um alias para console.error(); as funcionalidades deles são idênticas.
console.error(msg [, subst1, ..., substN]);
console.exception(obj1 [, obj2, ..., objN]);group
Cria um novo grupo em linha e recua todas as mensagens seguintes para um nível de indentação superior. Para voltar um nível, utilize groupEnd(). console.group([label]);
console.group(‘info’);
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd(‘info’);groupCollapsed
Inicia um agrupamento das mensagens enviadas à janela do console e envia o title opcional como um rótulo de grupo. Os grupos enviados usando groupCollapsed aparecem em uma exibição recolhida por padrão. Os grupos podem ser aninhados e aparecer em um modo de exibição de árvore na janela do console.
console.groupCollapsed([label]);
console.log("This is the outer level");
console.groupCollapsed('a');
console.log("Level 2");
console.groupCollapsed('b');
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd('b');
console.log("Back to level 2");
console.groupEnd('a');
console.log("Back to the outer level");groupEnd
Encerra o grupo atual.
info
Apresenta uma mensagem de saída no console do navegador . No Firefox e Chrome , um pequeno ícone “i” é apresentado próximo aos itens do log do console.
console.info(obj1 [, obj2, ..., objN]);
console.info(msg [, subst1, ..., substN]);log
Utilizado para a emissão de informações de registro em geral. Você pode utilizar substituição de string e outros argumentos com este método.
console.log(obj1[, obj2, ..., objN]);table
Exibe dados tabulares como uma tabela.
Essa função recebe um parâmetro obrigatório data, que deve ser um array ou um objeto, e um parâmetro opcional columns.
console.table(["apples", "oranges", "bananas"]);time e timeEnd
Inicia um cronômetro que você pode usar para monitorar quanto tempo uma operação leva. Você dá para cada cronômetro um nome único, e deve ter no máximo 10.000 deles sendo executados na página. Quando você chama console.timeEnd() com o mesmo nome, o navegador mostrará o tempo, em milissegundos, que se passou desde que o cronômetro inicia.
console.time("app start");
app.start();
console.timeEnd("app start");trace
Mostra um traçado de pilha.
const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();warn
Emite uma mensagem de alerta. Você pode utilizar substituição de string e argumentos adicionais com este método.
console.warn(“app start”);Uso de substituição de string
O uso de substituição de string pode ser usando nos console (log, error, warn, info, group).
┌──────────┬──────────────────────────────────────────┐
│ String │ Description │
├──────────┼──────────────────────────────────────────┤
│ %o │ Emite um link para o objeto JavaScript. │
│ %d ou %i │ Emite um número inteiro. │
│ %s │ Emite uma string. │
│ %f │ Emite um número de ponto flutuante. │
│ %o │ objeto │
│ %b │ binário │
│ %x │ hexadecimal │
│ %e │ exponente │
└──────────┴──────────────────────────────────────────┘console.log('%c Red ', 'color:#FFCCCC; background-color:#FF0000;');
console.log('%c Orange ', 'color:#ffe4b3; background-color:#ffa600;');
console.log('%c Yellow ', 'color:#b3b300; background-color:#ffff00;');
console.log('%c Green ', 'color:#33ff33; background-color:#008000;');
console.log('%c Blue ', 'color:#ccccff; background-color:#0000ff;');
console.log('%c Purple ', 'color:#ffb3ff; background-color:#800080;');
console.log('%c Black ', 'color:#cccccc; background-color:#000000;');
Obrigado por ler!
Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!
😊😊Até mais! 😊😊
