Jaka jest różnica między konsolą console.dir a konsolą.log?

Question

W Chrome przedmiotem console definiuje dwie metody, które wydają się zrobić to samo:

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

Czytałem gdzieś w Internecie, że dir wykonuje kopię obiektu przed zalogowaniem się, natomiast log tylko przekazuje odwołanie do konsoli , co oznacza, że ​​do czasu sprawdzenia zarejestrowanego obiektu mogło się to zmienić. Jednak niektóre wstępne testy sugerują, że nie ma różnicy i że obaj cierpią z powodu potencjalnego pokazywania obiektów w różnych stanach, niż kiedy byli zalogowani.

Spróbuj w konsoli Chrome (Ctrl + Przesunięcie + J), aby zobaczyć, co mam na myśli:

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

Teraz rozwiń [Object] pod oświadczeniem dziennika i zauważ, że to pokazuje foo o wartości 2. To samo dotyczy powtórzenia eksperymentu z użyciem dir zamiast .

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

Answer 1

W Firefoksie, to funkcja zachowują się zupełnie inaczej: log drukuje tylko na zewnątrz toString reprezentację, natomiast dir wypisuje żeglowna drzew.

W Chrome, log już wypisuje drzewo - przez większość czasu. Jednak Chrome log nadal koduje pewne klasy obiektów, nawet jeśli mają one właściwości.Być może najlepszym przykładem różnicy jest wyrażeniem regularnym:

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

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

Można również zobaczyć wyraźną różnicę z tablicami (np console.dir([1,2,3])), które są log ged inaczej od normalnych obiektów:

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

DOM obiekty wykazują również różne zachowania, as noted on another answer.

Answer 2

Z witryny firebug http://getfirebug.com/logging/

Wywołanie console.dir (Object) zanotuje interaktywną listę właściwości obiektu, jak> miniaturowa wersja karcie DOM.

Answer 3

Zastosowanie console.dir() do wyprowadzenia browse-stanie obiektu można klikać zamiast .ToString() wersji, na przykład:

console.dir(obj/this/anything) 

How to show full object in Chrome console?

Answer 4

myślę Firebug robi to inaczej niż narzędzia deweloperskie Chrome. Wygląda na to, że Firebug daje ci usztywnioną wersję obiektu, podczas gdy console.dir daje ci rozszerzalny obiekt. Oba dają rozszerzalny obiekt w Chrome i myślę, że to stąd może powstać zamieszanie. Lub jest to po prostu błąd w Chrome.

W Chrome obie robią to samo. Rozszerzając Twój test, zauważyłem, że Chrome pobiera aktualną wartość obiektu podczas jego rozwijania.

> 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 użyć następujących opcji, aby uzyskać usztywnioną wersję obiektu, jeśli chcesz to zobaczyć. Spowoduje to wyświetlenie obiektu w momencie wywołania tej linii, a nie jej rozwinięcia.

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

Answer 5

W następstwie porady Felixa Klingsa wypróbowałem ją w mojej przeglądarce Chrome.

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

Array [2]

0: 1

1: 2

długość: 2

_ proto _: Tablica [0]

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

[1, 2]

Wierzę, że konsola console.dir() powinna być używana w celu uzyskania dodatkowych informacji, takich jak prototyp itp. W tablicach i obiektach.

Answer 6

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

Wskazówka:

• console.log drukuje element w drzewie HTML-jak
• console.dir drukuje element w drzewie JSON-like

Zwłaszcza console.log daje specjalne traktowanie elementów DOM, podczas gdy console.dir nie. Jest to często przydatne przy próbie zobaczenia pełnej reprezentacji obiektu DOM JS.

W tej Chrome Console API reference jest więcej informacji na temat tej i innych funkcji.