कंसोल.डेयर और कंसोल.लॉग के बीच क्या अंतर है?

357

क्रोम में consoleऑब्जेक्ट दो तरीकों को परिभाषित करता है जो एक ही काम करते हैं:

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

मैंने कहीं ऑनलाइन पढ़ा है जो dirइसे लॉग इन करने से पहले ऑब्जेक्ट की एक कॉपी लेता है, जबकि logबस कंसोल के संदर्भ को पास करता है, जिसका अर्थ है कि जब तक आप लॉग किए गए ऑब्जेक्ट का निरीक्षण करने जाते हैं, तब तक यह बदल सकता है। हालांकि कुछ प्रारंभिक परीक्षण से पता चलता है कि कोई अंतर नहीं है और वे दोनों अलग-अलग राज्यों में संभावित रूप से प्रदर्शित वस्तुओं से पीड़ित हैं जब वे लॉग इन थे।

क्रोम कंसोल ( Ctrl+ Shift+ J) में यह देखने की कोशिश करें कि मेरा क्या मतलब है:

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

अब, [Object]लॉग स्टेटमेंट के नीचे का विस्तार करें और ध्यान दें कि यह foo2 के मान से पता चलता है। यदि आप dirइसके बजाय प्रयोग को दोहराते हैं तो यह सच है log।

मेरा सवाल यह है कि ये दोनों समान रूप से समान कार्य क्यों करते हैं console?

javascript google-chrome console

— आकर्षित नोक
स्रोत

65

कोशिश करो console.log([1,2])और console.dir([1,2])आप अंतर देखेंगे।

— फेलिक्स क्लिंग

फ़ायरबग में किसी ऑब्जेक्ट की सामग्री को console.dirपरिवर्तित नहीं किया जाता है, इसलिए यह एक बड़ा अंतर बनाता है।

— यूजीन यर्मश जूल

3

देखभाल करने वाले बनें console.dir(): यह सुविधा गैर-मानक है ! इसलिए उत्पादन पर इसका इस्तेमाल न करें;)

— fred727

2

इस सवाल का यूआरएल में दिखाया गया है छवि पर () console.dir साथ अंतर - मोज़िला डेवलपर नेटवर्क - console.log () ।

— user7393973

1

@ user7393973 अच्छा लगाएं! दरअसल, छवि नीचे मेरे उत्तर से है, इसलिए वास्तव में मेरे लैपटॉप पर कब्जा कर लिया गया था। एमडीएन को कुछ वापस देना अच्छा है। यह कितना बड़ा संसाधन है।

— ड्रू नोक

352

फ़ायरफ़ॉक्स में, ये फ़ंक्शन काफी अलग तरीके से व्यवहार करते हैं: logकेवल एक toStringप्रतिनिधित्व को dirप्रिंट करता है, जबकि एक नौगम्य पेड़ को प्रिंट करता है।

क्रोम में, logपहले से ही एक पेड़ प्रिंट करता है - ज्यादातर समय । हालांकि, क्रोम की logअभी भी वस्तुओं के कुछ वर्गों को सख्त करती है, भले ही उनके पास गुण हों। शायद अंतर का सबसे स्पष्ट उदाहरण एक नियमित अभिव्यक्ति है:

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

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

आप सरणियों के साथ एक स्पष्ट अंतर भी देख सकते हैं (उदाहरण के लिए console.dir([1,2,3])) , जो logसामान्य वस्तुओं से अलग तरीके से किए जाते हैं:

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

डोम ऑब्जेक्ट भी अलग व्यवहार प्रदर्शित करते हैं, जैसा कि एक अन्य उत्तर पर दिया गया है ।

— apsillers
स्रोत

11

यह मत भूलो कि कंसोल .ir ऑब्जेक्ट का संदर्भ रखता है। आप शायद इसे बड़े पैमाने पर उत्पादन में उपयोग नहीं करना चाहते हैं। यह शायद केवल तभी काम करता है जब कंसोल को थियो दिखाया जाता है।

— जीन-फिलिप लेक्लर्क

उबंटू में क्रोमियम 45 में, console.logसरलीकृत "फ़ायरफ़ॉक्स" संस्करण प्रतीत होता है, जो toStringएक पेड़ की बजाय दिखता है । मुझे यकीन नहीं है कि जब उन्होंने इसे बदला, लेकिन उन्होंने ऐसा किया।

— आइकेडवाटर

3

@ आइसवाटर: इस बात पर निर्भर करता है कि आपके पास कॉल करते समय कंसोल खुला है console.logया नहीं। हाँ सच। :-)

— टीजे क्राउडर

आप फ़ंक्शन के साथ एक स्पष्ट अंतर भी देख सकते हैं। क्रोम में, यह साथ समारोह स्रोत कोड प्रिंट होगा console.log, लेकिन साथ console.dir, आप देख सकते हैं prototype, argumentsगुण।

— टीना चेन

1

अब ऐसा लगता है कि console.logऔर console.dirवास्तव [1,2,3]में फ़ायरफ़ॉक्स में उसी प्रतिनिधित्व को वापस करते हैं ।

