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)?

javascript console console.log web-developer-toolbar 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.

Respostas:

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);

insira a descrição da imagem aqui

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 comconsole.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.

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