В чем разница между консолью.Dir и консоли.лог?
в Chrome the 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?
6 ответов:
в Firefox эти функции ведут себя совершенно по-разному:
logтолько выводит atoStringпредставление, в то время какdirвыводит навигационное дерево.В Chrome,
logуже распечатывает дерево -- большую часть времени. Тем не менее, хромlogstill 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 также демонстрируют различное поведение,как отмечено в другом ответе.
еще одно полезное различие в Chrome существует при отправке элементов DOM на консоль.
обратите внимание:
console.logпечатает элемент в HTML-подобном деревеconsole.dirвыводит элемент в JSON-подобном деревев частности,
console.logдает особое отношение к элементам DOM, тогда какconsole.dirнет. Это часто полезно при попытке увидеть полное представление DOM JS объект.больше информации в ссылка API консоли Chrome об этом и других функций.
Я думаю, что 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));
консоль использовать.dir () для вывода объекта с возможностью просмотра вы можете щелкнуть вместо него.toString () версия, как это:
console.dir(obj/this/anything)
с сайта firebug http://getfirebug.com/logging/
консоль вызова.dir (object) будет регистрировать интерактивный список свойств объекта, например > миниатюрная версия вкладки DOM.
Comments