कंसोल.लॉग क्या है?


414

का उपयोग क्या है console.log?

कृपया कोड उदाहरण के साथ जावास्क्रिप्ट में इसका उपयोग करने का तरीका बताएं।

जवाबों:


454

यह एक jQuery सुविधा नहीं है, लेकिन डिबगिंग उद्देश्यों के लिए एक सुविधा है। उदाहरण के लिए आप कुछ होने पर कंसोल को लॉग इन कर सकते हैं। उदाहरण के लिए:

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

तब आप #someButton was clickedफायरबग के "कंसोल" टैब (या किसी अन्य टूल के कंसोल - जैसे क्रोम के वेब इंस्पेक्टर) को देखेंगे जब आप बटन पर क्लिक करेंगे।

कुछ कारणों से, कंसोल ऑब्जेक्ट अनुपलब्ध हो सकता है। तब आप देख सकते हैं कि यह क्या है - यह तब उपयोगी है जब आपको उत्पादन पर तैनात करते समय अपना डिबगिंग कोड निकालना नहीं पड़ता:

if (window.console && window.console.log) {
  // console is available
}

17
Google Chrome के डेवलपर टूल में कंसोल भी एकीकृत है।
रॉबर्टपीट 16

8
"यह तब उपयोगी होता है जब आपको अपने डिबगिंग कोड को हटाने की आवश्यकता नहीं होती है जब आप उत्पादन के लिए तैनात होते हैं" <- क्या होगा यदि एक अंतिम-उपयोगकर्ता फ़ायरबग खोलता है?
अब्दुल्ला 16

6
यह IE को कंसोल को परिभाषित नहीं करने के लिए एक त्रुटि नहीं देने के लिए भी उपयोगी है
एलन व्हिटेलॉव

4
Imho, हर बार जाँचने से बेहतर है यदि कंसोल.लॉग उपलब्ध है तो कुछ इस तरह से बेहतर है: यदि (टाइपोफ़ (कंसोल) == 'अपरिभाषित') {कंसोल = {'लॉग': फ़ंक्शन () {रिटर्न}}} ऐसी स्थिति में आप हर बार अपनी उपस्थिति की जाँच किए बिना कंसोल लिख सकते हैं।
एनरिको कारलेसो

12
if (console.log)(या फिर भी if (console && console.log)) कंसोल उपलब्ध नहीं होने पर भी एक त्रुटि होगी। आपको उपयोग करना चाहिए window.console(जैसा windowकि मौजूद होने की गारंटी है) और केवल एक समय में एक गहराई स्तर की जांच करें।
TGR

226

स्थान आप कंसोल देख सकते हैं! बस उन सभी को एक उत्तर में रखना है।

फ़ायरफ़ॉक्स

http://getfirebug.com/

(अब आप फ़ायरफ़ॉक्स के डेवलपर टूल में निर्मित Ctrl + Shift + J (टूल> वेब डेवलपर> त्रुटि कंसोल) का उपयोग कर सकते हैं, लेकिन फ़ायरबग बहुत बेहतर है; फायरबग का उपयोग करें)

सफारी और क्रोम

मूल रूप से वही।

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.apple.com/technologies/safari/developer-tools.html

इंटरनेट एक्स्प्लोरर

मत भूलो कि आप IE9 या IE10 में IE7 और IE8 को डिबग करने के लिए संगतता मोड का उपयोग कर सकते हैं

http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

यदि आपको IE7 के लिए IE6 में कंसोल का उपयोग करना चाहिए तो Firebug Lite बुकमार्कलेट का उपयोग करें

http://getfirebug.com/firebuglite/ स्थिर बुकमार्क के लिए देखें

http://en.wikipedia.org/wiki/Bookmarklet

ओपेरा

http://www.opera.com/dragonfly/

आईओएस

सभी iPhones, iPod टच और iPads के लिए काम करता है।

http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

