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


357

В 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?


65
Попробуйте console.log([1,2])и console.dir([1,2])вы увидите разницу.
Феликс Клинг

В firebug содержимое зарегистрированного объекта console.dirне изменяется, поэтому оно имеет большое значение.
Евгений Ярмаш

3
Будьте осторожны console.dir(): эта функция нестандартна ! Так что не используйте его на производстве;)
fred727


1
@ user7393973 хорошая находка! На самом деле, это изображение из моего ответа ниже, так что было фактически снято на моем ноутбуке. Приятно что-то вернуть MDN. Какой это замечательный ресурс!
Дрю Ноакс

Ответы:


352

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


11
Не забывайте, что console.dir хранит ссылку на объект. Вы, вероятно, не хотите использовать его широко в производстве. Вероятно, это работает, только если консоль показана.
Жан-Филипп Леклерк

В Chromium 45 на Ubuntu, console.logпохоже, это упрощенная версия Firefox, которая выглядит toStringскорее как дерево. Я еще не уверен, когда они изменили это, но они сделали.
ледяной воды

3
@icedwater: Зависит от того, открыта ли у вас консоль, когда вы звоните, console.logили открываете ее позже. Да, действительно. :-)
TJ Crowder

Вы также можете увидеть четкую разницу с функцией. В хроме, он будет печатать функции исходного кода console.log, но console.dirвы можете увидеть prototype, argumentsсвойство.
Тина Чен,

1
Теперь кажется, что console.logи на console.dirсамом деле возвращают то же представление [1,2,3]в Firefox.
xji

151

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

Примечание:

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

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

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


Я считаю, что эта информация
взята с сайта

11
@ loneshark99 на самом деле все наоборот. Заметьте URL на их скриншоте? Они скопировали мой ответ. Но это нормально, потому что это разрешено лицензией на SO ответы, и я все равно люблю MDN.
Дрю Ноукс

Понял, это то, о чем я изначально думал, но потом подумал, почему они будут копировать отсюда. Имеет смысл . Хорошая информация
loneshark99

4

Я думаю, что 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));



0

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

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

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

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

[1, 2]

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


0

Разница между 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:

введите описание изображения здесь


0

Ни один из 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}));
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.