— xji

151

DOM में कंसोल में DOM एलिमेंट भेजते समय क्रोम में एक और उपयोगी अंतर मौजूद होता है।

नोटिस:

console.log एचटीएमएल जैसे पेड़ में तत्व प्रिंट करता है
console.dir तत्व को JSON जैसे पेड़ में प्रिंट करता है

विशेष रूप से, console.logDOM तत्वों को विशेष उपचार देता है, जबकि console.dirऐसा नहीं करता है। DOM JS ऑब्जेक्ट के पूर्ण प्रतिनिधित्व को देखने का प्रयास करते समय यह अक्सर उपयोगी होता है।

इस और अन्य कार्यों के बारे में Chrome कंसोल API संदर्भ में अधिक जानकारी है ।

— आकर्षित नोक
स्रोत

मेरा मानना है कि यह जानकारी developer.mozilla.org/en-US/docs/Web/API/Console/log

— loneshark99

11

@ loneshark99 वास्तव में यह दूसरा तरीका है। उनके स्क्रीनशॉट में URL देखें? उन्होंने मेरे उत्तर की नकल की। लेकिन यह ठीक है क्योंकि एसओ उत्तरों पर लाइसेंस द्वारा अनुमति दी गई है और मुझे वैसे भी एमडीएन पसंद है।

— ड्रू नोक

समझ गया, कि मैं शुरू में क्या सोच रहा था लेकिन फिर सोचा कि वे यहाँ से नकल क्यों करेंगे। समझ में आता है । अच्छी जानकारी

— loneshark99

4

मुझे लगता है कि फायरबग यह क्रोम के देव टूल्स से अलग है। ऐसा लगता है कि फायरबग आपको ऑब्जेक्ट का एक कड़ा संस्करण console.dirदेता है जबकि आपको एक विस्तार योग्य वस्तु देता है। दोनों आपको क्रोम में विस्तार योग्य वस्तु देते हैं, और मुझे लगता है कि भ्रम की स्थिति कहां से आ सकती है। या यह क्रोम में सिर्फ एक बग है।

क्रोम में, दोनों एक ही काम करते हैं। आपके परीक्षण पर विस्तार करते हुए, मैंने देखा है कि जब आप इसका विस्तार करते हैं तो Chrome को ऑब्जेक्ट का वर्तमान मूल्य मिलता है।

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

— sachleen
स्रोत

3

इस तरह .toString () संस्करण के बजाय क्लिक करके ब्राउज़-सक्षम ऑब्जेक्ट को आउटपुट करने के लिए कंसोल.dir () का उपयोग करें:

console.dir(obj/this/anything)

Chrome कंसोल में पूर्ण ऑब्जेक्ट कैसे दिखाएं?

— बिच्छू-प्रिंस
स्रोत

2

फ़ायरबग साइट से http://getfirebug.com/log/

Comfort.dir (ऑब्जेक्ट) को कॉल करना ऑब्जेक्ट की संपत्तियों की इंटरैक्टिव सूची में प्रवेश करेगा, जैसे> DOM टैब का लघु संस्करण।

— मैरिएनस
स्रोत

0

फेलिक्स क्लिंग्स की सलाह के बाद मैंने इसे अपने क्रोम ब्राउज़र में आज़माया।

console.dir([1,2]) निम्नलिखित आउटपुट देता है:

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

जबकि console.log([1,2])निम्न उत्पादन देता है:

[1, 2]

इसलिए मेरा मानना है कि console.dir()सरणियों और वस्तुओं में प्रोटोटाइप आदि जैसी अधिक जानकारी प्राप्त करने के लिए उपयोग किया जाना चाहिए।

— बिमल
स्रोत

0

के बीच अंतर `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);

Google dev टूल में निम्न लॉग करता है:

— विलेम वैन डेर वेन
स्रोत

0

7 पहले जवाब में से कोई भी उल्लेख किया है कि console.dirसमर्थन करता है अतिरिक्त तर्क : depth, showHidden, और उपयोग करने के लिए है कि क्या colors।

विशेष रुचि है depth, जो (सिद्धांत में) वस्तुओं console.logका समर्थन करने वाले डिफ़ॉल्ट 2 स्तरों से अधिक में अनुरेखण की अनुमति देता है।

मैंने "सिद्धांत रूप में" लिखा था क्योंकि अभ्यास में जब मेरे पास एक मोंगोज़ ऑब्जेक्ट था और भाग गया console.log(mongoose)और console.dir(mongoose, { depth: null }), आउटपुट समान था। वास्तव में जिस mongooseवस्तु का गहराई से पुन util.inspect: उपयोग किया जा रहा था, वह थी :

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

— डैन डस्केल्सस्कु
स्रोत

कंसोल.डेयर और कंसोल.लॉग के बीच क्या अंतर है?

के बीच अंतर console.log()और console.dir():

उदाहरण:

के बीच अंतर `console.log()`और `console.dir()`: