কীভাবে আমি কনসোল.লগ তৈরি করতে পারি কোনও অবজেক্টের বর্তমান অবস্থা দেখায়?


146

কোনও অ্যাড-অন (এবং আসলে বেশিরভাগ অন্যান্য ব্রাউজারগুলি) সহ সাফারিতে, console.logবস্তুটি মৃত্যুদন্ড কার্যকর করার শেষ অবস্থানে প্রদর্শিত হবে, যখন console.logডাকা হয়েছিল তখন তার রাজ্যে নয় ।

That console.logলাইনে অবজেক্টের অবস্থা পেতে আমাকে কেবল আউটপুট করার জন্য অবজেক্টটি ক্লোন করতে হবে ।

উদাহরণ:

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}

2
সমস্যাটির jsfiddle উদাহরণ এবং নীচে দেওয়া বিভিন্ন সমাধান: jsfiddle.net/luken/M6295
লূক

7
এটা তোলে জন্য অত্যন্ত অনির্দিষ্ট অথবা হল লগ বস্তু একটি লাইভ রেফারেন্স আউটপুট ফাংশন। এটিকে একটি ঘড়ি বলা হয় , যা লগ এন্ট্রির চেয়ে অনেক আলাদা। কোনও বস্তু লগ করার সময় এটির চেয়ে আর কোনও অর্থবোধ করে না যখন কোনও আদিম মান সংরক্ষণ করে কোনও ভেরিয়েবল লগ করে।
কল্পনা

2
এর আগে আমি কখনই কিছু পারিনি? আমি এই ভয়াবহ খুঁজে পাই
এরিকাগ্রিফিন

উত্তর:


171

আমি আপনি যা খুঁজছেন মনে console.dir()

console.log()আপনি যা চান তা করেন না কারণ এটি বস্তুর একটি রেফারেন্স মুদ্রণ করে এবং আপনি এটি খোলার সাথে সাথে এটি পরিবর্তন হয়ে যায়। console.dirআপনি যখন কল করবেন তখন অবজেক্টে থাকা বৈশিষ্ট্যের একটি ডিরেক্টরি মুদ্রণ করে।

নীচের JSON ধারণাটি একটি ভাল; এমনকি আপনি জেএসএন স্ট্রিংকে বিশ্লেষণ করতে এবং ব্রাউজযোগ্য বস্তুটি পেতে পারেন যেমন .dir () আপনাকে যা দেবে:

console.log(JSON.parse(JSON.stringify(obj)));


38
আমার জন্য ক্রোম console.logconsole.dir
অ্যান্ড্রু ডি

হুঁ, এটি আশ্চর্যজনক - এটি ফায়ারবগে কাজ করে। আমি ভেবেছিলাম এটি ওয়েবকাইটেও একই ছিল।
ইভান

1
আমি ক্রোমে যা দেখছি তা হ'ল লগ স্টেটমেন্টটি চালুর পরে যদি আপনি কনসোলটি খোলেন, তবে আপনি যখন এটি প্রসারিত করবেন তখন এটি অলস মূল্যায়ন করবে। কনসোলটি যদি ইতিমধ্যে খোলা থাকে (যেমন আপনি কনসোলটি খোলেন এবং তারপরে পৃষ্ঠায় রিফ্রেশ চাপুন), তবে তা আগ্রহী মূল্যায়ন করবে - যেমন লগ স্টেটমেন্টটি চালিত হওয়ার সময় মানটি মুদ্রণ করে।
পোলমার্চ

6
এছাড়াও, ডিয়ার জেএসএন-তে যেমন অগভীর-অনুলিপি গভীর-অনুলিপি করা হয়। কনসোল.ডির () কেবলমাত্র উচ্চ-স্তরের অবজেক্টের বৈশিষ্ট্যগুলি মূল্যায়ন করবে (অন্যান্য আরও গভীরভাবে নেস্টেড বস্তুগুলির মূল্যায়ন করা হবে না), তবে জেএসএন পুনরাবৃত্তিতে যাবে।
পোলেমার্চ

9
console.dirতেমনিভাবে আমার জন্যও ক্রোমে কাজ হয় না (v33)। লোকেদের যে প্রস্তাব দিয়েছে সেগুলির
লূক

71

আমি লগ হওয়ার সময় এটির স্থিতি দেখতে চাইলে আমি সাধারণত যা করি তা হ'ল আমি কেবল এটি JSON স্ট্রিংয়ে রূপান্তর করি।

console.log(JSON.stringify(a));

4
দুর্দান্ত, এটি আমার জন্য একটি দুর্দান্ত ইঙ্গিত ছিল: আমার অবজেক্টটি ঠিক কনসোলটিতে রাখার জন্য আমার এটি আবার পার্স করতে হয়েছিল। function odump(o){ console.log($.parseJSON(JSON.stringify(o))); }
ক্রিস

1
ধন্যবাদ এটি আমার জন্য কাজ করে!
কনসোল.ডির

1
যদি আপনার বস্তুটি একটি বিজ্ঞপ্তি কাঠামো ধারণ করে?
অ্যালেক্স ম্যাকমিলান

1
@AlexMcMillan আপনি ব্যবহার করতে পারে এক এর বিভিন্ন লাইব্রেরি যে সার্কুলার রেফারেন্স সঙ্গে বস্তুর তাদেরকে JSON stringification জন্য অনুমতি দেয়।
অ্যালেক্স টারপিন

