Chrome ডি সরঞ্জামগুলিতে কী কী স্বয়ংক্রিয়ভাবে প্রসারিত করার উপায় আছে?

Question

প্রতিটি একক সময় আমি কনসোলে একটি অবজেক্ট দেখি যা আমি এটি প্রসারিত করতে চাই, তাই এটি প্রতিটি একক সময় করতে তীরটি ক্লিক করতে ক্লান্তিকর হয়ে ওঠে :) এখানে কোনও শর্টকাট বা স্বয়ংক্রিয়ভাবে সম্পন্ন করার জন্য সেটিংস আছে কি?

Comments

মুহূর্তে না. New.crbug.com এ একটি বৈশিষ্ট্য অনুরোধ ফাইল করতে দ্বিধা বোধ করুন (" দেবটুলস :" উপসর্গ দিয়ে সারাংশটি শুরু করুন) তবে আপনি কোথায় এবং কোন বিষয়গুলি প্রসারিত করতে চান তা সম্পর্কে খুব সুনির্দিষ্ট হন be উদাহরণস্বরূপ, আপনি অবশ্যই আপনার সমস্ত জিনিসগুলি প্রসারিত করতে চান না, কারণ তাদের (ক) বিশাল সংখ্যক সম্পত্তি থাকতে পারে; (খ) চক্রগুলি অন্তর্ভুক্ত করুন (পরবর্তী ক্ষেত্রে পুরো গাছটি প্রসারিত করতে কিছুটা সময় লাগবে ;))

— আলেকজান্ডার পাভলভ

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

— NVI

সেই নিকিতার জন্য ধন্যবাদ, আমি একটি বিকল্প সমাধান সহ একটি মন্তব্য পোস্ট করেছি।

— জেরেমি স্মিথ

আমি আনন্দের সাথে একটি কীবোর্ড শর্টকাট স্থির করবো। এটা কষ্ট আমাকে মাউস যেতে থাকার ...

— বাজার

কেন এটি 4 বছর পরে এখনও প্রয়োগ করা হয়নি?

— user3751385

Answer 1

যদিও সমাধান উল্লেখ করার JSON.stringifyক্ষেত্রে অধিকাংশ জন্য চমত্কার মহান, এটি কয়েক সীমাবদ্ধতা উপস্থিত রয়েছে

• এটি বিজ্ঞপ্তিযুক্ত রেফারেন্স সহ আইটেমগুলি পরিচালনা করতে পারে না যেখানে যেমন console.logএই জিনিসগুলির মার্জিতভাবে যত্ন নিতে পারে।
• এছাড়াও, আপনার যদি একটি বড় গাছ থাকে, তবে কিছু নোডকে ইন্টারেক্টিভভাবে ভাঁজ করার ক্ষমতা অন্বেষণকে আরও সহজ করে তুলতে পারে।

এখানে একটি সমাধান রয়েছে ( আন্ডারস্কোর.জেএস লাইব্রেরি ব্যবহার করে ) যা উপরের দুটি সৃজনশীলভাবে (আব) ব্যবহার করে সমাধান করে 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 এর মানটি একটি পছন্দসই স্তরে সামঞ্জস্য করা যেতে পারে এবং নীড়ের সেই স্তর ছাড়িয়ে - প্রসারিত লগটি স্বাভাবিক কনসোল.লগে ফিরে আসবে will

কিছু চালানোর চেষ্টা করুন:

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

নোট করুন যে আন্ডারস্কোর নির্ভরতা সহজেই মুছে ফেলা যায় - কেবল উত্স থেকে প্রয়োজনীয় ফাংশনগুলি সরিয়ে ফেলুন ।

এছাড়াও দয়া করে নোট করুন যে console.groupএটি মানক নয়।

Comments

আমি যে টাইপস্ক্রিপ্ট

— ম্যাথিউ CAROFF

Answer 2

কনসোল.ট্যাবল () ব্যবহার করে বিবেচনা করুন ।

Comments

উজ্জ্বল আমি কখনই এটি সম্পর্কে জানতাম না!

— দাগোবার্ট রেনোফ

অভ! আমার দিন বাঁচা!

— নিকোলা ওলারিউ

আমার মনে হয় যে আমি এর আগে কেউ দেখেনি তার পক্ষে কথা বলছি: আশ্চর্য!

— জন হান্ট

