Diferença entre console.log () e console.debug ()?

143

O Google não foi útil para mim, pois a pesquisa por "console.debug" traz apenas um monte de páginas com as palavras "console" e "debug".

Eu estou querendo saber qual é a diferença entre console.log()e console.debug(). Existe alguma maneira de usar console.debug()várias instruções e, em seguida, basta pressionar um botão para impedir que todas as instruções de depuração sejam enviadas ao console (como após o lançamento de um site)?

— CaptSaltyJack
fonte

Aqui está como desativar as saídas do console.log stackoverflow.com/questions/1215392/…

— frazras

Você pode colocar cores. console.log ('% c texto de amostra', 'cor: verde;'); Ou adicione algum VAR no texto usando: console.log (`Sample $ {variable}`, 'color: green;');

— Gilberto B. Terra Jr.

74

Para pelo menos os consoles do IE, Firefox e Chrome, .debug () é apenas um alias para .log () adicionado para melhorar a compatibilidade

https://developer.mozilla.org/en-US/docs/Web/API/console

https://developers.google.com/chrome-developer-tools/docs/console-api#consoledebugobject_object

https://msdn.microsoft.com/en-us/library/ie/hh772183(v=vs.85).aspx

— Pete TNT
fonte

55

No Chrome debug()aparece em azul e log()preto

— Simon_Weaver

38

Uma melhoria séria em relação ao log ().

— Vael Victus

32

Em developer.mozilla.org/pt-BR/docs/Web/API/console : console.debug () - Observação: a partir do Chromium 58, esse método só aparece nos consoles do navegador Chromium quando o nível "Verbose" está selecionado.

— cilf

Usando Debug no Chrome: Chamando Debug não são permitidos

— Masoud Bimar

103

Tecnicamente console.log console.debuge console.infosão idênticos No entanto, a maneira como eles exibem os dados é um pouco diferente

console.log Texto em preto com nenhum ícone

console.info Texto de cor azul com ícone

console.debug Texto em preto puro

console.warn Texto de cor amarela com ícone

console.error Texto de cor vermelha com ícone

var playerOne = 120;
var playerTwo = 130;
var playerThree = 140;
var playerFour = 150;
var playerFive = 160;

console.log("Console.log" + " " +  playerOne);
console.debug("Console.debug" + " " +playerTwo);
console.warn("Console.warn" + " " + playerThree);
console.info("Console.info" + " " + playerFour);
console.error("Console.error" + " " + playerFive);

— Prabhakar Undurthi
fonte

No infonível do navegador google chrome , os logs são mostrados simplesmente com um ícone (igual ao instantâneo), mas o texto ( console.infotexto em sua postagem) está na cor preta e a cor de fundo da linha é branca. Possivelmente o seu instantâneo para o navegador Firefox.

— RBT

3

Obrigado pela resposta, muito claro com a captura de tela. Tenho que perguntar, por que a concatenação de strings? Por que não apenas em console.log("Console.log");vez de console.log("Console.log" + " " + playerOne);? O que " " + playerOnefaz?

— hofnarwillie

No meu console, recebo a mesma tela com

console.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn");  console.info("Console.info");  console.error("Console.error");

— kotchwane

36

Eles são quase idênticos - a única diferença é que as mensagens de depuração são ocultadas por padrão nas versões recentes do Chrome (você deve definir o nível de log Verbosena barra superior do Devtools enquanto estiver no console para ver as mensagens de depuração; as mensagens de log são visíveis por padrão).

— user2486570
fonte

2

Olá, isso parece verdade, mas não consigo encontrar nenhuma informação sobre esse comportamento. Os documentos do Chrome não o mencionam até hoje.

— Oligofren

3

Agora finalmente entendi "definir nível de log para Verbose no topo do console". Você quer dizer que nas Ferramentas de Desenvolvimento existe o console na parte inferior. Na parte superior desta seção, junto com o Filtro e o seletor de quadros, também há uma lista suspensa de verbosidade para os logs (predefinida como "Informações")

— oligofren em

1

Essa é a resposta mais relevante. Todo mundo menciona cores, mas isso é mais importante na IMO.

— DurkoMatko

15

console.info, console.debugmétodos são idênticos a console.log.

console.log Declaração de impressão
console.info Texto em preto com o ícone "i" na cor azul
console.debug Texto em azul

Documentação:

— Venkat
fonte

Console.info imprime cor azul, console.warn imprime cor amarela e console.error impressões de cor vermelha

— shivgre

Eu testei no Chrome 52.0.2743.82 Console.Info imprime em cores preto com ícone azul, console.warn imprime na cor preto com amarelo impressões ícone console.error na cor vermelha com ícone vermelho

— Venkat

Por favor edite sua resposta de acordo para que eu posso upvote ou downvote remover, você notou a cor azul ícone "i" antes do texto impresso ao usar console.info ()

— shivgre

2

Se você desejar desativar o registro após a conclusão de um produto, poderá substituir a console.debug()função ou criar outra personalizada.

console.debug = function() {
    if(!console.debugging) return;
    console.log.apply(this, arguments);
};

console.debugging = true;
console.debug('Foo', {age:41, name:'Jhon Doe'});

Foo▸ {idade: 41 anos, nome: "Jhon Doe"}

console.debugging = false;
console.debug('Foo', {age:26, name:'Jane Doe'});

Sem saída

No entanto, eu ainda não achei uma maneira de colorir as saídas.

— Espen MS
fonte

1

De Documentação de navegadores, As log, debuge também infométodos são idênticos em implementação sábio, mas varia na cor e ícone

https://jsfiddle.net/yp4z76gg/1/

— Venkat
fonte

1

Este deve ser um comentário ou adicionar mais explicações com a resposta de como ambos são idênticos ou nenhuma diferença para entender OP e others.Thanks

— ρяσѕρєя K