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

357

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?

Drew Noakes
źródło
65
Spróbuj console.log([1,2])i console.dir([1,2])zobaczysz różnicę.
Felix Kling
W firebug zawartość logowanego obiektu console.dirnie zmienia się, więc robi to dużą różnicę.
Eugene Yarmash
3
Zachowaj ostrożność console.dir(): ta funkcja jest niestandardowa ! Więc nie używaj go do produkcji;)
fred727,
2
Adres URL tego pytania jest pokazany na obrazku w Mozilla Developer Network - Console.log () - Różnica w stosunku do console.dir () .
user7393973,
1
@ user7393973 ładne znaleźć! W rzeczywistości obraz pochodzi z mojej poniższej odpowiedzi , więc został uchwycony na moim laptopie. Miło jest oddać coś MDN. Cóż za wspaniały zasób.
Drew Noakes,

Odpowiedzi:

352

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 .

apsillery
źródło
11
Nie zapominaj, że console.dir zachowuje odniesienie do obiektu. Prawdopodobnie nie chcesz używać go intensywnie w produkcji. Prawdopodobnie działa tylko wtedy, gdy wyświetlona jest konsola.
Jean-Philippe Leclerc,
W Chromium 45 na Ubuntu console.logwydaje się być uproszczoną wersją „Firefox”, która wygląda toStringraczej jak drzewo niż drzewo. Nie jestem jeszcze pewien, kiedy to zmienili, ale tak zrobili.
wody lodowej
3
@icedwater: Zależy od tego, czy konsola jest otwarta podczas połączenia, console.logczy później. Tak naprawdę. :-)
TJ Crowder
Widać też wyraźną różnicę w funkcji. W chromie, to wydrukować z funkcji kodu źródłowego console.log, ale console.dirmożna zobaczyć prototype, argumentswłaściwości.
Tina Chen
1
Teraz wydaje się, że console.logi console.dirfaktycznie przywraca tę samą reprezentację [1,2,3]w przeglądarce Firefox.
Xji
151

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.

Drew Noakes
źródło
Wierzę, że te informacje pochodzą od developer.mozilla.org/en-US/docs/Web/API/Console/log
loneshark99
11
@ loneshark99 faktycznie jest na odwrót. Zauważ adres URL na zrzucie ekranu? Skopiowali moją odpowiedź. Ale to w porządku, ponieważ zezwala na to licencja na odpowiedzi SO, a mimo to uwielbiam MDN.
Drew Noakes,
Rozumiem, o tym początkowo myślałem, ale potem pomyślałem, dlaczego mieliby kopiować stąd. Ma sens . Dobra informacja
loneshark99,
4

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));
sachleen
źródło
3

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?

Skorpion-Książę
źródło
2

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.

Wysycha Marien
źródło
0

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.

Bimal
źródło
0

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:

wprowadź opis zdjęcia tutaj

Willem van der Veen
źródło
0

Ż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}));
Dan Dascalescu
źródło