В чем разница между 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] под оператором журнала и обратите внимание, что он показывает foo со значением 2. То же самое верно, если вы повторите эксперимент, используя dir вместо log.

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

Ответы

Ответ 1

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

Ответ 2

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

DozDcYR.png

Примечание:

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

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

Более подробную информацию в Справочном руководстве по API консоли Chrome об этом и других функциях.

Ответ 3

Я думаю, что Firebug делает это иначе, чем инструменты Chrome dev. Похоже, 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));

Ответ 5

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

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

Ответ 6

Следуя совету Felix Klings, я попробовал его в своем браузере Chrome.

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

Массив [2]

0: 1

1: 2

длина: 2

_proto_: массив [0]

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

[1, 2]

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