क्या क्रोम देव टूल्स में ऑब्जेक्ट्स को ऑटो एक्सपैंड करने का कोई तरीका है?

Question

हर समय समय मैं कंसोल में एक वस्तु को देखने के लिए मैं इसे विस्तार करने के लिए जा रहा हूँ, तो यह हर किसी को यह करने के लिए तीर पर क्लिक करने के लिए थकाऊ हो जाता है :) वहाँ एक शॉर्टकट या यह स्वचालित रूप से स्थापित करने के लिए सेटिंग है?

Comments

इस क्षण नहीं। New.crbug.com पर एक फीचर रिक्वेस्ट फाइल करने के लिए बेझिझक ("DevTools:" उपसर्ग के साथ सारांश शुरू करें) लेकिन आप कहां और किन वस्तुओं का विस्तार चाहते हैं, इसके बारे में बहुत विशिष्ट हैं। उदाहरण के लिए, आप निश्चित रूप से कभी नहीं चाहेंगे कि आपकी सभी वस्तुओं का विस्तार हो, क्योंकि उनके पास (ए) में बड़ी संख्या में संपत्ति हो सकती है; (बी) में चक्र होते हैं (बाद के मामले में पूरे पेड़ का विस्तार करने में कुछ समय लगेगा ;))

— अलेक्जेंडर पावलोव

bugs.webkit.org/show_bug.cgi?id=61427

— NVI

उस निकिता के लिए धन्यवाद, मैंने एक वैकल्पिक समाधान के साथ एक टिप्पणी पोस्ट की।

— जेरेमी स्मिथ

मैं खुशी से एक कीबोर्ड शॉर्टकट के लिए व्यवस्थित होगा। यह मुझे माउस में जाने के लिए दर्द देता है ...

— बाजार

इसे 4 साल बाद क्यों लागू किया गया है?

— user3751385

Answer 1

जबकि अधिकांश मामलों के लिए समाधान का उल्लेख JSON.stringifyबहुत अच्छा है, इसकी कुछ सीमाएँ हैं

• यह परिपत्र संदर्भों के साथ वस्तुओं को संभाल नहीं सकता है, जहां console.logपर इस तरह की वस्तुओं की सावधानीपूर्वक देखभाल की जा सकती है।
• इसके अलावा, यदि आपके पास एक बड़ा पेड़ है, तो कुछ नोड्स को अंतःक्रियात्मक रूप से मोड़ने की क्षमता अन्वेषण को आसान बना सकती है।

