วิธีตรวจสอบวัตถุ Javascript


100

ฉันจะตรวจสอบวัตถุในกล่องแจ้งเตือนได้อย่างไร? โดยปกติการแจ้งเตือนวัตถุเพียงแค่พ่น nodename:

alert(document);

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

โดยเฉพาะอย่างยิ่งฉันกำลังมองหาวิธีแก้ปัญหาสำหรับสภาพแวดล้อมการใช้งานจริงที่ไม่มี console.log และ Firebug


9
ทำconsole.logบน firefox หรือ chrome
KJYe.Name 葉家仁

1
ฉันสับสน ในสภาพแวดล้อมการใช้งานจริงคุณมีผู้ใช้จริงใช่ไหม เหตุใดคุณจึงต้องการแจ้งเตือนด้วยคุณสมบัติของวัตถุ? บางทีทางออกที่ดีกว่าคือการทำให้วัตถุเป็นอนุกรมและบันทึกลงในไฟล์หรือส่งอีเมล?
Nathan Long

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

ที่เกี่ยวข้องกับ Node.js: stackoverflow.com/questions/24902061/…
Ciro Santilli 郝海东冠状病六四事件法轮功

บางครั้งJSON.stringifyก็เป็นประโยชน์
BrainSlugs83

คำตอบ:


56

for- inลูปสำหรับสถานที่ให้บริการในแต่ละวัตถุหรืออาร์เรย์ คุณสามารถใช้คุณสมบัตินี้เพื่อรับค่าและเปลี่ยนแปลงได้

หมายเหตุ:ทรัพย์สินส่วนตัวไม่สามารถตรวจสอบได้เว้นแต่คุณจะใช้ "สายลับ" โดยพื้นฐานแล้วคุณจะแทนที่อ็อบเจ็กต์และเขียนโค้ดซึ่งทำฟอร์อินลูปภายในบริบทของอ็อบเจ็กต์

สำหรับในลักษณะ:

for (var property in object) loop();

โค้ดตัวอย่างบางส่วน:

function xinspect(o,i){
    if(typeof i=='undefined')i='';
    if(i.length>50)return '[MAX ITERATIONS]';
    var r=[];
    for(var p in o){
        var t=typeof o[p];
        r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
    }
    return r.join(i+'\n');
}

// example of use:
alert(xinspect(document));

แก้ไข:เมื่อไม่นานมานี้ฉันเขียนสารวัตรของตัวเองหากคุณสนใจฉันยินดีที่จะแบ่งปัน

แก้ไข 2:ฉันเขียนขึ้นมาแล้ว


ควรได้รับการปกป้องจากการเกิดซ้ำ แฮช ( พจนานุกรม ) ที่มีรหัสตัวแสดง html ภายในหรือไม่ อาจเป็นประโยชน์สำหรับ noobs ในการกดเช็คนี้ลงในโค้ด
Nakilon

@ Nakilon ฉันมักจะมีปัญหากับการเรียกซ้ำแบบไม่มีที่สิ้นสุดโดยเฉพาะใน PHP มีสองวิธีในการแก้ไขปัญหานี้: ใช้พารามิเตอร์ความลึกหรือแก้ไขแฮชและเพิ่มคุณสมบัติของคุณเองที่คุณใช้เพื่อตรวจสอบการเรียกซ้ำ ส่วนลึกน่าจะปลอดภัยกว่า
Christian