अब iOS 6 के साथ अगर आप अपने डिवाइस में प्लग इन करते हैं तो आप OS X में Safari के माध्यम से कंसोल देख सकते हैं। या आप एमुलेटर के साथ ऐसा कर सकते हैं, बस एक सफारी ब्राउज़र विंडो खोलें और "डेवलप" टैब पर जाएं। वहां आपको सफारी निरीक्षक को अपने डिवाइस के साथ संवाद करने के लिए विकल्प मिलेंगे।

विंडोज फोन, एंड्रॉइड

इन दोनों में कोई कंसोल नहीं है और न ही कोई बुकमार्क क्षमता। इसलिए हम http://jsconsole.com/ टाइप का उपयोग करते हैं : सुनो और यह आपको अपने HTML में जगह बनाने के लिए एक स्क्रिप्ट टैग देगा। तब से आप अपने कंसोल को jsconsole वेबसाइट के अंदर देख सकते हैं।

iOS और Android

आप वेब इंस्पेक्टर टूल और उनके सुविधाजनक डिवाइस प्लगइन का उपयोग करके किसी भी डिवाइस पर कंसोल तक पहुंचने के लिए http://html.adobe.com/edge/inspect/ का उपयोग कर सकते हैं ।


पुराने ब्राउज़र की समस्याएं

यदि आप अपने कोड में कंसोल.लॉग का उपयोग करते हैं तो IE के अंतिम पुराने संस्करण क्रैश हो जाएंगे और एक ही समय में डेवलपर टूल खुले नहीं होंगे। सौभाग्य से यह एक आसान तय है। अपने कोड के नीचे दिए गए कोड स्निपेट का उपयोग करें:

 if(!window.console){ window.console = {log: function(){} }; } 

यह देखने के लिए जाँचता है कि कंसोल मौजूद है या नहीं, और अगर यह ऑब्जेक्ट को खाली फ़ंक्शन के साथ सेट करता है, जिसे कहा जाता है log। इस तरह से window.console और window.console.log वास्तव में कभी नहीं हैundefined.


26
गलत होने पर मुझे सुधारें, लेकिन मुझे लगता है कि कंसोल को देखने के लिए फ़ायरफ़ॉक्स में फ़ायरबग की कोई आवश्यकता नहीं है, बस Ctrl + Shift + J (उपकरण> वेब डेवलपर> त्रुटि कंसोल) पर क्लिक करें
Dane411

4
@ Dane411 यह सच है, लेकिन फ़ायरबग बेहतर और अधिक सामान्यतः उपयोग किया जाता है।
Fresheyeball

3
@Fresheyeball किसी को सभी कबाड़ को साफ करना है, लेकिन मुझे लगता है कि यह कुछ बिंदुओं पर उन रेप्स को काटने और वास्तव में समुदाय को साफ रखने के लिए कम दिलचस्प हो जाता है।
andlrc

2
जिसने भी इस उत्तर को अस्वीकार किया है, कृपया टिप्पणी करें। टिप्पणियों के बिना
चढ़ाव

window.console.log से पहले window.dump था। खाली लॉग फंक्शन से बेहतर है
OCTAGRAM

100

यदि आप अपने कोड का निरीक्षण करने के लिए फायरबग जैसे उपकरण का उपयोग करते हैं, तो आप कंसोल में लॉग किए गए किसी भी संदेश को देख सकते हैं। मान लें कि आप ऐसा करते हैं:

console.log('Testing console');

जब आप फायरबग (या जो भी आप अपने कोड का निरीक्षण करने के लिए उपयोग करने का निर्णय लेते हैं) में कंसोल तक पहुंचते हैं, तो आप देखेंगे कि आपने लॉग करने के लिए फ़ंक्शन को जो भी संदेश बताया है। यह विशेष रूप से तब उपयोगी होता है जब आप यह देखना चाहते हैं कि कोई फ़ंक्शन निष्पादित हो रहा है, या यदि कोई चर ठीक से सौंपा / सौंपा जा रहा है। यह वास्तव में आपके कोड के साथ क्या गलत हुआ, यह पता लगाने के लिए मूल्यवान है।


10
IE में त्रुटियों से बचने के लिए इसे पहले परिभाषित करना न भूलें: stackoverflow.com/a/7585409/318765
mgutt

