Se você gosta dos meus artigos, pode me pagar um café :)

A API do console é usada para depuração, impressão de mensagens e transferência de diversas informações para o console, especialmente em tempos de execução de JavaScript, como navegadores e Node.js. Mas para usar a API do console corretamente, você precisa saber exatamente o que é a API do console.

Neste artigo, explicarei a API do console para você. A API do console é um objeto. Este objeto possui chaves, e quando você escreve um método de console, você acessa o valor de uma chave no objeto de console.

Agora, vou explicar a você codificando meu próprio objeto de console para que você possa entender a lógica de como o método log funciona na API do console.

const customConsole = {
    log: function(message) {
        const timestamp = new Date().toISOString();
        const output = `[${timestamp}] LOG: ${message}`;
        alert(output); // Displaying the output (replace with console.log in a real scenario)
    }
};

customConsole.log("Hello, this is a custom console log!");

Tente ler o código. Como pode ser visto no código, criei um objeto de console personalizado e defini uma chave para este objeto, e o valor desta chave é uma função. Então acessei a chave de log deste objeto.

Como resultado, a API do console não possui apenas um método "log". Então, quantos são? Vamos descobrir agora.

Como pode ser visto na foto, o objeto console possui mais de uma chave e os valores dessas chaves. Esses valores são funções.

Podemos acessar essas funções com o objeto console.

console.error()
console.warn()

Agora vamos aprender o que algumas dessas funções fazem.

1. console.debug()

console.debug , uma função em JavaScript usada para fins de depuração no console do navegador. Por padrão, a saída do método console.debug() não será visível nas ferramentas de desenvolvedor do Chrome.

Exemplo :

function subtract(a, b) {
    console.debug("subtract function called:", { a, b });
    const result = a - b;

    if (result > 0) {
        console.debug("Result is positive.");
    } else if (result 



Saída : 



a saída do método console.debug() não será visível nas ferramentas de desenvolvedor do Chrome.



  
  
  2. console.error()


É um método usado em JavaScript para imprimir mensagens de erro no console. É usado para facilitar a depuração quando ocorre um erro. a mensagem pode receber formatação especial, como cores vermelhas e um ícone de erro.

Exemplo :


async function fetchData(ıd) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${ıd}`);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("posts data fetched successfully:", data);
        return data;

    } catch (error) {
        console.error(" error posts data :", error.message);
    }
}

fetchData(1);





Se houver um erro ao buscar dados, esta é a saída: 





  
  
  3.console.warn()


É um método usado em JavaScript para imprimir possíveis problemas ou situações que requerem atenção no console. É usado para facilitar a depuração quando ocorre um erro. a mensagem pode receber formatação especial, como cores amarelas e um ícone de aviso.

Exemplo :


  if (password.length 





  
  
  4. console.dir()


O método console.dir() exibe uma lista das propriedades do objeto JavaScript especificado. Nos consoles do navegador, a saída é apresentada como uma listagem hierárquica com triângulos de divulgação que permitem ver o conteúdo dos objetos filhos.

Exemplo :


const basket =  {
    name : "t-shirt",
    price : 100,
    quantity : 1,
    color : [ "blue" , "red" , "yellow"],
    size : [ "xs" , "s" , "m" , "l" , "xl"],
    total : function() {
        return this.price * this.quantity;
    }

}

console.dir(basket)
,
    tamanho: ["xs" , "s" , "m" , "l" , "xl"],
    total: função() {
        retorne este.preço * esta.quantidade;
    }

}

console.dir(cesta)




Saída
 : 





  
  
  5. console.dirxml()


O método console.dirxml() exibe uma árvore interativa dos elementos descendentes do elemento XML/HTML especificado. Se não for possível exibir como um elemento, a visualização JavaScript Object
 será mostrada. A saída é apresentada como uma lista hierárquica de nós expansíveis que permitem ver o conteúdo dos nós filhos.


Exemplo
 :
console.dirxml(document.body);
console.dirxml(documento.body);




Saída
 :





  
  
  6.console.assert()


O método console.assert()
 grava uma mensagem de erro no console se a afirmação for falsa. Se a afirmação for verdadeira, nada acontece.


Exemplo
 :
console.dirxml(document.body);
consolle.assert("a" === "f" , mensagem de erro)




Saída
 : 





  
  
  7. console.contagem()


O método console.count() registra o número de vezes que esta chamada específica para count()
 foi chamada.


Exemplo
 :
console.dirxml(document.body);
função cumprimentar(usuário) {
  console.contagem();
  return `oi ${usuário}`;
}

cumprimentar("Micheal");
cumprimentar("romano");
saudar();
console.contagem();




Saída
 : 





  
  
  Conclusão


Se uma condição não for verdadeira, uma mensagem de erro será impressa. Se a condição for verdadeira, não imprimirá nada.