ชอบรุ่นนี้ของสาย 7 ดีกว่า ดูเหมือนทับทิมมากกว่าเล็กน้อยและใช้ r.push ช่องว่างที่สวยงาม (i + '"+ p +'" => '+ (t ==' object '?' {\ n '+ xinspect (o [p], i + '') + ('\ n' + i + '},'): o [p] + ''));
พ.ศ.

2
รหัสชิ้นนั้นทำลาย Safari Mobile บน iPhone โดยสิ้นเชิง ฉันจะไปหาโซลูชัน JSON.stringify ด้านล่างเพื่อเป็นทางเลือกที่ปลอดภัยกว่า
Daniel

1
สิ่งนี้ขัดข้องซาฟารีโครเมี่ยมตรวจสอบวัตถุไม่แนะนำ
คีโน

194

แล้วalert(JSON.stringify(object))เบราว์เซอร์สมัยใหม่ล่ะ

ในกรณีต่อไปนี้TypeError: Converting circular structure to JSONเป็นตัวเลือกเพิ่มเติม: จะทำให้โหนด DOM เป็นอนุกรมเป็น JSON ได้อย่างไรแม้ว่าจะมีการอ้างอิงแบบวงกลมก็ตาม

เอกสารประกอบ: JSON.stringify()ให้ข้อมูลเกี่ยวกับการจัดรูปแบบหรือการกำหนดผลลัพธ์ล่วงหน้า


+1 ข้อเสนอแนะที่ดี ฉันจะเพิ่มเขาสามารถใช้ jsonview ( jsonviewer.stack.hu ) เพื่อดูได้อย่างสวยงาม
Christian

2
หากคุณต้องการที่จะมีการจัดรูปแบบมันเป็นอย่างดีเกินไปคุณสามารถโทรติดต่อ: alert(JSON.stringify(object, null, 4)ที่4เป็นจำนวนของพื้นที่ที่ใช้สำหรับการเยื้อง
ม.ค. Molak

สิ่งนี้ทำให้ฉัน 'ไม่ได้กำหนด' เป็นผลลัพธ์ ฉันกำลังพยายามแก้ปัญหาการทดสอบกรรม
Alex C

1
มีข้อควรระวังสำหรับแนวทางนี้ OP บอกว่าเธอต้องการตรวจสอบวิธีการของวัตถุ stringify จะไม่แสดงวิธีการ: JSON.stringify({f: ()=>{}}) => "{}". นอกจากนี้ถ้าการดำเนินการวัตถุวิธีการที่คุณจะได้รับสิ่งที่วิธีการส่งกลับซึ่งเป็นประโยชน์ถ้าคุณต้องการที่จะตรวจสอบวัตถุ:toJSON JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'
Morozov

39

ใช้console.dir(object)และปลั๊กอิน Firebug


4
สิ่งนี้ทำให้ฉันได้รับข้อมูลที่สมบูรณ์และเป็นประโยชน์มากที่สุดสำหรับสิ่งที่ฉันเป็น ขอบคุณ.
ชอน

2
ฉันไม่ทราบถึงconsole.dirคุณลักษณะนี้ ฉันไม่สามารถหาสาเหตุได้ว่าทำไมฉันไม่สามารถดูวัตถุทั้งหมดใน Firebug ได้อีกต่อไป ตอนนี้ได้จัดเรียงให้ฉันแล้ว ขอบคุณ!
Andrew New โดย

ฉันต้องการทราบว่ามีข้อดีอื่น ๆconsole.logนอกเหนือจากความสะดวกในการแสดงผลหรือไม่โปรด
user10089632

17

มีไม่กี่วิธี:

 1. typeof tells you which one of the 6 javascript types is the object. 
 2. instanceof tells you if the object is an instance of another object.
 3. List properties with for(var k in obj)
 4. Object.getOwnPropertyNames( anObjectToInspect ) 
 5. Object.getPrototypeOf( anObject )
 6. anObject.hasOwnProperty(aProperty) 

ในบริบทคอนโซลบางครั้ง. คอนสตรัคเตอร์หรือ. Prototype อาจมีประโยชน์:

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ; 

17

ใช้คอนโซลของคุณ:

console.log(object);

หรือถ้าคุณกำลังตรวจสอบองค์ประกอบ html dom ให้ใช้ console.dir (object) ตัวอย่าง:

let element = document.getElementById('alertBoxContainer');
console.dir(element);

หรือถ้าคุณมีอาร์เรย์ของวัตถุ js คุณสามารถใช้:

console.table(objectArr);

หากคุณกำลังส่งออก console.log (วัตถุ) จำนวนมากคุณสามารถเขียนได้

console.log({ objectName1 });
console.log({ objectName2 });

วิธีนี้จะช่วยคุณติดป้ายกำกับวัตถุที่เขียนลงคอนโซล


ค่าที่แสดงเหล่านี้จะเปลี่ยนแบบไดนามิกตามเวลาจริงซึ่งอาจทำให้เข้าใจผิดสำหรับวัตถุประสงค์ในการดีบัก
user10089632

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

ดูเหมือนว่าปัญหานี้เกี่ยวข้องกับ Firefox เนื่องจากใน Chrome เว้นแต่คุณจะ re console.log () ค่าที่แสดงจะยังคงอยู่ คุณอาจแนะนำให้ย้ายไปใช้ Chrome แต่บางครั้งคุณกำลังทดสอบความพร้อมใช้งานคุณลักษณะของเบราว์เซอร์ ยังไงก็ขอบคุณสำหรับเคล็ดลับที่อาจเป็นประโยชน์
user10089632

ฉันใช้ไม่ได้consoleเพราะฉันใช้การจัดแต่งทรงผมstackoverflow.com/q/7505623/1480391และเข้ากันไม่ได้
Yves M.

9
var str = "";
for(var k in obj)
    if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
        str += k + " = " + obj[k] + "\n";
alert(str);

console.log () ทำได้อย่างไร? :)
คริสเตียน

ใช้ Firefox หรือ Chrome รับ Firebug สำหรับ Firefox ต้องมี
moe

ฉันถูกประชดประชัน OP ถามหารหัส JS โดยเฉพาะและเว้นแต่คุณจะแนะนำให้เขาเจาะลึก firebug / fox / chrome ฉันไม่รู้ว่าเขาจะหาคำตอบได้จากที่ไหน
Christian

6

นี่เป็นการฉีกคำตอบที่ยอดเยี่ยมของคริสเตียนอย่างเห็นได้ชัด ฉันเพิ่งทำให้มันอ่านง่ายขึ้น:

/**
 * objectInspector digs through a Javascript object
 * to display all its properties
 *
 * @param object - a Javascript object to inspect
 * @param result - a string of properties with datatypes
 *
 * @return result - the concatenated description of all object properties
 */
function objectInspector(object, result) {
    if (typeof object != "object")
        return "Invalid object";
    if (typeof result == "undefined")
        result = '';

    if (result.length > 50)
        return "[RECURSION TOO DEEP. ABORTING.]";

    var rows = [];
    for (var property in object) {
        var datatype = typeof object[property];

        var tempDescription = result+'"'+property+'"';
        tempDescription += ' ('+datatype+') => ';
        if (datatype == "object")
            tempDescription += 'object: '+objectInspector(object[property],result+'  ');
        else
            tempDescription += object[property];

        rows.push(tempDescription);
    }//Close for

    return rows.join(result+"\n");
}//End objectInspector

4

นี่คือตัวตรวจสอบวัตถุของฉันที่อ่านได้ง่ายขึ้น เนื่องจากโค้ดใช้เวลาเขียนนานคุณสามารถดาวน์โหลดได้ที่ http://etto-aa-js.googlecode.com/svn/trunk/inspector.js

ใช้แบบนี้:

document.write(inspect(object));

2
โดยปกติจะเป็นเช่นนั้น (และแน่นอนว่าเป็นคำแนะนำอย่างเป็นทางการ - อย่าโพสต์ลิงก์) OTOH สำหรับบางสิ่งที่เป็นเวอร์ชันเช่นนี้อาจเป็นเรื่องที่ดีเนื่องจากคุณรู้ว่าคุณมักจะมองไปที่ รหัสล่าสุดไม่ใช่ของเก่าที่โพสต์เมื่อหลายปีก่อนและอาจใช้ไม่ได้อีกต่อไป ... - นอกจากนี้โค้ดขนาดใหญ่นั้นจะดูแย่มากที่วางไว้ในผนังข้อความ SO answer ... - ปิดหัวข้อ:คงจะดีไม่น้อยหากมีวิธีที่ SO จะมีแท็กคล้าย "สปอยเลอร์" สำหรับโค้ดและสามารถลิงก์ไปยังแหล่งภายนอกและอัปเดตอัตโนมัติได้ (ถ้าเป็นไปได้)
BrainSlugs83
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.