কনসোল.ডির এবং কনসোল.লগের মধ্যে পার্থক্য কী?

Question

ক্রোমে console বস্তুটি দুটি পদ্ধতি নির্ধারণ করে যা একই জিনিসটি মনে করে:

console.log(...)
console.dir(...)

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

আমি কী বলতে চাইছি তা দেখার জন্য এটি Chrome কনসোলে ( Ctrl+ Shift+ J) এ চেষ্টা করুন :

> o = { foo: 1 }
> console.log(o)
> o.foo = 2

এখন, [Object]লগ স্টেটমেন্টের নীচে প্রসারিত করুন এবং লক্ষ্য করুন যে এটি foo2 এর মান দিয়ে দেখায় এটি একই সত্য যদি আপনি ব্যবহার করে পরীক্ষার পুনরাবৃত্তি করেনdir পরিবর্তেlog ।

আমার প্রশ্ন, কেন এই দুটি আপাতদৃষ্টিতে অভিন্ন ফাংশন বিদ্যমান console?

Comments

চেষ্টা করুন console.log([1,2])এবং console.dir([1,2])আপনি পার্থক্যটি দেখতে পাবেন।

— ফেলিক্স ক্লিং

ফায়ারব্যাগে লগ ইন করা কোনও সামগ্রীর সামগ্রীর console.dirপরিবর্তন হয় না, তাই এটি একটি বড় পার্থক্য করে।

— ইউজিন ইয়ারমশ

সাবধান থাকুন console.dir(): এই বৈশিষ্ট্যটি মানহীন ! সুতরাং এটি উত্পাদন উপর ব্যবহার করবেন না;)

— fred727

এই প্রশ্নের URL টি দেখানো হয় ইমেজ এ () console.dir সঙ্গে পার্থক্য - মজিলা ডেভেলপার নেটওয়ার্ক - console.log () ।

— ব্যবহারকারী 7393973

@ ইউজার 9৩৯৯73৩ ভাল লাগবে! আসলে, চিত্রটি নীচে আমার উত্তর থেকে এসেছে , তাই আসলে আমার ল্যাপটপে ধরা হয়েছিল was এমডিএনকে কিছু ফিরিয়ে দেওয়া ভাল লাগল। এটা কি দুর্দান্ত উত্স।

— ড্রয় নোকস

Answer 1

ফায়ারফক্সে, এই ফাংশনগুলি বেশ আলাদাভাবে আচরণ করে: logকেবল একটি toStringউপস্থাপনা dirমুদ্রণ করে , অন্যদিকে নাব্যযোগ্য গাছ প্রিন্ট করে।

Chrome এ, বেশিরভাগ সময়log - ইতিমধ্যে একটি গাছ প্রিন্ট করে । যাইহোক, ক্রোম এর এখনও কিছু শ্রেণীর অবজেক্টগুলিকে বৈশিষ্ট্যযুক্ত এমনকি তাদের বৈশিষ্ট্যগুলি রয়েছে have সম্ভবত পার্থক্যের সুস্পষ্ট উদাহরণটি একটি নিয়মিত প্রকাশ:log

> console.log(/foo/);
/foo/

> console.dir(/foo/);
* /foo/
    global: false
    ignoreCase: false
    lastIndex: 0
    ...

আপনি অ্যারে (উদাঃ console.dir([1,2,3])) এর সাথে একটি স্পষ্ট পার্থক্যও দেখতে পাচ্ছেন যা logসাধারণ বিষয়গুলির চেয়ে আলাদা d

> console.log([1,2,3])
[1, 2, 3]

> console.dir([1,2,3])
* Array[3]
    0: 1
    1: 2
    2: 3
    length: 3
    * __proto__: Array[0]
        concat: function concat() { [native code] }
        constructor: function Array() { [native code] }
        entries: function entries() { [native code] }
        ...

ডিওএম অবজেক্টগুলি পৃথক পৃথক আচরণও প্রদর্শন করে, যেমনটি অন্য উত্তরে উল্লিখিত হয়েছে ।

Comments