83

यह ब्राउज़र के जावास्क्रिप्ट कंसोल, जैसे फायरबग या डेवलपर टूल्स (क्रोम / सफारी) के लिए एक लॉग संदेश पोस्ट करेगा और उस लाइन और फ़ाइल को दिखाएगा जहां से इसे निष्पादित किया गया था।

इसके अलावा, जब आप एक jQuery ऑब्जेक्ट आउटपुट करते हैं, तो इसमें DOM में उस तत्व का एक संदर्भ शामिल होगा, और इसे क्लिक करने पर वह तत्व / HTML टैब में जाएगा।

आप विभिन्न तरीकों का उपयोग कर सकते हैं, लेकिन सावधान रहें कि फ़ायरफ़ॉक्स में काम करने के लिए, आपके पास फ़ायरबग खुला होना चाहिए, अन्यथा पूरा पृष्ठ क्रैश हो जाएगा। चाहे आप जो भी लॉगिंग कर रहे हैं वह एक चर, सरणी, ऑब्जेक्ट या DOM तत्व है, यह आपको ऑब्जेक्ट के साथ-साथ प्रोटोटाइप के लिए पूर्ण ब्रेकडाउन देगा (हमेशा दिलचस्प होगा जो चारों ओर एक प्रहार है)। आप जितने चाहें उतने तर्क शामिल कर सकते हैं, और वे रिक्त स्थान द्वारा प्रतिस्थापित किए जाएंगे।

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

ये प्रत्येक कमांड के लिए अलग-अलग लोगो के साथ दिखाई देते हैं।

आप console.profile(profileName);किसी फ़ंक्शन, स्क्रिप्ट आदि की रूपरेखा तैयार करने के लिए भी उपयोग कर सकते हैं और फिर इसे समाप्त कर सकते हैंconsole.profileEnd(profileName); और यह क्रोम में आपके लिए प्रोफ़ाइल टैब (FF के साथ पता नहीं) में दिखाई देगा।

एक पूर्ण संदर्भ के लिए http://getfirebug.com/logging पर जाएं और मेरा सुझाव है कि आप इसे पढ़ें। (निशान, समूह, रूपरेखा, वस्तु निरीक्षण)।

उम्मीद है की यह मदद करेगा!


1
से console.log("x:", x)बेहतर क्यों है console.log("x:" + x)? क्या यह कम त्रुटि वाला ,है क्योंकि पढ़ने में आसान है +?
केविन मेरेडिथ

मेरी राय में यह पढ़ना थोड़ा आसान है जब आप कई अलग-अलग चीजों का उत्पादन कर रहे हैं। इस मामले में यह शायद +कड़ाई से उपयोग किया जाना चाहिए , लेकिन मैं यह दिखाना चाहता था कि आप कंसोल फ़ंक्शन में भी कॉमा का उपयोग कर सकते हैं। साथ ही, यह समस्या से बचता है यदि दोनों चर पूर्णांक या सरणियाँ हैं।
फ्रेड

5
console.log("x:", x)काफी बेहतर है, क्योंकि जब xऑब्जेक्ट या एरे (या कुछ भी लेकिन स्ट्रिंग) होता है, तो यह स्ट्रिंग में रूपांतरण के बिना, सही ढंग से प्रदर्शित होता है।
जोसेफ कुफनर

34

JQuery से कोई लेना-देना नहीं है और यदि आप इसका उपयोग करना चाहते हैं तो मैं आपको करने की सलाह देता हूं

if (window.console) {
    console.log("your message")
}

जब आप उपलब्ध नहीं हैं तो आप अपना कोड नहीं तोड़ेंगे।

जैसा कि टिप्पणी में सुझाव दिया गया है, आप इसे एक स्थान पर निष्पादित कर सकते हैं और फिर console.logसामान्य रूप से उपयोग कर सकते हैं

if (!window.console) { window.console = { log: function(){} }; }

