Qual é a diferença entre console.dir e console.log?

357

No Chrome, o consoleobjeto define dois métodos que parecem fazer a mesma coisa:

console.log(...)
console.dir(...)

Li em algum lugar on-line que dirtira uma cópia do objeto antes de registrá-lo, enquanto logapenas passa a referência ao console, o que significa que quando você inspeciona o objeto que registrou, ele pode ter sido alterado. No entanto, alguns testes preliminares sugerem que não há diferença e que eles sofrem com a exibição potencial de objetos em estados diferentes do que quando foram registrados.

Tente isso no console do Chrome ( Ctrl+ Shift+ J) para ver o que quero dizer:

> o = { foo: 1 }
> console.log(o)
> o.foo = 2

Agora, expanda a [Object]instrução abaixo do log e observe que ela é exibida foocom o valor 2. O mesmo acontece se você repetir a experiência usando em dirvez de log.

Minha pergunta é: por que essas duas funções aparentemente idênticas existem console?

Drew Noakes
fonte
65
Experimente console.log([1,2])e console.dir([1,2])você verá a diferença.
Felix Kling
No firebug, o conteúdo de um objeto registrado console.dirnão muda, por isso faz uma grande diferença.
Eugene Yarmash
3
Cuidado console.dir(): esse recurso não é padrão ! Portanto, não o use na produção;)
fred727 10/10/2015
2
O URL desta pergunta é mostrado na imagem em Mozilla Developer Network - Console.log () - Diferença com console.dir () .
user7393973
11
@ user7393973 bom encontrar! Na verdade, a imagem é da minha resposta abaixo, então foi realmente capturada no meu laptop. É bom devolver algo à MDN. Que grande recurso é esse.
de Drew Noakes

Respostas:

352

No Firefox, essas funções se comportam de maneira bem diferente: logsomente imprime uma toStringrepresentação, enquanto dirimprime uma árvore navegável.

No Chrome, logjá imprime uma árvore - na maioria das vezes . No entanto, o Chrome logainda especifica certas classes de objetos, mesmo que tenham propriedades. Talvez o exemplo mais claro de diferença seja uma expressão regular:

> console.log(/foo/);
/foo/

> console.dir(/foo/);
* /foo/
    global: false
    ignoreCase: false
    lastIndex: 0
    ...

Você também pode ver uma diferença clara com matrizes (por exemplo, console.dir([1,2,3])) que são logdefinidas de maneira diferente dos objetos normais:

> console.log([1,2,3])
[1, 2, 3]

> console.dir([1,2,3])
* Array[3]
    0: 1
    1: 2
    2: 3
    length: 3
    * __proto__: Array[0]
        concat: function concat() { [native code] }
        constructor: function Array() { [native code] }
        entries: function entries() { [native code] }
        ...

Objetos DOM também exibem comportamento diferente, conforme observado em outra resposta .

apsillers
fonte
11
Não esqueça que o console.dir mantém uma referência ao objeto. Você provavelmente não deseja usá-lo extensivamente na produção. Provavelmente só funciona se o console for mostrado.
Jean-Philippe Leclerc
No Chromium 45 no Ubuntu, console.logparece ser a versão simplificada "Firefox" que parece toStringmais uma árvore do que uma árvore. Ainda não tenho certeza quando eles mudaram, mas o fizeram.
Icedwater
3
@icedwater: Depende se o console está aberto quando você liga console.logou abre mais tarde. Sim com certeza. :-)
TJ Crowder
Você também pode ver uma diferença clara com a função. No Chrome, ele irá imprimir o código-fonte Função com console.log, mas com console.dir, você pode ver prototype, argumentspropriedades.
Tina Chen
11
Agora parece que console.loge console.dirrealmente voltar a mesma representação em [1,2,3]no Firefox.
Xj6
151

Existe outra diferença útil no Chrome ao enviar elementos DOM para o console.

