มีวิธีในการขยายวัตถุโดยอัตโนมัติใน Chrome Dev Tools หรือไม่

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

ในขณะที่การแก้ปัญหาการกล่าวถึงJSON.stringifyค่อนข้างดีสำหรับกรณีส่วนใหญ่ แต่ก็มีข้อ จำกัด เล็กน้อย

• ไม่สามารถจัดการรายการที่มีการอ้างอิงแบบวงกลมซึ่งconsole.logสามารถดูแลวัตถุดังกล่าวได้อย่างหรูหรา
• นอกจากนี้หากคุณมีต้นไม้ใหญ่ความสามารถในการโต้ตอบกับโหนดบางโหนดสามารถทำให้การสำรวจง่ายขึ้น

นี่คือวิธีแก้ปัญหา (ใช้ไลบรารีunderscore.js ) ที่สามารถแก้ปัญหาทั้งสองข้อได้โดยการใช้ความคิดสร้างสรรค์ (ab) โดยใช้console.group:

expandedLog = (function(){
    var MAX_DEPTH = 100;

    return function(item, depth){

        depth = depth || 0;

        if (depth > MAX_DEPTH ) {
            console.log(item);
            return;
        }

        if (_.isObject(item)) {
            _.each(item, function(value, key) {
            console.group(key + ' : ' +(typeof value));
            expandedLog(value, depth + 1);
            console.groupEnd();
            });
        } else {
            console.log(item);
        }
    }
})();

กำลังทำงาน:

expandedLog({
    "glossary": {
        "title": "example glossary",
        "GlossDiv": {
            "title": "S",
            "GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
                    "SortAs": "SGML",
                    "GlossTerm": "Standard Generalized Markup Language",
                    "Acronym": "SGML",
                    "Abbrev": "ISO 8879:1986",
                    "GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
                        "GlossSeeAlso": ["GML", "XML"]
                    },
                    "GlossSee": "markup"
                }
            }
        }
    }
})

จะให้สิ่งที่คุณชอบ:

ค่า MAX_DEPTH สามารถปรับให้อยู่ในระดับที่ต้องการและสูงกว่าระดับการซ้อน - บันทึกที่ขยายจะกลับไปที่ console.log ปกติ

ลองใช้สิ่งที่ชอบ:

x = { a: 10, b: 20 }
x.x = x 
expandedLog(x)

โปรดทราบว่าการพึ่งพาขีดสามารถลบออกได้อย่างง่ายดาย - เพียงแค่ดึงฟังก์ชั่นที่จำเป็นจากแหล่งที่มา

นอกจากนี้โปรดทราบว่าไม่ได้console.groupมาตรฐาน

พิจารณาใช้console.table ()

หากต้องการขยาย / ยุบโหนดและโหนดย่อยทั้งหมด

Ctrl + Alt + คลิกหรือOpt + คลิกที่ไอคอนลูกศร

(โปรดทราบว่าแม้ว่าเครื่องมือ dev เครื่องมือ docจะแสดงรายการ Ctrl + Alt + Click บน Windows สิ่งที่จำเป็นต้องมีคือ Alt + Click)

อาจไม่ใช่คำตอบที่ดีที่สุด แต่ฉันได้ทำสิ่งนี้ในรหัสของฉัน

อัปเดต :

ใช้JSON.stringifyเพื่อขยายวัตถุของคุณโดยอัตโนมัติ:

> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
> JSON.stringify(a, true, 2)
"[
  {
    "name": "Joe",
    "age": 5
  },
  {
    "name": "John",
    "age": 6
  }
]"

คุณสามารถสร้างฟังก์ชั่นทางลัดได้ตลอดเวลาหากไม่สามารถพิมพ์สิ่งนั้นออกมาได้:

j = function(d) {
    return JSON.stringify(d, true, 2)
}

j(a)

คำตอบก่อนหน้า :

