Яка різниця між 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?

У 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])), які 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));

Використовуйте console.dir () для виведення об'єкта, який може переглядати, через який ви можете натиснути замість версії .toString (), наприклад:

console.dir(obj/this/anything)

Як показати повний об’єкт у консолі Chrome?

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

Виклик console.dir (object) запише інтерактивний перелік властивостей об'єкта, як-от> мініатюрна версія вкладки DOM.

Дотримуючись поради Фелікса Клінга, я спробував це у своєму хромовому браузері.

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:

Жоден з 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}));