18
क्या मैं इसके if(!window.console){ window.console = function(){}; }बजाय एक ही स्थान पर करने की सलाह दे सकता हूं , फिर सामान्य रूप से कंसोल.लॉग का उपयोग कर सकता हूं ।
Fresheyeball

23

console.logjQuery से कोई लेना देना नहीं है। यह डीबगर्स (क्रोम डीबगर और फायरबग सहित) द्वारा प्रदान की जाने वाली एक सामान्य वस्तु / विधि है जो स्क्रिप्ट को जावास्क्रिप्ट कंसोल में डेटा (या अधिकांश मामलों में) लॉग करने की अनुमति देती है।


19

console.logकुछ ब्राउज़रों पर कंसोल के लिए डिबग जानकारी लॉग करता है (फ़ायरफ़ॉक्स के साथ फ़ायरफ़ॉक्स स्थापित, क्रोम, IE8, फायरबग लाइट के साथ कुछ भी स्थापित)। फ़ायरफ़ॉक्स पर यह एक बहुत शक्तिशाली उपकरण है, जो आपको ऑब्जेक्ट्स का निरीक्षण करने या HTML तत्वों के लेआउट या अन्य गुणों की जांच करने की अनुमति देता है। यह jQuery से संबंधित नहीं है, लेकिन दो चीजें हैं जो आमतौर पर jQuery के साथ इसका उपयोग करते समय की जाती हैं:

  • Firebug के लिए FireQuery एक्सटेंशन इंस्टॉल करें । यह, अन्य लाभों के बीच, jQuery वस्तुओं के लॉगिंग को अच्छे बनाता है।

  • एक रैपर बनाएं जो jQuery के चेनिंग कोड सम्मेलनों के अनुरूप हो।

इसका मतलब आमतौर पर कुछ इस तरह से होता है:

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

जिसे आप फिर से शुरू कर सकते हैं

$('foo.bar').find(':baz').log().hide();

आसानी से jQuery चेन के अंदर की जाँच करने के लिए।


16

console.log jQuery से कोई लेना देना नहीं है।

यह एक डिबगिंग कंसोल, जैसे Firebug, के लिए एक संदेश लॉग करता है।


16

भ्रम का एक बिंदु कभी-कभी यह होता है कि कंसोल के उपयोग से आपकी किसी एक सामग्री की सामग्री के साथ पाठ संदेश को लॉग करने के लिए, आपको दोनों में से प्रत्येक को एक अलग तर्क के रूप में पास करना होगा। इसका मतलब है कि आपको उन्हें कॉमा से अलग करना होगा क्योंकि यदि आप आउटपुट को संक्षिप्त करने के लिए + ऑपरेटर का उपयोग करते हैं, तो यह .toString()आपके ऑब्जेक्ट की विधि को स्पष्ट रूप से कॉल करेगा । यह ज्यादातर मामलों में स्पष्ट रूप से ओवरराइड नहीं होता है और इसके द्वारा विरासत में प्राप्त डिफ़ॉल्ट कार्यान्वयन Objectकोई उपयोगी जानकारी प्रदान नहीं करता है।

कंसोल में प्रयास करने के लिए उदाहरण:

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

यदि आपने सूचनात्मक सामग्री के साथ सूचनात्मक पाठ संदेश को प्राप्त करने का प्रयास किया है, तो आपको यह मिलेगा:

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

तो ध्यान रखें कि कंसोल.लॉग वास्तव में आपके जितने चाहें उतने तर्क लेता है।


13

उपयोग console.logअपने पृष्ठ में डिबगिंग जानकारी जोड़ने के लिए ।

बहुत से लोग alert(hasNinjas)इस उद्देश्य के लिए उपयोग करते हैं लेकिनconsole.log(hasNinjas) साथ काम करना आसान होता है। उपयोगकर्ता इंटरफ़ेस को ब्लॉक करने वाले मोडल डायलॉग बॉक्स में अलर्ट-पॉप का उपयोग करना।

संपादित करें: मैं बैपटिस्ट पेरनेट और जान हैन्सिक से सहमत हूं कि यह जांचना बहुत अच्छा है window.consoleकि क्या पहले परिभाषित किया गया है ताकि कोई सांत्वना उपलब्ध न होने पर आपका कोड टूट न जाए।