यहां एक समाधान है ( अंडरस्कोर । जेएस लाइब्रेरी का उपयोग करता है ) जो रचनात्मक रूप से उपरोक्त दोनों को हल करता है (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 का मान एक इच्छित स्तर पर समायोजित किया जा सकता है, और उस स्तर के नेस्टिंग से परे - विस्तारित लॉग सामान्य कंसोल पर वापस आ जाएगा।

कुछ चलाने की कोशिश करें:

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

ध्यान दें कि अंडरस्कोर निर्भरता को आसानी से हटाया जा सकता है - बस स्रोत से आवश्यक कार्यों को निकालें ।

कृपया ध्यान दें कि console.groupयह गैर-मानक है।

Comments

यहां मैं टाइपस्क्रिप्ट संस्करण का उपयोग करता हूं: gist.github.com/mathieucaroff/6851b295c1e4bffafce362d0a1ae00f0

— मैथियू CAROFF

Answer 2

कंसोल.टेबल () का उपयोग करने पर विचार करें ।

Comments

शानदार मैं इसके बारे में कभी नहीं जानता था!

— डेगोबर्ट रेनॉफ

असाधारण! मेरा दिन बचाया!

— निकोले ओलियारू

मुझे लगता है कि मैं किसी के लिए भी बोलता हूं जो पहले नहीं देखा है: अमेज़!

— जॉन हंट

अच्छा लगता है! लेकिन यह व्यापक मूल्यों को सिकोड़ता है अगर 10+ कुंजियाँ हैं :(

— सिस्टम रीबूटर

मैं इस जवाब की तलाश में नहीं था, लेकिन खुशी है कि मुझे यह मिल गया!

— जे कमिंस

Answer 3

एक नोड और उसके सभी बच्चों का विस्तार / पतन करने के लिए,

Ctrl + Alt + क्लिक या ऑप्ट + तीर आइकन पर क्लिक करें

(ध्यान दें कि यद्यपि देव उपकरण doc Ctrl + Alt + क्लिक को सूचीबद्ध करता है, Windows पर जो आवश्यक है वह Alt + क्लिक है)।

Comments

यह वास्तव में वास्तविक प्रश्न का पूर्ण उत्तर है।

— रॉस पैटरसन

यह परीक्षण OSX क्रोम 46 में है, यह सभी प्रोटोटाइप ऑब्जेक्ट को भी विस्तारित करता है, जिससे यह हर तीर पर क्लिक करने के रूप में खराब हो जाता है। इसके बजाय, आपको 50 प्रोटोटाइप तरीकों, गुणों आदि के बीच में गुण (हैवेन) को ढूंढना होगा ...

— केव

यह

— निर्विरोध

बस एक साइड नोट। बड़े पैमाने पर गहराई के साथ वस्तुओं के मामले में, Ctrl + Alt + क्लिक को कुछ बार लागू किया जाना चाहिए जब तक कि यह केवल एक बार ही नहीं, बल्कि पूरे ऑब्जेक्ट को विस्तारित करता है।

— बेंटकोडर

सही ढंग से सवाल का जवाब देता है। हालाँकि यह अभी भी उपयोगकर्ता को कंसोल में ऑब्जेक्ट को मैन्युअल रूप से क्लिक करने की आवश्यकता है, और समाधान ब्राउज़रों में सार्वभौमिक रूप से समर्थित नहीं है।

— tfmontague

Answer 4

सबसे अच्छा जवाब नहीं हो सकता है, लेकिन मैं अपने कोड में कहीं ऐसा कर रहा हूं।

अपडेट :

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

सबसे अच्छा समाधान नहीं है, लेकिन मेरे उपयोग के लिए अच्छी तरह से काम करता है। गहरी वस्तुएं काम नहीं करेंगी, ताकि कुछ ऐसा हो जिस पर सुधार किया जा सके।

Comments

इसे क्रोम के कंसोल में कस्टम फंक्शनलिटी जोड़ने के साथ युगल करें और हम pretty(a)हर समय सभी साइटों में हो सकते हैं ;)

— ब्रासोफिलो

वास्तव में, मैं कहूंगा कि दुर्भाग्य से यह सबसे अच्छा उत्तर है - अन्य समाधान बदतर हैं (यानी console.tableउथले विस्तार, "विकल्प / Alt + क्लिक" एक मैन्युअल प्रक्रिया है, और एक कस्टम फ़ंक्शन लिखना जो अंडरस्कोर का उपयोग करता है। जेएस लायक नहीं है ओवरहेड)

— tfmontague 19

Answer 5

विकल्प + एक मैक पर क्लिक करें। बस अब यह खुद ही पता चला है और मेरा सप्ताह बना दिया है! यह कुछ भी उतना ही कष्टप्रद है

Answer 6

यहाँ 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);

Answer 7

यहाँ मेरा समाधान है, एक फ़ंक्शन जो ऑब्जेक्ट के सभी गुणों को एरेट करता है, जिसमें सरणियाँ भी शामिल हैं।

इस उदाहरण में मैं एक साधारण बहु-स्तरीय वस्तु पर पुनरावृति करता हूं:

    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 पेज पर प्रयास कर सकते हैं और सभी गुणों का विश्लेषण और विश्लेषण कर सकते हैं:

discoverProperties(google,0,'$')

इसके अलावा आप क्रोम कमांड का उपयोग करके कमांड के आउटपुट को कॉपी कर सकते हैं:

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

Answer 8

यदि आपके पास एक बड़ी वस्तु है, तो JSON.stringfy त्रुटि देगा अनकैप टाइप टाइप: यह 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)

Answer 9

मैं वास्तव में कैसे क्रोम और सफारी वस्तुओं (अधिक इंजीनियर) को शान्ति नहीं दे रहा हूँ। डिफ़ॉल्ट रूप से कंसोल ऑब्जेक्ट को संघनित करता है, ऑब्जेक्ट का विस्तार होने पर ऑब्जेक्ट कुंजियों को सॉर्ट करता है, और प्रोटोटाइप चेन से आंतरिक कार्यों को दिखाता है। ये सुविधाएँ ऑप्ट-इन सेटिंग्स होनी चाहिए। डिफ़ॉल्ट रूप से डेवलपर्स शायद कच्चे परिणामों में रुचि रखते हैं ताकि वे जांच सकें कि क्या उनका कोड सही तरीके से काम कर रहा है; और ये विशेषताएं विकास को धीमा कर देती हैं, और गलत प्रकार के परिणाम देती हैं।