7
গীজ। এটি করতে সক্ষম হওয়ার জন্য একটি সাধারণ, সুস্পষ্ট জিনিস হওয়া উচিত। পরিবর্তে আমাদের স্ট্রিংফাইড করতে, পার্স করতে, লগ করতে এবং একটি বিশেষ বিজ্ঞপ্তি রেফারেন্স লাইব্রেরি ব্যবহার করতে হবে!?! আমি মনে করি ব্রাউজারগুলিকে সাধারণ ডিবাগিং প্রয়োজনগুলিকে সমর্থন করার জন্য আরও ভাল কাজ করা উচিত।
মঙ্গলবার

26

ভ্যানিলা জেএস:

@ ইভানের উত্তরটি এখানে সেরা বলে মনে হচ্ছে। অবজেক্টের অনুলিপি কার্যকরভাবে তৈরি করতে কেবল (আব) JSON.parse / স্ট্রিংফাইড ব্যবহার করুন।

console.log(JSON.parse(JSON.stringify(test)));

JQuery নির্দিষ্ট সমাধান:

আপনি সময়ের সাথে নির্দিষ্ট সময়ে একটি বস্তুর স্ন্যাপশট তৈরি করতে পারেন jQuery.extend

console.log($.extend({}, test));

এখানে আসলে যা ঘটছে তা হ'ল jQuery হ'ল testবস্তুর সামগ্রীতে একটি নতুন অবজেক্ট তৈরি করছে এবং লগিং করছে (যাতে এটি পরিবর্তন হবে না)।

AngularJS (1) নির্দিষ্ট সমাধান:

কৌণিক একটি copyকার্যকারিতা সরবরাহ করে যা একই প্রভাবের জন্য ব্যবহৃত হতে পারে:angular.copy

console.log(angular.copy(test));

ভ্যানিলা জেএস র‍্যাপার ফাংশন:

এখানে এমন একটি ফাংশন রয়েছে যা মোড় করে console.logতবে লগ আউট করার আগে কোনও বস্তুর অনুলিপি তৈরি করে।

আমি উত্তরগুলিতে কয়েকটি অনুরূপ তবে কম শক্তিশালী ফাংশনের প্রতিক্রিয়াতে এটি লিখেছিলাম। এটি একাধিক যুক্তি সমর্থন করে এবং জিনিসগুলি নিয়মিত বস্তু না হলে অনুলিপি করার চেষ্টা করবে না will

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

উদাহরণস্বরূপ ব্যবহার :consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})


6

যে > Objectকনসোলে, শুধুমাত্র বর্তমান অবস্থা দেখানো হয় না। এটি বস্তুটি পড়তে আসলে পিছিয়ে আছে এবং আপনি এটি প্রসারিত না করা পর্যন্ত এর বৈশিষ্ট্যগুলি।

উদাহরণ স্বরূপ,

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

তারপরে প্রথম কলটি প্রসারিত করুন, এটি সঠিক হবে, যদি আপনি দ্বিতীয় console.logরিটার্নের আগে এটি করেন


2

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

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}

1

আমি একটি ইউটিলিটি সংজ্ঞায়িত করেছি:

function MyLog(text) {
    console.log(JSON.stringify(text));
}

এবং যখন আমি কনসোলে লগইন করতে চাই আমি কেবল তাই করি:

MyLog("hello console!");

এটি খুব ভাল কাজ করে!


1

আপনি মানব পঠনযোগ্য উপায়ে বস্তুটি লগ করতে চাইতে পারেন:

console.log(JSON.stringify(myObject, null, 2));

এটি প্রতিটি স্তরে 2 টি স্পেস সহ বস্তুকে সন্নিবেশ করায়।

আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে জেএসএন প্রিন্ট করতে পারি?


1

একটি ডিবাগার লাইব্রেরি ব্যবহার করার বিকল্প রয়েছে is

https://debugjs.net/

আপনার ওয়েব পৃষ্ঠায় স্ক্রিপ্টটি অন্তর্ভুক্ত করুন এবং লগ স্টেটমেন্ট দিন।

<script src="debug.js"></script>

লগিং

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}

0

এটি প্রস্তাব দেওয়ার জন্য আমাকে গুলি করা হতে পারে তবে এটি আরও একধাপ এগিয়ে নেওয়া যেতে পারে। এটি আরও পরিষ্কার করার জন্য আমরা সরাসরি কনসোল অবজেক্টকে প্রসারিত করতে পারি।

console.logObject = function(o) {
  (JSON.stringify(o));
}

আমি জানি না যে এটি স্পেসটাইম ধারাবাহিকতায় কোনও ধরণের লাইব্রেরির সংঘর্ষ / পারমাণবিক মেল্টডাউন / রিপ সৃষ্টি করবে কিনা। তবে এটি আমার কিউনিট পরীক্ষায় সুন্দরভাবে কাজ করে। :)


1
এটি কিছুই লগ না। এটি কেবল কিছু স্ট্রিংফাইং-এর ফলাফল গ্রাস করে। মজার বিষয় যে এটির উত্সাহ অর্জনগুলি
জ্যাচ লিসোবাই

0

আপনি লক্ষ্যযুক্ত পৃষ্ঠায় অনুরোধ জমা দেওয়ার আগে কনসোলটি খোলা বা কনসোল খোলার পরে কেবল পৃষ্ঠাটি রিফ্রেশ করুন ....


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.