ভুলে যাবেন না যে কনসোল.ডির বস্তুর একটি রেফারেন্স রাখে। আপনি সম্ভবত এটি উত্পাদন ব্যাপকভাবে ব্যবহার করতে চান না। এটি সম্ভবত তখনই কাজ করে যদি কনসোলটি থো প্রদর্শিত হয়।

— জিন-ফিলিপ লেক্লার্ক

উবুন্টুতে ক্রোমিয়াম 45-তে, সরলকৃত console.logবলে মনে হচ্ছে "ফায়ারফক্স" সংস্করণ যা toStringগাছের চেয়ে বরং দেখতে ভাল লাগে । তারা কখন এটি পরিবর্তন করেছে আমি এখনও নিশ্চিত নই, তবে তারা তা করেছে।

— আইসডওয়াটার

@ আইসড ওয়াটার: আপনি যখন কল করবেন console.logবা পরে এটি খুলবেন তখন আপনার কনসোলটি খোলা আছে কিনা তা নির্ভর করে । হ্যাঁ সত্যিই. :-)

— টিজে ক্রাউডার

আপনি ফাংশনের সাথে একটি পরিষ্কার পার্থক্যও দেখতে পাবেন। Chrome এ তার সাথে ফাংশন সোর্স কোড প্রিন্ট হবে console.log, কিন্তু সঙ্গে console.dir, আপনি দেখতে পারেন prototype, argumentsবৈশিষ্ট্য।

— টিনা চেন

এখন এটা মনে হচ্ছে যে console.logও console.dirআসলে একই উপস্থাপনা আসতে [1,2,3]ফায়ারফক্স হবে।

— এক্সজি

Answer 2

কনসোলে DOM উপাদান পাঠানোর সময় ক্রোমে আরও একটি কার্যকর পার্থক্য উপস্থিত রয়েছে।

বিজ্ঞপ্তি:

• console.log এইচটিএমএল-জাতীয় গাছে উপাদানটি মুদ্রণ করে
• console.dir JSON- জাতীয় গাছে উপাদানটি মুদ্রণ করে

বিশেষত, console.logডিওএম উপাদানগুলিকে বিশেষ চিকিত্সা দেয়, যেখানে console.dirহয় না। DOM জেএস বস্তুর সম্পূর্ণ উপস্থাপনা দেখার চেষ্টা করার সময় এটি প্রায়শই দরকারী।

এটি এবং অন্যান্য ফাংশন সম্পর্কে Chrome কনসোল এপিআই রেফারেন্সে আরও তথ্য রয়েছে ।

Comments

আমি বিশ্বাস করি এই তথ্যটি বিকাশকারী.মোজিলা.আর.

— ইউএস

@ lonehark99 আসলে এটি অন্যভাবে। তাদের স্ক্রিনশটের URL টি খেয়াল করবেন? তারা আমার উত্তর অনুলিপি করেছে। তবে এটি ঠিক আছে কারণ এটি এসও উত্তরগুলিতে লাইসেন্স দ্বারা অনুমোদিত এবং আমি এমডিএনকে যেভাবেই পছন্দ করি।

— ড্রয় নোকস

বুঝেছি, এটাই আমি প্রথমে ভাবছিলাম তবে তারা কেন এখান থেকে অনুলিপি করবে তা ভেবেছিলাম। বোধ হয়। ভাল তথ্য

— lonehark99

Answer 3

আমি মনে করি ফায়ারব্যাগ এটি ক্রোমের ডেভ সরঞ্জামগুলির চেয়ে আলাদাভাবে করে। দেখে মনে হচ্ছে ফায়ারব্যাগ আপনাকে যখন বস্তুর স্ট্রিংফাইড সংস্করণ দেয়console.dir দেয় দেয়। উভয়ই আপনাকে ক্রোমে প্রসারণযোগ্য অবজেক্ট দেয় এবং আমি মনে করি সেখানেই বিভ্রান্তি আসতে পারে। বা এটি ক্রোমে কেবল একটি বাগ।

