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

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?

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 .

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.

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

Use console.dir () para gerar um objeto navegável no qual você pode clicar em vez da versão .toString (), assim:

console.dir(obj/this/anything)

Como mostrar o objeto completo no console do Chrome?

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.

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.

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:

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