pretty = function(d)
{
  var s = []
  for (var k in d) {
    s.push(k + ': ' + d[k])
  }
  console.log(s.join(', '))
}

จากนั้นแทน:

-> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
-> a
<- [Object, Object]

คุณทำ:

-> a.forEach(pretty)
<- name: Joe, age: 5
   name: John, age: 6

ไม่ใช่ทางออกที่ดีที่สุด แต่ใช้ได้ดีสำหรับการใช้งานของฉัน วัตถุที่ลึกกว่าจะไม่ทำงานดังนั้นจึงเป็นสิ่งที่สามารถปรับปรุงได้

ตัวเลือก + คลิกบน Mac เพิ่งค้นพบมันตอนนี้เองและทำให้สัปดาห์ของฉัน! สิ่งนี้น่ารำคาญเหมือนทุกอย่าง

นี่คือคำตอบของ lorefnon เวอร์ชันดัดแปลงซึ่งไม่ได้ขึ้นอยู่กับขีดล่าง:

var expandedLog = (function(MAX_DEPTH){

    return function(item, depth){

        depth    = depth || 0;
        isString = typeof item === 'string'; 
        isDeep   = depth > MAX_DEPTH

        if (isString || isDeep) {
            console.log(item);
            return;
        }

        for(var key in item){
            console.group(key + ' : ' +(typeof item[key]));
            expandedLog(item[key], depth + 1);
            console.groupEnd();
        }
    }
})(100);

นี่คือโซลูชันของฉัน, ฟังก์ชั่นที่วนซ้ำคุณสมบัติทั้งหมดของวัตถุ, รวมถึงอาร์เรย์

ในตัวอย่างนี้ฉันวนซ้ำวัตถุหลายระดับอย่างง่าย:

    var point = {
            x: 5,
            y: 2,
            innerobj : { innerVal : 1,innerVal2 : 2 },
            $excludedInnerProperties : { test: 1},
            includedInnerProperties : { test: 1}
        };

คุณมีความเป็นไปได้ที่จะไม่รวมการวนซ้ำหากคุณสมบัติเริ่มต้นด้วยคำต่อท้ายเฉพาะ (เช่น $ สำหรับวัตถุเชิงมุม)

discoverProperties = function (obj, level, excludePrefix) {
        var indent = "----------------------------------------".substring(0, level * 2);
        var str = indent + "level " + level + "\r\n";
        if (typeof (obj) == "undefined")
            return "";
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                var propVal;
                try {
                    propVal = eval('obj.' + property);
                    str += indent + property + "(" + propVal.constructor.name + "):" + propVal + "\r\n";
                    if (typeof (propVal) == 'object' && level < 10 && propVal.constructor.name != "Date" && property.indexOf(excludePrefix) != 0) {
                        if (propVal.hasOwnProperty('length')) {
                            for (var i = 0; i < propVal.length; i++) {
                                if (typeof (propVal) == 'object' && level < 10) {
                                    if (typeof (propVal[i]) != "undefined") {
                                        str += indent + (propVal[i]).constructor.name + "[" + i + "]\r\n";
                                        str += this.discoverProperties(propVal[i], level + 1, excludePrefix);
                                    }
                                }
                                else
                                    str += indent + propVal[i].constructor.name + "[" + i + "]:" + propVal[i] + "\r\n";
                            }
                        }
                        else
                            str += this.discoverProperties(propVal, level + 1, excludePrefix);
                    }
                }
                catch (e) {
                }
            }
        }
        return str;
    };


var point = {
        x: 5,
        y: 2,
        innerobj : { innerVal : 1,innerVal2 : 2 },
        $excludedInnerProperties : { test: 1},
        includedInnerProperties : { test: 1}
    };

document.write("<pre>" + discoverProperties(point,0,'$')+ "</pre>");

นี่คือผลลัพธ์ของฟังก์ชัน:

