ฉันจะทำให้ console.log แสดงสถานะปัจจุบันของวัตถุได้อย่างไร

ใน Safari ที่ไม่มีส่วนเสริม (และเบราว์เซอร์อื่น ๆ ส่วนใหญ่) console.logจะแสดงวัตถุที่สถานะสุดท้ายของการดำเนินการไม่ใช่ที่สถานะเมื่อconsole.logถูกเรียก

ฉันต้องโคลนวัตถุเพื่อเอาท์พุทผ่านconsole.logเพื่อให้ได้สถานะของวัตถุที่บรรทัดนั้น

ตัวอย่าง:

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}

console.dir()ผมคิดว่าคุณกำลังมองหา

console.log()ไม่ได้ทำสิ่งที่คุณต้องการเพราะมันพิมพ์การอ้างอิงไปยังวัตถุและเมื่อคุณเปิดมันขึ้นมามันก็เปลี่ยนไป console.dirพิมพ์ไดเรกทอรีของคุณสมบัติในวัตถุในเวลาที่คุณเรียกมัน

แนวคิด JSON ด้านล่างเป็นแนวคิดที่ดี คุณยังสามารถแยกวิเคราะห์สตริง JSON และรับวัตถุที่สามารถเรียกดูได้เช่นสิ่งที่. dir () จะให้:

console.log(JSON.parse(JSON.stringify(obj)));

สิ่งที่ฉันมักจะทำถ้าฉันต้องการที่จะเห็นว่ามันเป็นสถานะในเวลาที่มันถูกบันทึกไว้ฉันเพียงแค่แปลงเป็นสตริง JSON

console.log(JSON.stringify(a));

วานิลลา JS:

คำตอบของ @ evanดูดีที่สุดที่นี่ Just (ab) ใช้ JSON.parse / stringify เพื่อทำสำเนาของวัตถุอย่างมีประสิทธิภาพ

console.log(JSON.parse(JSON.stringify(test)));

โซลูชั่นเฉพาะของ JQuery:

คุณสามารถสร้างสแน็ปช็อตของวัตถุ ณ เวลาใดเวลาหนึ่งด้วย jQuery.extend

console.log($.extend({}, test));

สิ่งที่เกิดขึ้นจริงที่นี่คือ jQuery กำลังสร้างวัตถุใหม่ที่มีtestเนื้อหาของวัตถุและบันทึกว่า (ดังนั้นจะไม่เปลี่ยนแปลง)

โซลูชั่นเฉพาะของ AngularJS (1):

Angular จัดให้มีcopyฟังก์ชันที่สามารถใช้เอฟเฟกต์เดียวกันได้:angular.copy

console.log(angular.copy(test));

ฟังก์ชั่น wrapper วานิลลา JS:

นี่คือฟังก์ชันที่ล้อมรอบconsole.logแต่จะทำสำเนาของวัตถุใด ๆ ก่อนออกจากระบบ

ฉันเขียนสิ่งนี้เพื่อตอบสนองต่อฟังก์ชั่นที่คล้ายกัน แต่มีประสิทธิภาพน้อยกว่าในคำตอบ รองรับหลายอาร์กิวเมนต์และจะไม่พยายามคัดลอกสิ่งต่าง ๆ หากไม่ใช่วัตถุปกติ

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

ตัวอย่างการใช้งาน :consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

ที่> Objectอยู่ในคอนโซลไม่เพียงแสดงสถานะปัจจุบัน อันที่จริงมันเป็นการชะลอการอ่านวัตถุและคุณสมบัติของมันจนกว่าคุณจะขยาย

ตัวอย่างเช่น,

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

จากนั้นขยายสายแรกมันจะถูกต้องหากคุณทำก่อนที่console.logจะส่งกลับที่สอง

ด้วยการใช้คำใบ้ของ Xeon06 คุณสามารถแยก JSON ของเขาในวัตถุและนี่คือฟังก์ชั่นบันทึกที่ฉันใช้ในการถ่ายโอนวัตถุของฉัน:

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}

ฉันกำหนดโปรแกรมอรรถประโยชน์:

function MyLog(text) {
    console.log(JSON.stringify(text));
}

และเมื่อฉันต้องการเข้าสู่ระบบคอนโซลฉันก็ทำ:

MyLog("hello console!");

มันใช้งานได้ดีมาก!

คุณอาจต้องการบันทึกวัตถุในวิธีที่มนุษย์สามารถอ่านได้:

console.log(JSON.stringify(myObject, null, 2));

สิ่งนี้เยื้องวัตถุที่มี 2 ช่องว่างในแต่ละระดับ

ฉันจะพิมพ์ JSON โดยใช้ JavaScript ได้อย่างไร

มีตัวเลือกให้ใช้ไลบรารีดีบักเกอร์

https://debugjs.net/

เพียงรวมสคริปต์ไว้ในหน้าเว็บของคุณและใส่คำสั่งบันทึก

<script src="debug.js"></script>

เข้าสู่ระบบ

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}

ฉันอาจถูกยิงเพราะแนะนำสิ่งนี้ แต่สามารถดำเนินการต่อไปอีกขั้นหนึ่ง เราสามารถขยายวัตถุคอนโซลโดยตรงเพื่อทำให้ชัดเจนยิ่งขึ้น

console.logObject = function(o) {
  (JSON.stringify(o));
}

ฉันไม่รู้ว่าสิ่งนี้จะทำให้เกิดการปะทะกันของห้องสมุด / นิวเคลียร์หลอมละลาย / ฉีกขาดในอวกาศอย่างต่อเนื่องหรือไม่ แต่มันทำงานได้อย่างสวยงามในการทดสอบ qUnit ของฉัน :)

เพียงรีเฟรชหน้าเว็บหลังจากที่คุณเปิดคอนโซลหรือเปิดคอนโซลก่อนที่คุณจะส่งคำขอไปยังหน้าเป้าหมาย ...

เพียงพิมพ์วัตถุทั้งหมดบนคอนโซล

console.dir(object);