कंसोल में ऑब्जेक्ट का विस्तार कैसे करें

सिफारिश की

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

   एक समारोह के रूप में भी इस्तेमाल कर सकते हैं:

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

2. "विकल्प + क्लिक" (मैक पर क्रोम) और "अल्ट + क्लिक" (क्रोम ऑन विंडो)
   हालांकि, यह सभी ब्राउज़रों (जैसे सफारी) द्वारा समर्थित नहीं है, और कंसोल अभी भी प्रोटोटाइप प्रकार की चेन प्रिंट करता है, जब ऑब्जेक्ट कुंजी ऑटो-सॉर्ट किए जाते हैं विस्तारित, आदि।

सिफारिश नहीं की गई

मैं शीर्ष उत्तरों में से किसी की भी सिफारिश नहीं करूंगा

1. console.table() - यह केवल उथले विस्तार है, और नेस्टेड वस्तुओं का विस्तार नहीं करता है

2. एक कस्टम अंडरस्कोर.जेएस फ़ंक्शन लिखें - एक सरल समाधान क्या होना चाहिए, इसके लिए बहुत अधिक ओवरहेड

Answer 10

इसके आसपास एक काम है, लेकिन यह मेरे लिए काम करता है।

मैं उस स्थिति में उपयोग करता हूं जहां उपयोगकर्ता कार्यों के आधार पर एक नियंत्रण / विजेट ऑटो अपडेट होता है। उदाहरण के लिए, जब आप विंडो से बाहर फ़ोकस करते हैं, तो ट्विटर के typeahead.js का उपयोग करते समय, ड्रॉपडाउन गायब हो जाता है और सुझाव DOM से हटा दिए जाते हैं।

डेव टूल्स में आप जिस नोड को विस्तार करना चाहते हैं, उस नोड पर राइट क्लिक करें ... -> उप-संशोधन संशोधनों , यह तब आपको डीबगर में भेज देगा। F10 या Shift + F11 को तब तक दबाए रखें जब तक कि आप म्यूट न कर दें। एक बार जब यह बदल जाता है तो आप निरीक्षण कर सकते हैं। चूंकि डीबगर सक्रिय है, इसलिए Chrome का UI लॉक है और ड्रॉपडाउन को बंद नहीं करता है और सुझाव अभी भी DOM में हैं।

डायनामिक रूप से डाले गए नोड्स के लेआउट की समस्या का निवारण करते समय बहुत आसान है जो लगातार डाला और हटाया जाता है।

Answer 11

एक और आसान तरीका होगा

• JSON.stringify (jsonObject) का उपयोग करें
• विजुअल स्टूडियो कोड के परिणाम को कॉपी और पेस्ट करें
• परिणाम स्वरूपित करने के लिए Ctrl + K और Ctrl + F का उपयोग करें
• आप स्वरूपित विस्तारित ऑब्जेक्ट देखेंगे

मैंने सरल वस्तुओं के लिए यह कोशिश की है।

Answer 12

आप यहाँ देख सकते हैं:

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... } }

मैं दावा करता हूं कि इसका कोई स्वामित्व नहीं है, सिर्फ एक उपयोगी स्रोत का जिक्र है।

Answer 13

आप document.getElementsBy तक पहुँच कर अपने तत्व को देख सकते हैं ... और फिर परिणामी वस्तु की राइट क्लिक और कॉपी करें। उदाहरण के लिए:

document.getElementsByTagName('ion-app') जावास्क्रिप्ट ऑब्जेक्ट को वापस देता है जिसे टेक्स्ट एडिटर पर पेस्ट किया जा सकता है और यह इसे पूरी तरह से करता है।

बेहतर अभी तक: परिणाम तत्व पर राइट क्लिक करें - 'html के रूप में संपादित करें' - 'सभी का चयन करें' - 'कॉपी' - 'चिपकाएँ'