level 0
x(Number):5
y(Number):2
innerobj(Object):[object Object]
--level 1
--innerVal(Number):1
--innerVal2(Number):2
$excludedInnerProperties(Object):[object Object]
includedInnerProperties(Object):[object Object]
--level 1
--test(Number):1

นอกจากนี้คุณยังสามารถฉีดฟังก์ชันนี้ในหน้าเว็บใดก็ได้และคัดลอกและวิเคราะห์คุณสมบัติทั้งหมดลองใช้งานในหน้า google โดยใช้คำสั่ง chrome:

discoverProperties(google,0,'$')

นอกจากนี้คุณสามารถคัดลอกเอาต์พุตของคำสั่งโดยใช้คำสั่ง chrome:

copy(discoverProperties(myvariable,0,'$'))

หากคุณมีวัตถุขนาดใหญ่ JSON.stringfy จะให้ข้อผิดพลาด Uncaught TypeError: การแปลงโครงสร้างแบบวงกลมเป็น JSON นี่คือเคล็ดลับในการใช้เวอร์ชันที่ปรับเปลี่ยนแล้ว

JSON.stringifyOnce = function(obj, replacer, indent){
    var printedObjects = [];
    var printedObjectKeys = [];

    function printOnceReplacer(key, value){
        if ( printedObjects.length > 2000){ // browsers will not print more than 20K, I don't see the point to allow 2K.. algorithm will not be fast anyway if we have too many objects
        return 'object too long';
        }
        var printedObjIndex = false;
        printedObjects.forEach(function(obj, index){
            if(obj===value){
                printedObjIndex = index;
            }
        });

        if ( key == ''){ //root element
             printedObjects.push(obj);
            printedObjectKeys.push("root");
             return value;
        }

        else if(printedObjIndex+"" != "false" && typeof(value)=="object"){
            if ( printedObjectKeys[printedObjIndex] == "root"){
                return "(pointer to root)";
            }else{
                return "(see " + ((!!value && !!value.constructor) ? value.constructor.name.toLowerCase()  : typeof(value)) + " with key " + printedObjectKeys[printedObjIndex] + ")";
            }
        }else{

            var qualifiedKey = key || "(empty key)";
            printedObjects.push(value);
            printedObjectKeys.push(qualifiedKey);
            if(replacer){
                return replacer(key, value);
            }else{
                return value;
            }
        }
    }
    return JSON.stringify(obj, printOnceReplacer, indent);
};

ตอนนี้คุณสามารถใช้ JSON.stringifyOnce(obj)

ฉันไม่ได้เป็นแฟนของวิธี Chrome และ Safari คอนโซลวัตถุ (over-engineered) คอนโซลโดยค่าเริ่มต้นควบแน่นวัตถุเรียงลำดับคีย์วัตถุเมื่อวัตถุถูกขยายและแสดงฟังก์ชั่นภายในจากห่วงโซ่ต้นแบบ คุณสมบัติเหล่านี้ควรเป็นการเลือกการตั้งค่า นักพัฒนาโดยค่าเริ่มต้นอาจสนใจในผลลัพธ์ดิบเพื่อให้พวกเขาสามารถตรวจสอบว่ารหัสของพวกเขาทำงานอย่างถูกต้องหรือไม่ และคุณสมบัติเหล่านี้ทำให้การพัฒนาช้าลงและให้ผลลัพธ์การเรียงลำดับที่ไม่ถูกต้อง

วิธีการขยายวัตถุใน Console

แนะนำ

1. console.log(JSON.stringify({}, undefined, 2));

   สามารถใช้เป็นฟังก์ชันได้:

   console.json = object => console.log(JSON.stringify(object, undefined, 2));
   
   console.json({});
   

