В чем разница между консолью.Dir и консоли.лог?

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

289
console google-chrome javascript

6 ответов

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

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

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

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

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

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

283

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

обратите внимание:

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

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

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

118

Я думаю, Firebug делает это по-другому, чем инструменты разработчика Chrome. Похоже, Firebug дает вам строковую версию объекта while 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));
4

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

console.dir(obj/this/anything)

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

3

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

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

2

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

0