12

एक उदाहरण - मान लीजिए कि आप जानना चाहते हैं कि कोड की कौन सी लाइन आप अपना प्रोग्राम चलाने में सक्षम थे (इससे पहले कि वह टूट गया!), बस टाइप करें

console.log("You made it to line 26. But then something went very, very wrong.")

11

आप इसका उपयोग फ़ायरफ़ॉक्स के लिए Firebug , या WebKit ब्राउज़र में जावास्क्रिप्ट कंसोल के साथ जावास्क्रिप्ट कोड को डीबग करने के लिए करते हैं।

var variable;

console.log(variable);

यह चर की सामग्री को प्रदर्शित करेगा, भले ही वह एक सरणी या वस्तु हो।

यह PHP केprint_r($var); लिए समान है ।


3
एक आसान टिप ... मैं हमेशा एक विश्वव्यापी सुलभ जावास्क्रिप्ट फ़ाइल में निम्नलिखित शामिल करता हूं if (!window.console) { window.console = { log : function() {} }; }:। यह आपको सामयिक डिबग स्टेटमेंट को हटाने के लिए भूल जाने के साथ दूर जाने की अनुमति देता है।
रौफामैटिक

@roufamatic मुझे नहीं पता ... कोड जोड़ने के लिए, कोड को संभालना नहीं है, जो एक बहुत ही भयानक समाधान की तरह लगता है ... विशेष रूप से जब मिल / जगह इतनी आसान है ...
jondavidjohn

10

खबरदार: अपने उत्पादन कोड में कंसोल पर कॉल छोड़ने से आपकी साइट इंटरनेट एक्सप्लोरर में टूट जाएगी। इसे कभी अलिखित न रखें। देखें: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog


2
यदि आप Windows मशीन का उपयोग कर रहे हैं तो यह कंसोल लॉग नहीं टूटेगा, लेकिन यदि आप इंटरनेट एक्सप्लोरर का उपयोग कर रहे हैं तो यह आपकी साइट को तोड़ देगा।
क्रिश होलेनबेक

मुझे लगता है कि उत्तर में संदर्भित ब्लॉग अब मौजूद नहीं है।
त्सुंडोकू

मूल लिंक मृत है। मुझे वेब आर्काइव कॉपी मिल गई है।
एलेक्स

8

शुरुआती दिनों में जेएस डिबगिंग alert()समारोह के माध्यम से किया गया था - अब यह एक अप्रचलित अभ्यास है।

console.log()एक समारोह है कि इस तरह के रूप में डिबगिंग कंसोल, पर लॉग ऑन करने संदेश लिखता है वेबकिट या Firebug। एक ब्राउज़र में आपको स्क्रीन पर कुछ भी दिखाई नहीं देगा। यह एक डीबगिंग कंसोल के लिए एक संदेश लॉग करता है। यह फ़ायरफ़ॉक्स के साथ फ़ायरफ़ॉक्स और वेबकिट आधारित ब्राउज़र (क्रोम और सफारी) में ही उपलब्ध है। यह सभी IE रिलीज में अच्छी तरह से काम नहीं करता है

कंसोल ऑब्जेक्ट DOM के लिए एक एक्सटेंशन है।

console.log()केवल विकास और डीबगिंग के दौरान कोड में इस्तेमाल किया जाना चाहिए।

यह बुरा अभ्यास माना जाता है कि कोई console.log()उत्पादन सर्वर पर जावास्क्रिप्ट फ़ाइल में छोड़ देता है।


5

यदि आपका ब्राउज़र डिबगिंग का समर्थन करता है, तो आप जावास्क्रिप्ट मानों को प्रदर्शित करने के लिए कंसोल.लॉग () विधि का उपयोग कर सकते हैं।

अपने ब्राउज़र में डिबगिंग को सक्रिय F12करें, और डिबगर मेनू में "कंसोल" चुनें।

