В чем разница между console.dir и console.log?

В Chrome consoleобъект определяет два метода, которые, кажется, делают одно и то же:

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

Я где-то читал в Интернете, где dirперед записью берется копия объекта, тогда как я logпросто передаю ссылку на консоль, а это означает, что к тому времени, когда вы начнете проверять зарегистрированный объект, он может измениться. Однако некоторые предварительные испытания показывают, что нет никакой разницы и что они оба страдают от потенциального отображения объектов в разных состояниях, чем когда они были зарегистрированы.

Попробуйте это в консоли Chrome ( Ctrl+ Shift+ J), чтобы понять, что я имею в виду:

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

Теперь разверните [Object]ниже оператора log и обратите внимание, что он показывает fooсо значением 2. То же самое верно, если вы повторите эксперимент, используя dirвместо log.

Мой вопрос: почему существуют эти две, казалось бы, идентичные функции console?

В Firefox эти функции ведут себя совершенно иначе: logвыводит только toStringпредставление, а dirвыводит навигационное дерево.

В Chrome logуже распечатывается дерево - большую часть времени . Тем не менее, Chrome по- logпрежнему приводит в порядок определенные классы объектов, даже если они имеют свойства. Возможно, самым ярким примером разницы является регулярное выражение:

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

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

Вы также можете увидеть четкую разницу с массивами (например, console.dir([1,2,3])), которые logотличаются от обычных объектов:

> 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 также демонстрируют различное поведение, как отмечено в другом ответе .

Еще одно полезное отличие в Chrome существует при отправке элементов DOM на консоль.

Примечание:

• console.log печатает элемент в HTML-подобном дереве
• console.dir печатает элемент в JSON-подобном дереве

В частности, console.logособое внимание уделяется элементам DOM, тогда как console.dirнет. Это часто полезно при попытке увидеть полное представление объекта DOM JS.

В справке по API Chrome Console содержится дополнительная информация об этой и других функциях.

Я думаю, что Firebug делает это не так, как инструменты разработчика Chrome. Похоже, что Firebug дает вам строковую версию объекта, а console.dirрасширяемый объект. Оба дают вам расширяемый объект в Chrome, и я думаю, что это может привести к путанице. Или это просто ошибка в Chrome.

В Chrome оба делают одно и то же. Продолжая тестирование, я заметил, что Chrome получает текущее значение объекта при его расширении.

> 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

Вы можете использовать следующее, чтобы получить строковую версию объекта, если это то, что вы хотите увидеть. Это покажет вам, что это за объект во время вызова этой строки, а не когда вы ее развернете.

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

Используйте console.dir () для вывода объекта для просмотра, который вы можете щелкнуть вместо версии .toString (), например:

console.dir(obj/this/anything)

Как показать полный объект в консоли Chrome?

С сайта Firebug http://getfirebug.com/logging/

Вызов console.dir (object) запишет интерактивный список свойств объекта, например> миниатюрную версию вкладки DOM.

Следуя совету Феликса Клингса, я попробовал его в своем браузере Chrome.

console.dir([1,2]) дает следующий вывод:

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

Пока console.log([1,2])выдает следующий вывод:

[1, 2]

Поэтому я считаю, что его console.dir()следует использовать для получения дополнительной информации, такой как прототип и т. Д., В массивах и объектах.

Разница между console.log()и console.dir():

Вот разница в двух словах:

• console.log(input): Браузер регистрирует в хорошо отформатированном виде
• console.dir(input): Браузер регистрирует только объект со всеми его свойствами

Пример:

Следующий код:

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

Регистрирует следующее в google dev tools:

Ни один из 7 предыдущих ответов не указано , что console.dirподдерживает дополнительные аргументы : depth, showHiddenи использовать ли colors.

Особый интерес представляет то depth, что (в теории) позволяет перемещать объекты на более чем 2 уровня, которые console.logподдерживаются по умолчанию .

Я написал «в теории» , поскольку на практике , когда я был объект Мангуста и побежал console.log(mongoose)и console.dir(mongoose, { depth: null }), выход был тем же. Что на самом деле Рекурсия глубоко в mongooseобъект был с помощью util.inspect:

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