Jaka jest różnica między konsolą.dir i konsola.log?

Kolejna użyteczna różnica w Chrome istnieje przy wysyłaniu elementów DOM do konsoli.

Notice:

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

W szczególności, {[0] } daje specjalne traktowanie elementom DOM, podczas gdy console.dir nie. Jest to często przydatne, gdy próbuje zobaczyć pełną reprezentację obiektu DOM JS.

Jest więcej informacji w Chrome Console API reference o tej i innych funkcjach.

Myślę, że Firebug robi to inaczej niż narzędzia dev Chrome. Wygląda na to, że Firebug daje stringową wersję obiektu, podczas gdy console.dir daje rozszerzalny obiekt. Oba dają rozszerzalny obiekt w Chrome i myślę, że stąd może pochodzić zamieszanie. Albo to tylko błąd w Chrome.

W Chrome, oba robią to samo. Rozwijając swój test, zauważyłem, że Chrome pobiera bieżącą wartość obiektu po rozwinięciu go.

> 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ć poniżej, aby uzyskać stringową wersję obiektu, jeśli to jest to, co chcesz zobaczyć. To pokaże Ci, czym jest obiekt w momencie wywołania tej linii, a nie po jej rozwinięciu.

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

Użyj konsoli.dir() aby wypisać obiekt, który można przeglądać, można kliknąć zamiast .wersja toString (), jak Ta:

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 (object) zarejestruje interaktywną listę właściwości obiektu, na przykład > miniaturową wersję karty DOM.

Żadna z 7 wcześniejszych odpowiedzi nie wspomniała, że console.dir obsługuje dodatkowe argumenty: depth, showHidden, i czy używać colors.

Szczególnie interesująca jest depth, która (teoretycznie) umożliwia przemieszczanie obiektów na więcej niż domyślne 2 poziomy, które obsługuje console.log.

Napisałem "w teorii", ponieważ w praktyce, gdy miałem obiekt mangusty i uruchomiłem console.log(mongoose) i console.dir(mongoose, { depth: null }), wynik był taki sam. To, co faktycznie weszło głęboko w obiekt mongoose było za pomocą util.inspect:

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

Za radą Felixa Klingsa wypróbowałem go w przeglądarce chrome.

console.dir([1,2]) daje następujące wyjście:

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

While console.log([1,2]) daje następujące wyjście:

[1, 2]

Więc uważam, że console.dir() powinny być używane do uzyskania większej ilości informacji, takich jak prototyp itp. w tablicach i obiektach.

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

Oto różnica w skrócie:

• 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:

Następujący 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);

Zapisuje w narzędziach Google dev:

Cóż, Standard konsoli (od zatwierdzenia ef88ec7a39fdfe79481d7d8f2159e4a323e89648) aktualnie wywołuje konsolę.dir Aby zastosować ogólne formatowanie obiektów JavaScriptprzed przekazaniem go do drukarki (Operacja na poziomie specyfikacji), ale dla konsoli z jednym argumentem .log call, spec kończy się przekazaniem obiektu JavaScript bezpośrednio do drukarki .

Ponieważ spec faktycznie pozostawia prawie wszystko o drukarce działanie do implementacji, to pozostaje do ich uznania, jakiego typu formatowania użyć dla konsoli.log ().