প্রতিটি একক সময় আমি কনসোলে একটি অবজেক্ট দেখি যা আমি এটি প্রসারিত করতে চাই, তাই এটি প্রতিটি একক সময় করতে তীরটি ক্লিক করতে ক্লান্তিকর হয়ে ওঠে :) এখানে কোনও শর্টকাট বা স্বয়ংক্রিয়ভাবে সম্পন্ন করার জন্য সেটিংস আছে কি?
প্রতিটি একক সময় আমি কনসোলে একটি অবজেক্ট দেখি যা আমি এটি প্রসারিত করতে চাই, তাই এটি প্রতিটি একক সময় করতে তীরটি ক্লিক করতে ক্লান্তিকর হয়ে ওঠে :) এখানে কোনও শর্টকাট বা স্বয়ংক্রিয়ভাবে সম্পন্ন করার জন্য সেটিংস আছে কি?
উত্তর:
যদিও সমাধান উল্লেখ করার 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
এটি মানক নয়।
কনসোল.ট্যাবল () ব্যবহার করে বিবেচনা করুন ।
কোনও নোড এবং তার সমস্ত শিশুকে প্রসারিত / ধস করতে,
Ctrl + Alt + ক্লিক বা অপ্ট + তীর আইকনে ক্লিক করুন
(দ্রষ্টব্য যে যদিও ডিভাইস ডকটি সিটিআরএলটি + অল্ট + ক্লিক তালিকাবদ্ধ করে তবে উইন্ডোজে যা প্রয়োজন তা হল Alt + ক্লিক)।
সেরা উত্তর নাও হতে পারে তবে আমি আমার কোডটিতে কোথাও এটি করে চলেছি।
আপডেট :
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
সেরা সমাধান নয়, তবে আমার ব্যবহারের জন্য ভাল কাজ করে। গভীর অবজেক্টগুলি কাজ করবে না তাই এটি এমন কিছু যা উন্নতি করা যায়।
pretty(a)
console.table
অগভীর প্রসারিত, "অপশন / আল্ট + ক্লিক" একটি ম্যানুয়াল প্রক্রিয়া, এবং আন্ডারস্কোর.জেএস ব্যবহার করে এমন একটি কাস্টম ফাংশন লেখার পক্ষে উপযুক্ত নয়) ওভারহেড)
এখানে লোরফোন এর উত্তরের একটি পরিবর্তিত সংস্করণ যা আন্ডারস্কোরের উপর নির্ভর করে না:
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}
};
বৈশিষ্ট্যগুলি যদি একটি বিশেষ প্রত্যয় দিয়ে শুরু হয় (তবে 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,'$'))
আপনার যদি কোনও বড় অবজেক্ট থাকে, 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)
আমি ক্রোম এবং সাফারি কীভাবে অজানা (ওভার ইঞ্জিনিয়ারড) কনসোল করে তার ভক্ত নই। ডিফল্টরূপে কনসোল অবজেক্টটিকে ঘনীভূত করে, অবজেক্টটি প্রসারিত করার সময় অবজেক্ট কীগুলি বাছাই করে এবং প্রোটোটাইপ চেইন থেকে অভ্যন্তরীণ ফাংশনগুলি দেখায়। এই বৈশিষ্ট্যগুলি অপ্ট-ইন সেটিংস হওয়া উচিত। ডিফল্টরূপে বিকাশকারীরা সম্ভবত কাঁচা ফলাফলগুলিতে আগ্রহী তাই তারা তাদের কোডটি সঠিকভাবে কাজ করছে কিনা তা পরীক্ষা করতে পারে; এবং এই বৈশিষ্ট্যগুলি বিকাশকে কমিয়ে দেয় এবং ভুল ধরণের ফলাফল দেয়।
প্রস্তাবিত
console.log(JSON.stringify({}, undefined, 2));
একটি ফাংশন হিসাবে ব্যবহার করতে পারে:
console.json = object => console.log(JSON.stringify(object, undefined, 2));
console.json({});
"অপশন + ক্লিক" (ম্যাকের উপর ক্রোম) এবং "আল্ট + ক্লিক" (উইন্ডোতে ক্রোম)
তবে, এটি সমস্ত ব্রাউজার দ্বারা সমর্থিত নয় (যেমন সাফারি), এবং কনসোল এখনও প্রোটোটাইপ টাইপ চেইনগুলি মুদ্রণ করে, অবজেক্ট কীগুলি স্বয়ংক্রিয়ভাবে সাজানো হয় প্রসারিত, ইত্যাদি
প্রস্তাবিত নয়
আমি উপরের উত্তরগুলির কোনওটির সুপারিশ করব না
console.table()
- এটি কেবল অগভীর সম্প্রসারণ এবং নেস্টেড অবজেক্টগুলিকে প্রসারিত করে না
একটি কাস্টম আন্ডারস্কোর.জেএস ফাংশন লিখুন - কী কী সহজ সমাধান হওয়া উচিত তার জন্য অত্যধিক ওভারহেড
এটি প্রায় কাজ, তবে এটি আমার পক্ষে কাজ করে।
আমি সেই ক্ষেত্রে ব্যবহার করি যেখানে ব্যবহারকারীর ক্রিয়াগুলির উপর নির্ভর করে কোনও নিয়ন্ত্রণ / উইজেট অটো আপডেট হয়। উদাহরণস্বরূপ, টুইটারের typeahead.js ব্যবহার করার সময়, একবার আপনি উইন্ডোটির বাইরে ফোকাস করার পরে, ড্রপডাউন অদৃশ্য হয়ে যায় এবং পরামর্শগুলি ডিওএম থেকে সরিয়ে ফেলা হয়।
ডিভাইস সরঞ্জামগুলিতে আপনি নোডে ডান ক্লিক করুন যা আপনি ব্রেক ব্রেক সক্ষম করতে চান ... -> সাবট্রি পরিবর্তনগুলি , এরপরে এটি আপনাকে ডিবাগারে প্রেরণ করবে। F10 বা Shift + F11 মারতে থাকুন যতক্ষণ না আপনি ডমকে পরিবর্তন করতে পারেন। একবার পরিবর্তিত হলে আপনি পরিদর্শন করতে পারেন। যেহেতু ডিবাগারটি সক্রিয় তাই ক্রোমের ইউআই লক করা আছে এবং ড্রপডাউনটি বন্ধ করে না এবং পরামর্শগুলি এখনও ডিওমে রয়েছে।
ডায়নামিকভাবে sertedোকানো নোডগুলির নিরূপণ লেআউট যখন খুব সহজেই inোকানো এবং নিয়মিত সরিয়ে ফেলা হয় তখন খুব সহজ।
আর একটি সহজ উপায় হবে
আমি সাধারণ বিষয়গুলির জন্য এটি চেষ্টা করেছি।
আপনি এখানে দেখতে পারেন:
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... } }
আমি দাবি করি এটির কোনও মালিকানা নেই, কেবলমাত্র একটি সহায়ক উত্সকে উল্লেখ করে।
আপনি ডকুমেন্ট.এজেট এলিমেন্টস বাই ... এবং তারপরে ডান ক্লিক করুন এবং ফলাফলযুক্ত বস্তুর অনুলিপি করে আপনার উপাদানটি দেখতে পেলেন। উদাহরণ স্বরূপ:
document.getElementsByTagName('ion-app')
জাভাস্ক্রিপ্ট অবজেক্টটি ফিরিয়ে দেয় যা পাঠ্য সম্পাদককে অনুলিপি করা যায় এবং এটি পুরোপুরি করে।
আরও ভাল: ফলিত উপাদানটিতে ডান ক্লিক করুন - 'এইচটিএমএল হিসাবে সম্পাদনা করুন' - 'সমস্ত নির্বাচন করুন' - 'অনুলিপি' - 'আটকান'