Jaka jest różnica między console.dir i console.log?

W Chrome consoleobiekt definiuje dwie metody, które wydają się robić to samo:

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

Przeczytałem gdzieś w Internecie, że dirpobiera kopię obiektu przed jego zalogowaniem, podczas gdy logpo prostu przekazuje odwołanie do konsoli, co oznacza, że ​​zanim przejdziesz do sprawdzenia zalogowanego obiektu, mogło się to zmienić. Jednak niektóre wstępne testy sugerują, że nie ma różnicy i że oboje cierpią z powodu potencjalnie pokazywania obiektów w różnych stanach niż w momencie ich zalogowania.

Wypróbuj to w konsoli Chrome ( Ctrl+ Shift+ J), aby zobaczyć, co mam na myśli:

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

Teraz rozwiń [Object]poniżej instrukcji dziennika i zauważ, że pokazuje fooona wartość 2. To samo dotyczy powtórzenia eksperymentu za pomocą dirzamiast log.

Moje pytanie brzmi: dlaczego te dwie pozornie identyczne funkcje istnieją console?

W przeglądarce Firefox te funkcje zachowują się zupełnie inaczej: logdrukuje tylko toStringreprezentację, dira drzewo nawigowalne.

W Chrome logdrukuje już drzewo - przez większość czasu . Jednak Chrome lognadal określa niektóre klasy obiektów, nawet jeśli mają one właściwości. Być może najbardziej wyraźnym przykładem różnicy jest wyrażenie regularne:

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

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

Widać też wyraźną różnicę w przypadku tablic (np. console.dir([1,2,3])), Które są logoznaczone inaczej niż normalne obiekty:

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

Obiekty DOM również wykazują różne zachowanie, jak zauważono w innej odpowiedzi .

Kolejna przydatna różnica w Chrome występuje podczas wysyłania elementów DOM do konsoli.

Ogłoszenie:

• console.log drukuje element w drzewie podobnym do HTML
• console.dir drukuje element w drzewie podobnym do JSON

W szczególności console.logzapewnia specjalne traktowanie elementów DOM, podczas console.dirgdy nie. Jest to często przydatne, gdy próbujesz zobaczyć pełną reprezentację obiektu DOM JS.

Więcej informacji na temat interfejsu API konsoli Chrome można znaleźć na temat tej i innych funkcji.

Myślę, że Firebug robi to inaczej niż narzędzia programistyczne Chrome. Wygląda na to, że Firebug daje ci strunowaną wersję obiektu, a console.dirdaje obiekt rozwijany. Oba dają ci rozszerzalny obiekt w Chrome i myślę, że stąd może się pojawić zamieszanie. Lub to tylko błąd w Chrome.

W Chrome oba działają tak samo. Rozwijając twój test, zauważyłem, że Chrome pobiera bieżącą wartość obiektu po jego rozwinięciu.

> 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

Możesz skorzystać z poniższych instrukcji, aby uzyskać strunkową wersję obiektu, jeśli chcesz to zobaczyć. Pokaże to, czym jest obiekt w momencie wywołania tej linii, a nie po jej rozwinięciu.

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

Użyj console.dir (), aby wyświetlić obiekt, który można przeglądać, przez który można kliknąć zamiast wersji .toString (), jak poniżej:

console.dir(obj/this/anything)

Jak wyświetlić pełny obiekt w konsoli Chrome?

Ze strony firebug http://getfirebug.com/logging/

Wywołanie konsoli.dir (obiekt) spowoduje zarejestrowanie interaktywnej listy właściwości obiektu, takich jak> miniaturowa wersja karty DOM.

Zgodnie z radą Felixa Klingsa wypróbowałem to w mojej przeglądarce Chrome.

console.dir([1,2]) daje następujący wynik:

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

Chociaż console.log([1,2])daje następujące dane wyjściowe:

[1, 2]

Uważam więc, że console.dir()powinien być używany do uzyskiwania większej ilości informacji, takich jak prototyp itp., W tablicach i obiektach.

Różnica między console.log()i console.dir():

Oto różnica w pigułce:

• console.log(input): Przeglądarka loguje się w ładnie sformatowany sposób
• console.dir(input): Przeglądarka rejestruje tylko obiekt ze wszystkimi jego właściwościami

Przykład:

Poniższy kod:

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

Rejestruje następujące narzędzia Google Dev:

Żaden z 7 poprzednich odpowiedziach wspomniano, że console.dirwsporniki dodatkowych argumentów : depth, showHiddeni czy do użytku colors.

Szczególnie interesujące jest to depth, które (teoretycznie) pozwala na przemierzanie obiektów na więcej niż domyślne 2 console.logobsługiwane poziomy .

Napisałem „teoretycznie”, bo w praktyce, gdy miałem obiektu Mongoose i pobiegł console.log(mongoose)i console.dir(mongoose, { depth: null })wyjście było to samo. Co faktycznie recursed głęboko do mongooseobiektu został za pomocą util.inspect:

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