ความแตกต่างระหว่าง 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. เดียวกันเป็นจริงถ้าคุณทำซ้ำการทดลองใช้แทนdirlog

คำถามของฉันคือทำไมทั้งสองฟังก์ชั่นที่เหมือนกันดูเหมือนว่ามีอยู่ใน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])) ซึ่ง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 วัตถุยังแสดงพฤติกรรมที่แตกต่างกันตามที่ระบุไว้ในคำตอบอื่น

มีความแตกต่างที่เป็นประโยชน์ใน Chrome อยู่เมื่อส่งองค์ประกอบ DOM ไปยังคอนโซล

หมายเหตุ:

• console.log พิมพ์องค์ประกอบในต้นไม้เหมือน HTML
• console.dir พิมพ์องค์ประกอบในต้นไม้เหมือน JSON

โดยเฉพาะconsole.logให้การดูแลเป็นพิเศษกับองค์ประกอบ DOM ในขณะที่console.dirไม่ได้ สิ่งนี้มักจะมีประโยชน์เมื่อพยายามดูการแสดงวัตถุ DOM JS แบบเต็ม

มีข้อมูลเพิ่มเติมในการอ้างอิง Chrome Console APIเกี่ยวกับฟังก์ชันนี้และฟังก์ชั่นอื่น ๆ

ฉันคิดว่า Firebug ทำแตกต่างจากเครื่องมือ dev ของ 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 (วัตถุ) จะบันทึกรายการแบบโต้ตอบของคุณสมบัติของวัตถุเช่น> แท็บ DOM รุ่นเล็ก

ทำตามคำแนะนำของ Felix Klings ฉันลองใช้ในเบราว์เซอร์ chrome

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, และว่าจะใช้showHiddencolors

สิ่งที่น่าสนใจเป็นพิเศษคือdepth(ซึ่งในทางทฤษฎี) อนุญาตให้ travering วัตถุมากกว่า 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}));