ক্রোমে, উভয়ই একই জিনিস করে। আপনার পরীক্ষার প্রসারিত করে, আমি লক্ষ্য করেছি যে ক্রম যখন আপনি এটি প্রসারিত করবেন তখন অবজেক্টের বর্তমান মান পাওয়া যায়।

> o = { foo: 1 }
> console.log(o)
Expand now, o.foo = 1
> o.foo = 2
o.foo is still displayed as 1 from previous lines

> o = { foo: 1 }
> console.log(o)
> o.foo = 2
Expand now, o.foo = 2

আপনি যদি দেখতে চান তবে কোনও জিনিসের স্ট্রিংফাইড সংস্করণ পেতে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন। এটি আপনাকে দেখিয়ে দেবে যে এই লাইনটি যখন বলা হয় তখন অবজেক্টটি কী, আপনি যখন এটি প্রসারিত করবেন না।

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

Answer 4

ব্রাউজ-সক্ষম অবজেক্টটি আউটপুট করতে কনসোল.ডির () ব্যবহার করুন যার মাধ্যমে আপনি .toString () সংস্করণটির পরিবর্তে ক্লিক করতে পারেন:

console.dir(obj/this/anything)

ক্রোম কনসোলে কীভাবে পূর্ণ অবজেক্ট দেখাবেন?

Answer 5

ফায়ারব্যাগ সাইট http://getfirebug.com/logging/ থেকে

কনসোল.ডির (অবজেক্ট) কল করা কোনও ডিওএম ট্যাবের ক্ষুদ্র সংস্করণের মতো কোনও বস্তুর বৈশিষ্ট্যগুলির একটি ইন্টারেক্টিভ তালিকায় লগ করবে।

Answer 6

ফেলিক্স কলিংসের পরামর্শ অনুসরণ করে আমি এটি আমার ক্রোম ব্রাউজারে চেষ্টা করেছিলাম।

console.dir([1,2]) নিম্নলিখিত আউটপুট দেয়:

Array[2]
 0: 1
 1: 2
 length: 2
 __proto__: Array[0]

console.log([1,2])নিম্নলিখিত আউটপুট দেয় যখন :

[1, 2]

সুতরাং আমি বিশ্বাস করি console.dir()অ্যারে এবং অবজেক্টগুলিতে প্রোটোটাইপ ইত্যাদির মতো আরও তথ্য পেতে ব্যবহার করা উচিত।

Answer 7

console.log()এবং এর মধ্যে পার্থক্য console.dir():

সংক্ষেপে এখানে পার্থক্য:

• console.log(input): ব্রাউজারটি একটি দুর্দান্ত বিন্যাসিত পদ্ধতিতে লগ করে
• console.dir(input): ব্রাউজারটি তার সমস্ত বৈশিষ্ট্য সহ কেবলমাত্র বস্তুকে লগ করে

উদাহরণ:

নিম্নলিখিত কোড:

let obj = {a: 1, b: 2};
let DOMel = document.getElementById('foo');
let arr = [1,2,3];

console.log(DOMel);
console.dir(DOMel);

console.log(obj);
console.dir(obj);

console.log(arr);
console.dir(arr);

গুগল ডেভ সরঞ্জামগুলিতে নিম্নলিখিতগুলি লগ করে:

Answer 8

7 পূর্বে উত্তর কেউ উল্লেখ করেন যে, console.dirসমর্থন অতিরিক্ত আর্গুমেন্ট : depth, showHidden, এবং ব্যবহার করা হবে কিনা তাcolors ।

বিশেষ আগ্রহ রয়েছে depth, যা (তত্ত্ব) বেশি ডিফল্ট মধ্যে বস্তু travering 2 মাত্রা যে অনুমতি দেয় console.logসমর্থন।

আমি "তত্ত্বে" লিখেছিলাম কারণ অনুশীলনে যখন আমার কাছে মঙ্গুজ অবজেক্ট ছিল এবং দৌড়েছিল console.log(mongoose)এবং console.dir(mongoose, { depth: null })আউটপুট একই ছিল। আসলে কি গভীরভাবে recursed mongooseবস্তুর ছিল ব্যবহার util.inspect:

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));