Aviso prévio:

  • console.log imprime o elemento em uma árvore semelhante a HTML
  • console.dir imprime o elemento em uma árvore semelhante a JSON

Especificamente, console.logdá tratamento especial aos elementos DOM, enquanto console.dirnão. Isso geralmente é útil ao tentar ver a representação completa do objeto DOM JS.

Há mais informações na referência da API do Chrome Console sobre esta e outras funções.

Drew Noakes
fonte
Eu acredito que esta informação é do developer.mozilla.org/en-US/docs/Web/API/Console/log
loneshark99
11
@ loneshark99 na verdade é o contrário. Observe o URL na captura de tela? Eles copiaram minha resposta. Mas tudo bem, porque isso é permitido pela licença nas respostas SO e eu amo o MDN de qualquer maneira.
Drew Noakes
Entendi, era isso que eu estava pensando inicialmente, mas depois pensei por que eles iriam copiar daqui. Faz sentido . Boa informação
loneshark99 20/02
4

Acho que o Firebug faz diferente das ferramentas de desenvolvimento do Chrome. Parece que o Firebug fornece uma versão stringizada do objeto, enquanto console.dirfornece um objeto expansível. Ambos oferecem o objeto expansível no Chrome, e acho que é daí que a confusão pode surgir. Ou é apenas um bug no Chrome.

No Chrome, ambos fazem a mesma coisa. Ao expandir seu teste, notei que o Chrome obtém o valor atual do objeto quando você o expande.

> o = { foo: 1 }
> console.log(o)
Expand now, o.foo = 1
> o.foo = 2
o.foo is still displayed as 1 from previous lines

> o = { foo: 1 }
> console.log(o)
> o.foo = 2
Expand now, o.foo = 2

Você pode usar o seguinte para obter uma versão rigorosa de um objeto, se é isso que deseja ver. Isso mostrará como é o objeto no momento em que essa linha é chamada, não quando você o expande.

console.log(JSON.stringify(o));
sachleen
fonte
2

No site do firebug http://getfirebug.com/logging/

Chamar console.dir (objeto) registrará uma lista interativa das propriedades de um objeto, como> uma versão em miniatura da guia DOM.

Dries Marien
fonte
0

Seguindo o conselho de Felix Klings, experimentei no meu navegador Chrome.

console.dir([1,2]) fornece a seguinte saída:

Array[2]
 0: 1
 1: 2
 length: 2
 __proto__: Array[0]

While console.log([1,2])fornece a seguinte saída:

[1, 2]

Então eu acredito que console.dir()deveria ser usado para obter mais informações, como protótipos etc. em matrizes e objetos.

Bimal
fonte
0

Diferença entre console.log()e console.dir():

Aqui está a diferença em poucas palavras:

  • console.log(input): O navegador faz logon de maneira bem formatada
  • console.dir(input): O navegador registra apenas o objeto com todas as suas propriedades

Exemplo:

O código a seguir:

let obj = {a: 1, b: 2};
let DOMel = document.getElementById('foo');
let arr = [1,2,3];

console.log(DOMel);
console.dir(DOMel);

console.log(obj);
console.dir(obj);

console.log(arr);
console.dir(arr);

Registra o seguinte nas ferramentas de desenvolvimento do google:

insira a descrição da imagem aqui

Willem van der Veen
fonte
0

Nenhum dos 7 respostas anteriores mencionou que console.dirsuporta argumentos extras : depth, showHiddene se ao uso colors.

De particular interesse é o depthque (em teoria) permite a movimentação de objetos em mais do que os 2 níveis padrão console.logcompatíveis.

Eu escrevi "em teoria" porque, na prática, quando eu tinha um objeto Mongoose e correu console.log(mongoose)e console.dir(mongoose, { depth: null }), a saída era a mesma. O que realmente se repetiu profundamente no mongooseobjeto estava usando util.inspect:

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));
Dan Dascalescu
fonte