2. "ตัวเลือก + คลิก" (Chrome บน Mac) และ "Alt + คลิก" (Chrome บนหน้าต่าง)
   อย่างไรก็ตามเบราว์เซอร์ทั้งหมดไม่ได้รับการสนับสนุน (เช่น Safari) และคอนโซลยังพิมพ์โซ่ชนิดต้นแบบต้นแบบวัตถุจะถูกเรียงลำดับโดยอัตโนมัติเมื่อ ขยายตัว ฯลฯ

ไม่แนะนำ

ฉันจะไม่แนะนำคำตอบยอดนิยมอย่างใดอย่างหนึ่ง

1. console.table() - เป็นการขยายแบบตื้นเท่านั้นและไม่ขยายวัตถุที่ซ้อนกัน

2. เขียนฟังก์ชัน underscore.js ที่กำหนดเอง - ค่าใช้จ่ายมากเกินไปสำหรับสิ่งที่ควรเป็นทางออกที่ง่าย

มันเป็นงาน แต่มันก็ใช้ได้ผลสำหรับฉัน

ฉันใช้ในกรณีที่อัปเดตอัตโนมัติควบคุม / วิดเจ็ตขึ้นอยู่กับการกระทำของผู้ใช้ ตัวอย่างเช่นเมื่อใช้ typeahead.js ของ twitter เมื่อคุณโฟกัสออกไปนอกหน้าต่างรายการแบบเลื่อนลงจะหายไปและคำแนะนำจะถูกลบออกจาก DOM

ในเครื่องมือ dev คลิกขวาที่โหนดที่คุณต้องการขยายการเปิดใช้งานตัวแบ่ง ... -> การปรับเปลี่ยนทรีย่อยนี่จะส่งคุณไปยังดีบักเกอร์ กดปุ่มF10หรือShift + F11 ต่อไปจนกว่าคุณจะกลายพันธุ์ เมื่อกลายพันธุ์แล้วคุณสามารถตรวจสอบได้ เนื่องจากตัวดีบั๊กทำงานอยู่ UI ของ Chrome จะถูกล็อคและไม่ได้ปิดลงและยังมีข้อเสนอแนะใน DOM

มีประโยชน์มากเมื่อแก้ไขปัญหาโครงร่างของโหนดที่ถูกแทรกแบบไดนามิกซึ่งเริ่มต้นแทรกและลบอย่างต่อเนื่อง

อีกวิธีที่ง่ายกว่าก็คือ

• ใช้ JSON.stringify (jsonObject)
• คัดลอกและวางผลลัพธ์ลงใน Visual Studio Code
• ใช้ Ctrl + K และ Ctrl + F เพื่อจัดรูปแบบผลลัพธ์
• คุณจะเห็นวัตถุที่จัดรูปแบบขยาย

ฉันได้ลองสิ่งนี้กับวัตถุอย่างง่าย

คุณสามารถดูองค์ประกอบของคุณโดยการเข้าถึง document.getElementsBy ... จากนั้นคลิกขวาและคัดลอกวัตถุที่เป็นผลลัพธ์ ตัวอย่างเช่น:

document.getElementsByTagName('ion-app') ให้กลับมาเป็นวัตถุจาวาสคริปต์ที่สามารถคัดลอกวางไปยังโปรแกรมแก้ไขข้อความและมันจะเต็ม

ดีกว่า: คลิกขวาที่องค์ประกอบผลลัพธ์ - 'แก้ไขเป็น html' - 'เลือกทั้งหมด' - 'คัดลอก' - 'วาง'

คุณสามารถดูที่นี่:

https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/

วิธีที่ง่ายที่สุด:

import SampleJson from '../../assets/SampleJson.json';
...
console.log(SampleJson);

คุณต้องเพิ่มรหัสต่อไปนี้เพื่อ tsconfig:

{  "compilerOptions": {  ..."resolveJsonModule": true, "esModuleInterop": true... } }

ฉันอ้างสิทธิ์การเป็นเจ้าของไม่เพียงแค่อ้างอิงแหล่งข้อมูลที่เป็นประโยชน์