Se você está envolvido em programação na web, isso significa que você não precisa falar sobre a importância da depuração no seu trabalho. Freqüentemente, bibliotecas externas são usadas para gravar dados em logs, formatá-los ou exibi-los na tela, sem levar em conta o fato de que os programadores têm comandos JavaScript para trabalhar com consoles incorporados aos navegadores. E esses consoles têm recursos muito mais sérios do que parece à primeira vista.
Talvez a primeira coisa que muitas pessoas pensam quando dizem "console" é o comando
console.log() . No entanto, ela é apenas uma das muitas equipes desse tipo. O material, cuja tradução publicamos hoje, é dedicado aos recursos do trabalho com o console JavaScript.
O que é um console?
O console do JavaScript é um mecanismo integrado aos navegadores modernos que suporta ferramentas de desenvolvimento internas em uma interface de linha de comando. Usando o console, um desenvolvedor pode fazer o seguinte:
- Visualize logs de erros e avisos que ocorrem em uma página da web.
- Interaja com uma página da web usando comandos JavaScript.
- Depure aplicativos e trabalhe com o DOM diretamente do navegador.
- Investigue e analise a atividade da rede.
Em geral, o console oferece ao desenvolvedor a capacidade de escrever código JavaScript diretamente no navegador, monitorar o que está acontecendo nas páginas e gerenciar esses processos.
Métodos console.log, console.error, console.warn e console.info
Provavelmente, os métodos mais usados ao trabalhar com o console são
console.log() ,
console.error() ,
console.warn() e
console.info() . Você pode passar um ou mais parâmetros para esses métodos. O sistema calcula o valor de cada um deles e combina todos os resultados em uma sequência, partes das quais são separadas por espaços. No caso de objetos ou matrizes, esses comandos permitem que você os exiba de uma forma que permita visualizar o conteúdo deles. Aqui está como fica.
Usando vários comandos para gerar dados para o consoleMétodo Console.group
O método
console.group() permite coletar uma série de chamadas para
console.log() (assim como outros métodos similares) em grupos cujo conteúdo pode ser recolhido e expandido. O uso desse método é muito simples: depois de chamar
console.group() (ou após
console.groupCollapsed() , se você deseja exibir o grupo imediatamente minimizado), é necessário fazer todas as chamadas
console.log() que precisam ser agrupadas. Em seguida, no final do conjunto de comandos que você deseja agrupar, é necessário colocar o comando
console.groupEnd() . Considere um exemplo.
function doSomething(obj){ console.group('doSomething Profile'); const _data = new Date(); console.log('evaluating data: ', _data); const _fullName = `${obj.firstName} ${obj.lastName}`; console.log('fullName: ', _fullName); const _id = Math.random(1); console.log('id: ', _id); console.groupEnd(); } doSomething({"firstName":"Riccardo", "lastName":"Canella"});
Após a execução desse fragmento de código, o seguinte chegará ao console.
Agrupando dados no console usando o método console.group ()Método Console.table
Depois que soube da existência do método
console.table() , minha vida mudou para sempre. Por exemplo, o uso do comando
console.log() regular para gerar código JSON ou matrizes JSON grandes é um pesadelo. O método
console.table() permite exibir estruturas de dados complexas em tabelas agradáveis, cujas colunas podem receber nomes passando-os como parâmetros (nem todos os navegadores suportam esse recurso
console.table() ). Aqui está um exemplo de trabalho com essa equipe.
const typeOfConsole = [ {name:'log', type:'standard'}, {name:'info', type:'standard'}, {name:'table', type:'wow'} ]; console.table(typeOfConsole); const mySocial = { facebook: true, linkedin: true, flickr: true, instagram: true, VKontaktebadoo: false }; console.table(mySocial, ["Socials", "I'v an account"]);
O que aconteceu e parece ótimo e pode facilitar a depuração.
Tabularize a saída usando console.table ()Métodos console.count, console.time e console.timeEnd
Os métodos
console.count() ,
console.time() e
console.timeEnd() podem ser chamados de uma faca suíça para um desenvolvedor envolvido em aplicativos de depuração. Portanto, o método
console.count() permite contar o número de suas próprias chamadas e exibi-lo no console com o rótulo fornecido. O método
console.time() permite executar um cronômetro nomeado (o nome é passado a ele como um parâmetro, até 10.000 cronômetros podem estar presentes em uma página). Para parar um timer específico, o comando
console.timeEnd() é usado com o rótulo do timer passado como parâmetro. Ela para o cronômetro e exibe a hora do trabalho dele no console. Veja como usar esses métodos.
console.time('total'); console.time('init arr'); const arr = new Array(20); console.timeEnd('init arr'); for(var i = 0; i < arr.length; i++){ arr[i] = new Object(); const _type = (i % 2 === 0) ? 'even' : 'odd'; console.count(_type+'added'); } console.timeEnd('total');
E aqui está o resultado do trabalho desse código no console.
Usando os métodos console.count (), console.time () e console.timeEnd ()Métodos Console.trace e console.assert
Os métodos
console.trace() e
console.assert() permitem gerar informações da pilha do local em que foram chamadas. Imagine que você está desenvolvendo uma biblioteca JS e deseja informar ao usuário onde ocorreu o erro. Nesse caso, esses métodos podem ser muito úteis. O método
console.assert() é semelhante ao
console.trace() , a diferença entre os dois é que
console.assert() somente produzirá dados se a condição passada a ele não for atendida. Veja como trabalhar com esses métodos.
function lesserThan(a,b){ console.assert(a<b, { "message":"a is not lesser than b", "a": a, "b": b }); } lesserThan(6,5); console.trace("End");
É fácil ver que a saída gerada por esse trecho de código se parece com algo semelhante ao React (ou em qualquer outra biblioteca) quando a estrutura relata uma exceção.
O resultado do uso dos comandos console.assert () e console.trace ()Comandos para trabalhar com o console e o código de produção
Os comandos para trabalhar com o console são necessários no estágio de desenvolvimento e depuração de aplicativos. Isso significa que, quando chegar a hora do lançamento do produto, esses comandos deverão ser removidos do código. Você pode simplesmente esquecê-lo e, algum tempo após a montagem da versão de produção do projeto, observe que o programa grava algo no console quando não há necessidade. Não carregue computadores com trabalho desnecessário, embora aparentemente insignificante como a saída de dados para o console. Ao mesmo tempo, levando em consideração o fato de que os comandos para trabalhar com o console podem ser úteis durante a finalização do aplicativo, é melhor não excluí-los permanentemente do código-fonte do programa, mas removê-los apenas de sua versão de produção. Aqui, os fundos para a montagem de projetos serão úteis. Portanto, uso constantemente o Webpack, tanto no trabalho quanto em meus próprios projetos. Essa ferramenta permite remover todos os comandos desnecessários para trabalhar com o console (é possível diferenciá-los de outros comandos) dos assemblies de produção usando o
uglifyjs-webpack-plugin .
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') var debug = process.env.NODE_ENV !== "production"; ..... optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // uglifyOptions: { // comments: false, compress: { // warnings: false, // drop_console: true }, } })] : [] }
Essa configuração é muito simples, mas facilita o trabalho diário do programador e elimina o problema de comandos esquecidos do console.
Sumário
Neste artigo, falamos sobre alguns comandos úteis para trabalhar com o console. Eles permitem, usando ferramentas que fazem parte dos navegadores modernos, resolver muitos problemas que acompanham o desenvolvimento e a depuração de aplicativos JavaScript do lado do cliente.
Caros leitores! Que tipo de comando para trabalhar com o console JavaScript você usa?