जावास्क्रिप्ट में कंसोल। एक गैर-कार्यशील जावास्क्रिप्ट प्रोग्राम को ठीक करने या "डीबग करने" का प्रयास करें, और कंसोल.लॉग () कमांड का उपयोग करके अभ्यास करें। आपके द्वारा उपयोग किए जा रहे ब्राउज़र के आधार पर, जावास्क्रिप्ट कंसोल तक पहुँचने में आपकी मदद करने वाले शॉर्टकट हैं:

क्रोम कंसोल कीबोर्ड शॉर्टकट

विंडोज: Ctrl+ Shift+ J
मैक: Cmd+ Option+J

फ़ायरफ़ॉक्स कंसोल कीबोर्ड शॉर्टकट

विंडोज: Ctrl+ Shift+ K
मैक: Cmd+ Option+K

इंटरनेट एक्सप्लोरर कंसोल कीबोर्ड शॉर्टकट

F12 चाभी

सफारी कंसोल कीबोर्ड शॉर्टकट

Cmd+ Option+C


4

console.logविशेष रूप से डेवलपर्स के लिए कोड लिखने के लिए एक विधि है ताकि डेवलपर्स को असंगत रूप से सूचित किया जा सके कि कोड क्या कर रहा है। इसका उपयोग आपको यह सूचित करने के लिए किया जा सकता है कि कोई समस्या है, लेकिन कोड को डीबग करने का समय आने पर एक इंटरैक्टिव डीबगर की जगह नहीं लेनी चाहिए। इसकी अतुल्यकालिक प्रकृति का अर्थ है कि लॉग किए गए मान आवश्यक नहीं है जब विधि को बुलाया गया था।

संक्षेप में: console.log(यदि उपलब्ध हो) के साथ त्रुटियों को लॉग करें , तो अपनी पसंद के डीबगर का उपयोग करके त्रुटियों को ठीक करें: फायरबग , वेबिट डेवलपर टूल (अंतर्निहित सफारी और क्रोम ), IE डेवलपर टूल या विज़ुअल स्टूडियो।


4

जब मैं console.logडिबगिंग के लिए शुरू करता हूं तो मुझे वास्तव में वेब प्रोग्रामिंग आसान लगती है।

var i;

अगर मैं iरनटाइम के मूल्य की जांच करना चाहता हूं ..

console.log(i);

आप iफायरबग के कंसोल टैब में वर्तमान मूल्य की जांच कर सकते हैं । यह विशेष रूप से डिबगिंग के लिए उपयोग किया जाता है।


4

इसका उपयोग फायरबग कंसोल पर लॉग (कुछ भी आप इसे पास) करने के लिए किया जाता है। मुख्य उपयोग आपके जावास्क्रिप्ट कोड को डीबग करना होगा।


4

ऊपर वर्णित usages के अलावा, console.logटर्मिनल में भी प्रिंट कर सकते हैं node.js। एक्सप्रेस (उदाहरण के लिए) के साथ बनाया गया सर्वर console.logआउटपुट लकड़हारा फ़ाइल में लिखने के लिए उपयोग कर सकता है ।


2

जावा स्क्रिप्ट में कोई इनपुट और आउटपुट फ़ंक्शन नहीं है। तो कोड कंसोल डीबग करने के लिए। () विधि का उपयोग किया जाता है। यह लॉगिंग के लिए एक विधि है। यह कंसोल लॉग (विकास उपकरण) के तहत मुद्रित किया जाएगा।

यह IE8 में मौजूद नहीं है और जब तक आप IE विकास उपकरण नहीं खोलते हैं।


2

यह jQuery से निपटने के लिए कुछ भी नहीं है। console.log()जो ब्राउज़र के कंसोल के लिए जानकारी प्रवेश करने के लिए तरीके प्रदान सांत्वना वस्तु की लॉग समारोह, को संदर्भित कर रहा है। इन विधियों का उद्देश्य केवल डीबगिंग उद्देश्यों के लिए है और उपयोगकर्ताओं को अंतिम जानकारी देने के लिए इस पर निर्भर नहीं होना चाहिए।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.