ভাল দেখাচ্ছে! 10+ টি কী থাকলে এটি বৃহত্তর মানগুলিকে সঙ্কুচিত করে :(

— সিস্টেমে রিবুটার

আমি এই উত্তরটি খুঁজছিলাম না, তবে খুশী আমি এটি খুঁজে পেয়েছি!

— জে কামিন্স

Answer 3

কোনও নোড এবং তার সমস্ত শিশুকে প্রসারিত / ধস করতে,

Ctrl + Alt + ক্লিক বা অপ্ট + তীর আইকনে ক্লিক করুন

(দ্রষ্টব্য যে যদিও ডিভাইস ডকটি সিটিআরএলটি + অল্ট + ক্লিক তালিকাবদ্ধ করে তবে উইন্ডোজে যা প্রয়োজন তা হল Alt + ক্লিক)।

Comments

এটি প্রকৃত প্রশ্নের সম্পূর্ণ উত্তর।

— রস প্যাটারসন

এটি পরীক্ষা করা ওএসএক্স ক্রোম 46-এ রয়েছে, এটি সমস্ত প্রোটোটাইপ অবজেক্টকেও প্রসারিত করে, যা প্রতিটি তীরটিতে ক্লিক করার মতো খারাপ করে তোলে। পরিবর্তে, আপনাকে 50 টি প্রোটোটাইপ পদ্ধতি, বৈশিষ্ট্য ইত্যাদির মাঝখানে বৈশিষ্ট্যগুলি (hasOwn) সন্ধান করতে হবে ...

— কেভ

এটি অনাবৃত রেফারেন্স এরিয়ার দেয়: _ সংজ্ঞায়িত ত্রুটি নয়

— ম্যাজপাইকো

শুধু একটি পার্শ্ব নোট। বৃহত্তর গভীরতার সাথে অবজেক্টগুলির ক্ষেত্রে, শুধুমাত্র একবারই নয়, পুরো অবজেক্টটি প্রসারিত না করা পর্যন্ত 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অগভীর প্রসারিত, "অপশন / আল্ট + ক্লিক" একটি ম্যানুয়াল প্রক্রিয়া, এবং আন্ডারস্কোর.জেএস ব্যবহার করে এমন একটি কাস্টম ফাংশন লেখার পক্ষে উপযুক্ত নয়) ওভারহেড)

— টিফমন্টিগ

Answer 5

অপশন + একটি ম্যাক ক্লিক করুন। সবেমাত্র এটি নিজেই আবিষ্কার করেছি এবং আমার সপ্তাহটি তৈরি করেছি! এটি কোনও কিছুর মতোই বিরক্তিকর হয়েছে

Answer 6

এখানে লোরফোন এর উত্তরের একটি পরিবর্তিত সংস্করণ যা আন্ডারস্কোরের উপর নির্ভর করে না:

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

বৈশিষ্ট্যগুলি যদি একটি বিশেষ প্রত্যয় দিয়ে শুরু হয় (তবে ang কৌণিক বস্তুর জন্য) তবে আপনার পুনরাবৃত্তি বাদ দেওয়ার সম্ভাবনাও রয়েছে

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

আপনি যে কোনও ওয়েব পৃষ্ঠায় এই ফাংশনটিও ইনজেক্ট করতে পারেন এবং সমস্ত বৈশিষ্ট্য অনুলিপি এবং বিশ্লেষণ করতে পারেন, ক্রোম কমান্ডটি ব্যবহার করে গুগল পৃষ্ঠায় চেষ্টা করুন:

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 ব্যবহার করার সময়, একবার আপনি উইন্ডোটির বাইরে ফোকাস করার পরে, ড্রপডাউন অদৃশ্য হয়ে যায় এবং পরামর্শগুলি ডিওএম থেকে সরিয়ে ফেলা হয়।

ডিভাইস সরঞ্জামগুলিতে আপনি নোডে ডান ক্লিক করুন যা আপনি ব্রেক ব্রেক সক্ষম করতে চান ... -> সাবট্রি পরিবর্তনগুলি , এরপরে এটি আপনাকে ডিবাগারে প্রেরণ করবে। F10 বা Shift + F11 মারতে থাকুন যতক্ষণ না আপনি ডমকে পরিবর্তন করতে পারেন। একবার পরিবর্তিত হলে আপনি পরিদর্শন করতে পারেন। যেহেতু ডিবাগারটি সক্রিয় তাই ক্রোমের ইউআই লক করা আছে এবং ড্রপডাউনটি বন্ধ করে না এবং পরামর্শগুলি এখনও ডিওমে রয়েছে।

ডায়নামিকভাবে sertedোকানো নোডগুলির নিরূপণ লেআউট যখন খুব সহজেই inোকানো এবং নিয়মিত সরিয়ে ফেলা হয় তখন খুব সহজ।

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);

আপনাকে অবশ্যই সিএসকিফাইজে নিম্নলিখিত কোডগুলি যুক্ত করতে হবে:

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

আমি দাবি করি এটির কোনও মালিকানা নেই, কেবলমাত্র একটি সহায়ক উত্সকে উল্লেখ করে।

Answer 13

আপনি ডকুমেন্ট.এজেট এলিমেন্টস বাই ... এবং তারপরে ডান ক্লিক করুন এবং ফলাফলযুক্ত বস্তুর অনুলিপি করে আপনার উপাদানটি দেখতে পেলেন। উদাহরণ স্বরূপ:

document.getElementsByTagName('ion-app') জাভাস্ক্রিপ্ট অবজেক্টটি ফিরিয়ে দেয় যা পাঠ্য সম্পাদককে অনুলিপি করা যায় এবং এটি পুরোপুরি করে।

আরও ভাল: ফলিত উপাদানটিতে ডান ক্লিক করুন - 'এইচটিএমএল হিসাবে সম্পাদনা করুন' - 'সমস্ত নির্বাচন করুন' - 'অনুলিপি' - 'আটকান'