Qual è la differenza tra console.dir e console.log?

In Chrome l' consoleoggetto definisce due metodi che sembrano fare la stessa cosa:

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

Ho letto da qualche parte online che dirprende una copia dell'oggetto prima di registrarlo, mentre logpassa solo il riferimento alla console, il che significa che quando vai a ispezionare l'oggetto che hai registrato, potrebbe essere cambiato. Tuttavia, alcuni test preliminari suggeriscono che non vi è alcuna differenza e che entrambi soffrono potenzialmente di mostrare oggetti in stati diversi rispetto a quando sono stati registrati.

Prova questo nella console di Chrome ( Ctrl+ Shift+ J) per vedere cosa intendo:

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

Ora, espandi [Object]sotto l'istruzione log e nota che mostra fooun valore di 2. Lo stesso vale se ripeti l'esperimento usando dirinvece di log.

La mia domanda è: perché esistono queste due funzioni apparentemente identiche console?

In Firefox, queste funzioni si comportano in modo abbastanza diverso: logstampa solo una toStringrappresentazione, mentre dirstampa un albero navigabile.

In Chrome, logstampa già un albero - il più delle volte . Tuttavia, Chrome logcontinua a stringere determinate classi di oggetti, anche se hanno proprietà. Forse l'esempio più chiaro di differenza è un'espressione regolare:

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

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

Puoi anche vedere una chiara differenza con le matrici (ad es. console.dir([1,2,3])) Che sono logdifferenziate dagli oggetti normali:

> 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] }
        ...

Anche gli oggetti DOM presentano comportamenti diversi, come indicato in un'altra risposta .

Un'altra differenza utile in Chrome esiste quando si inviano elementi DOM alla console.

Avviso:

• console.log stampa l'elemento in un albero simile a HTML
• console.dir stampa l'elemento in un albero simile a JSON

In particolare, console.logdà un trattamento speciale agli elementi DOM, mentreconsole.dir non lo fa. Ciò è spesso utile quando si cerca di vedere la rappresentazione completa dell'oggetto DOM JS.

Sono disponibili ulteriori informazioni nel riferimento API della Console di Chrome su questa e altre funzioni.

Penso che Firebug lo faccia diversamente dagli strumenti di sviluppo di Chrome. Sembra che Firebug ti dia una versione rigorosa dell'oggetto mentreconsole.dir ti dà un oggetto espandibile. Entrambi ti danno l'oggetto espandibile in Chrome, e penso che sia da lì che potrebbe nascere la confusione. O è solo un bug in Chrome.

In Chrome, entrambi fanno la stessa cosa. Espandendo il tuo test, ho notato che Chrome ottiene il valore corrente dell'oggetto quando lo espandi.

> 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

Puoi usare quanto segue per ottenere una versione restrittiva di un oggetto se è quello che vuoi vedere. Questo ti mostrerà qual è l'oggetto nel momento in cui viene chiamata questa linea, non quando lo espandi.

console.log(JSON.stringify(o));

Utilizzare console.dir () per generare un oggetto sfogliabile su cui è possibile fare clic anziché la versione .toString (), in questo modo:

console.dir(obj/this/anything)

Come mostrare l'oggetto completo nella console di Chrome?

Dal sito firebug http://getfirebug.com/logging/

Chiamando console.dir (oggetto) verrà registrato un elenco interattivo delle proprietà di un oggetto, come> una versione in miniatura della scheda DOM.

Seguendo i consigli di Felix Klings l'ho provato nel mio browser Chrome.

console.dir([1,2]) fornisce il seguente output:

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

Mentre console.log([1,2])fornisce il seguente output:

[1, 2]

Quindi credo che console.dir()dovrebbe essere usato per ottenere maggiori informazioni come prototipo ecc. In matrici e oggetti.

Differenza tra console.log()e console.dir():

Ecco la differenza in breve:

• console.log(input): Il browser accede in modo ben formattato
• console.dir(input): Il browser registra solo l'oggetto con tutte le sue proprietà

Esempio:

Il seguente codice:

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 quanto segue negli strumenti di sviluppo di Google:

Nessuna delle 7 risposte precedenti ha detto che console.dirsupporta argomenti extra : depth, showHidden, e se per l'usocolors .

Di particolare interesse è depth, che (in teoria) consente di attraversare oggetti in più dei 2 livelli predefiniti che console.logsupporta.

Ho scritto "in teoria", perché, in pratica, quando ho avuto un oggetto mangusta e corse console.log(mongoose)e console.dir(mongoose, { depth: null }), l'uscita era lo stesso. Ciò che effettivamente ricorreva profondamente mongoosenell'oggetto stava usando util.inspect:

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