💱 🛌🏿 ⛹🏽 जावास्क्रिप्ट कंसोल एपीआई 🙍🏿 🤚 🚖

डेवलपर्स के लिए डिबगिंग के लिए कंसोल का उपयोग करना सुविधाजनक है, लेकिन यह और भी सुविधाजनक है अगर कोई शेल है जो विभिन्न ब्राउज़रों में कंसोल की कार्यान्वयन सुविधाओं को ध्यान में रखता है, इसलिए कंसोल के लिए रैपर की थीम स्थिर रूप से मौजूद है।

पहले प्रकाशित समाधानों पर विचार करें, फिर हम 15 साल से अधिक के अनुभव वाले डेवलपर और सलाहकार एक्सल रौशमायर के हालिया लेख का अनुवाद करके कंसोल के तरीकों की समीक्षा करेंगे, फिर मैं अपने कुछ समाधानों को पोस्ट करूंगा जो कई परियोजनाओं पर विकास और डिबगिंग की प्रक्रिया में सफल रहे हैं।
यूपीडी 2015: वर्तमान स्थिति के लिए कमांड टेबल को अपडेट करना , जीथब (आरयू, एन; तैनाती के लिए जावास्क्रिप्ट)।

Habré, समीक्षा और प्रलेखन पर कंसोल रैपर

" हम कंसोल का उपयोग" पूर्ण करने के लिए करते हैं "- वस्तुओं के उत्कृष्ट प्रसंस्करण के तरीके दिखाता है, कार्यान्वयन में विभिन्न ब्राउज़रों की सुविधाओं को ध्यान में रखता है।

कंसोल को थोड़ा अधिक सुविधाजनक बनाना - मूल ऑब्जेक्ट को बदल देता है , जो कुछ बगों को हल करता है। पूरी तरह से विधि समर्थन की पूर्णता में कुछ ब्राउज़रों के गिरावट को ठीक करता है। जो कुछ भी रहता है वह देशी तरीकों को लिखने की लंबाई है, जो नए नामों की खोज नहीं करने के मामले में एक प्लस है, लेकिन मूल शब्दों के एक सेट की आवश्यकता है। IDE में एम्मेट टाइप एक्सेलेरेटर द्वारा हल किया जा सकता है।

कंसोल.लॉग के लिए सरल आवरण - 2010 (अंग्रेजी)।
Console.Log: डीबगिंग के लिए जावास्क्रिप्ट अलर्ट को अलविदा कहें! (IE), 2011 (अंग्रेजी)
dbug - एक कंसोल रैपर (Github, 2009)
" फायरबग * कंसोल एपीआई " - यह लेख बाद के अनुवाद की तुलना में कुछ अधिक पूर्ण है। ये दोनों परस्पर पूरक जानकारी देंगे। (हम अनुवाद का उपयोग करेंगे ताकि हम स्वयं इसका परीक्षण न करें, लेखक द्वारा किए गए कार्य को दोहराएं।)

एक्सल Rauschmayer ब्लॉग की समीक्षा अनुवाद

वर्णानुक्रम में छँटाई के साथ सारांश तालिका ।

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

विभिन्न ब्राउज़रों में कंसोल को कैसे मानकीकृत किया गया है?

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

Chrome: Developers.google.com/chrome-developer-tools/docs/console-api/

फायरबग : getfirebug.com/wiki/index.php/Console_API

फ़ायरफ़ॉक्स: developer.mozilla.org/en-US/docs/Web/API/console

IExplorer: msdn.microsoft.com/en-us/library/ie/hh772183.aspx

Node.js: nodejs.org/api/stdio.html

सफारी: सफारी डेवलपर गाइड

IE9 में बग : कंसोल टूल मौजूद है यदि कम से कम एक बार डेवलपर टूल विंडो (डेवलपर टूल, F12) खोला गया था। अन्यथा, एक संदर्भ त्रुटि उत्पन्न होती है। बग को बायपास करने के विकल्प के रूप में, आपको ऑब्जेक्ट की उपस्थिति के लिए जांच करने और अनुपस्थिति के मामले में स्टब लगाने की आवश्यकता है।

आसान लॉगिंग के लिए तरीके

सांत्वना देना । clear () - कंसोल को साफ़ करें;
सांत्वना देना । डीबग (ऑब्जेक्ट 1, ऑब्जेक्ट 2?; ...) कंसोल के समान है । लॉग () (प्रश्नों का अर्थ वैकल्पिक तर्क है) ;
सांत्वना देना । त्रुटि (object1, object2?; ...) - त्रुटि चिह्न के तहत लॉगिंग पैरामीटर (कोड को रोके बिना) और, संभवतः, कॉल स्टैक ट्रेस और कोड का लिंक जोड़ा जाता है।
सांत्वना देना । अपवाद (errorObject, object1?; ...]) [केवल Firebug में] - एक इंटरेक्टिव ट्रेस स्टैक के साथ ऑब्जेक्ट;
सांत्वना देना । जानकारी (object1 ;, object2?; ...) - कंसोल पर लॉगिंग; ब्राउज़रों में इसे एक आइकन के साथ चिह्नित किया जा सकता है और इसमें स्टैक ट्रेस या लिंक हो सकता है; Printf टेम्पलेट समर्थित हैं, जैसे कि कंसोल.लॉग में।
सांत्वना देना । log (object1?, object2?; ...) - कंसोल पर लॉगिंग। यदि पहला तर्क प्रिंटफ निर्देशों के प्रारूप में एक स्ट्रिंग है, तो यह शेष तर्कों के मूल्यों को प्रारूपित करता है। उदाहरण (Node.js REPL):

> console.log('%s', { foo: 'bar' }) [object Object] > console.log('%j', { foo: 'bar' }) {"foo":"bar"}

एकमात्र विश्वसनीय क्रॉस-प्लेटफॉर्म फ़ॉर्मेटिंग निर्देशन '% s' है। JSON डेटा के लिए Node.js '% j' का समर्थन करता है। ब्राउज़र कंसोल के लिए अन्य इंटरैक्टिव निर्देशों का समर्थन कर सकते हैं (अधिक विवरण यहाँ (रूसी)) ।

सांत्वना देना । ट्रेस () - ब्राउज़रों में फ़ंक्शन कॉल के एक इंटरेक्टिव स्टैक को दिखाते हैं (कॉल स्टैक जो किसी दिए गए बिंदु पर कोड निष्पादन का कारण बनता है, जो हम त्रुटि संदेशों में देखते हैं, उसी तरह);
सांत्वना देना । चेतावनी (object1; object2;? ...) - चेतावनी आइकन के तहत लॉगिंग; स्टैक ट्रेस या लिंक हो सकता है। Printf पैटर्न समर्थित हैं, जैसे कि कंसोल .log में।

	क्रोम	Firebug	फ़ायरफ़ॉक्स	आईई	Node.js	सफारी
स्पष्ट ()	✓	✓	-⊝-	✓	-⊝-	✓
डिबग ()	✓	✓	✓	✓	-⊝-	✓
त्रुटि ()	✓	✓	✓	✓	✓	✓
अपवाद ()	-⊝-	✓	-⊝-	-⊝-	-⊝-	-⊝-
जानकारी ()	✓	✓	✓	✓	✓	✓
लॉग ()	✓	✓	✓	✓	✓	✓
ट्रेस ()	✓	✓	✓	✓	✓	✓
चेतावनी ()	✓	✓	✓	✓	✓	✓

जाँच और गिनती के लिए तरीके

सांत्वना देना । मुखर (expr, obj?) - यदि पहला तर्क गलत है, तो कंसोल में ऑब्जेक्ट प्रदर्शित करता है और एक अपवाद फेंकता है; अगर सच है - कुछ नहीं करता;
सांत्वना देना । count (लेबल?) - गिनता है कि इस लेबल के साथ कितनी बार फंक्शन हुआ।

	क्रोम	Firebug	फ़ायरफ़ॉक्स	आईई	Node.js	सफारी
मुखर ()	✓	✓	-⊝-	✓	✓	✓
गिनती ()	✓	✓	-⊝-	✓	-⊝-	✓

स्वरूपण के साथ लॉग के लिए तरीके

सांत्वना देना । dir (ऑब्जेक्ट) - कंसोल में ऑब्जेक्ट का प्रतिनिधित्व प्रदर्शित करता है। यह इंटरेक्टिव हो सकता है - विस्तार, अन्य टूल टैब में दृश्य (Node.js में - बिना सहभागिता के)।
सांत्वना देना । dirxml (ऑब्जेक्ट) - एक HTML या XML तत्व के एक XML ट्री को आउटपुट करता है।
सांत्वना देना । समूह (object1?, object2?; ...) - प्रत्येक नई पंक्ति में निर्दिष्ट और भविष्य के मूल्यों वाले समूहों के कंसोल में एक बंधने योग्य वस्तु का उत्पादन शुरू करता है। ब्लॉक को पूरा कमांड कंसोल घोषित किया गया है। समूह (और) को देखने के लिए शुरू में विस्तारित किया गया है, लेकिन मैन्युअल रूप से (माउस द्वारा) छोटा किया जा सकता है।
सांत्वना देना । GroupCollapsed (object1?, object2?; ...) - कंसोल के समान काम करता है। समूह (), लेकिन ब्लॉक शुरू में ढह गया है।
सांत्वना देना । groupEnd () - वह समूह बंद कर देता है जिसे कंसोल.ग्रुप () या कंसोल.ग्रुप कॉलेैप्सड () द्वारा शुरू किया गया था।
सांत्वना देना । तालिका (डेटा, कॉलम?) - सरणी को तालिका के रूप में प्रदर्शित करता है, प्रति पंक्ति एक तत्व। एक अतिरिक्त तर्क इंगित करता है कि कॉलम में कौन से सरणी गुण प्रदर्शित हैं। यदि छोड़ दिया जाता है, तो सभी गुण प्रदर्शित होते हैं। गैर-मौजूद गुणों को स्तंभ में अपरिभाषित के रूप में प्रदर्शित किया जाता है।

  var persons = [ { firstName: 'Jane', lastName: 'Bond' }, { firstName: 'Lars', lastName: 'Croft', age: 72 } ]; //  : console.table(persons); console.table(persons, ['firstName', 'lastName', 'age']);

हम कंसोल में देखेंगे:

(इंडेक्स)	firstName	lastName	आयु
0	«जेन»	«बॉण्ड»	अपरिभाषित
1	«लार्स»	«क्रॉफ्ट»	72

	क्रोम	Firebug	फ़ायरफ़ॉक्स	आईई	Node.js	सफारी
dir ()	✓	✓	✓	✓	✓	✓
डीरिक्स एमएल ()	✓	✓	-⊝-	✓	-⊝-	✓
समूह ()	✓	✓	✓	✓	-⊝-	✓
समूहबद्ध ()	✓	✓	✓	✓	-⊝-	✓
ग्रुपएंड ()	✓	✓	✓	✓	-⊝-	✓
तालिका ()	✓	✓	-⊝-	-⊝-	-⊝-	-⊝-

प्रोफाइलिंग और टाइमिंग

सांत्वना देना । markTimeline (लेबल) - [Safari-only] timeStamp () के समान।
सांत्वना देना । प्रोफ़ाइल (शीर्षक?) - प्रोफाइलिंग सक्षम करें। एक रिपोर्ट में टिप्पणी करने के लिए एक वैकल्पिक तर्क का उपयोग किया जाता है।
सांत्वना देना । प्रोफाइलईंड () - प्रोफाइलिंग को रोकता है और एक रिपोर्ट प्रदर्शित करता है।
सांत्वना देना । समय (लेबल) - निर्दिष्ट लेबल (नाम, पहचानकर्ता) के साथ एक टाइमर शुरू होता है।
सांत्वना देना । timeEnd (लेबल) - एक लेबल के साथ टाइमर को रोकता है और गिने हुए समय को दिखाता है।
सांत्वना देना । टाइमस्टैम्प (लेबल?) - निर्दिष्ट लेबल के साथ टाइमर के लिए मध्यवर्ती समय के नमूने प्रदर्शित करता है।

	क्रोम	Firebug	फ़ायरफ़ॉक्स	आईई	Node.js	सफारी
मार्कटलाइन ()	-⊝-	-⊝-	-⊝-	-⊝-	-⊝-	✓
प्रोफ़ाइल ()	✓	✓	(DevTools)	✓	-⊝-	✓
प्रोफ़ाइल और ()	✓	✓	(DevTools)	✓	-⊝-	✓
समय ()	✓	✓	✓	✓	✓	✓
समय ()	✓	✓	✓	✓	✓	✓
टाइमस्टैम्प ()	✓	✓	-⊝-	-⊝-	-⊝-	-⊝-

"(devtools)" का अर्थ है कि यदि डेवलपर टूलबार खुला है तो विधि काम करेगी।

धन्यवाद:
इस समीक्षा में दो लोगों ने योगदान दिया: मैथियस रिउटर (@ ग्वेक्स) और फिलिप कीक (@ पाइक)।
--अथोर: एक्सल रस्शमेयर (अनुवाद का अंत।)

सारांश तालिका वर्णानुक्रम में क्रमबद्ध हुई। (लिंक आपको इस लेख के अलावा ओपेरा समर्थन के बारे में विवरण देखने और पढ़ने में मदद करेंगे। ओपेरा के बारे में संक्षिप्त नोट्स अंतिम कॉलम में जोड़े गए हैं।)

	क्रोम	Firebug	फ़ायरफ़ॉक्स	आईई	Node.js	सफारी	ओपेरा
मुखर ()	✓	✓	-⊝-	✓	✓	✓	±
स्पष्ट ()	✓	✓	-⊝-	✓	-⊝-	✓	✓
गिनती ()	✓	✓	-⊝-	✓	-⊝-	✓	±
डिबग ()	✓	✓	✓	✓	-⊝-	✓	±
dir ()	✓	✓	✓	✓	✓	✓	✓
डीरिक्स एमएल ()	✓	✓	-⊝-	✓	-⊝-	✓	±
त्रुटि ()	✓	✓	✓	✓	✓	✓	±
अपवाद ()	-⊝-	✓	-⊝-	-⊝-	-⊝-	-⊝-	±
समूह ()	✓	✓	✓	✓	-⊝-	✓	✓
समूहबद्ध ()	✓	✓	✓	✓	-⊝-	✓	✓
ग्रुपएंड ()	✓	✓	✓	✓	-⊝-	✓	✓
जानकारी ()	✓	✓	✓	✓	✓	✓	✓
लॉग ()	✓	✓	✓	✓	✓	✓	±
मार्कटलाइन ()	-⊝-	-⊝-	-⊝-	-⊝-	-⊝-	✓	-⊝-
प्रोफ़ाइल ()	✓	✓	(DevTools)	✓	-⊝-	✓	-⊝-
प्रोफ़ाइल और ()	✓	✓	(DevTools)	✓	-⊝-	✓	-⊝-
तालिका ()	✓	✓	-⊝-	-⊝-	-⊝-	-⊝-	-⊝-
समय ()	✓	✓	✓	✓	✓	✓	±
समय ()	✓	✓	✓	✓	✓	✓	±
टाइमस्टैम्प ()	✓	✓	-⊝-	-⊝-	-⊝-	-⊝-	-⊝-
ट्रेस ()	✓	✓	✓	✓	✓	✓	±
चेतावनी ()	✓	✓	✓	✓	✓	✓	✓

सांत्वना विधियों से संबंधित नवीनतम जानकारी और तालिकाओं के लिए ब्लॉग के लेखक को धन्यवाद। पॉपकॉर्न के साथ चार्ज, बातचीत जारी रखें। हमारे पास उपयोग करने के लिए सभी तरीके हैं, लेकिन अधिक बार उन सभी की आवश्यकता नहीं है। अक्सर, एक लेकिन सार्वभौमिक कंसोल.लग पर्याप्त है। ऐसे कई कार्य हैं जहां मामूली लेकिन क्रॉस-ब्राउज़र क्षमताओं की आवश्यकता होती है।

विभिन्न अनुप्रयोगों के लिए कई स्निपेट्स (फ़ंक्शन के साथ कोड सम्मिलित)

उपरोक्त सब कुछ सुंदर है, एक संदर्भ के रूप में उपयुक्त है, पूरी तरह से और अच्छी तरह से। लेकिन समाधान की आवश्यकता है, सिद्धांत की नहीं - आखिरकार, प्रत्येक छोटे कार्य के लिए, समान समाधान की आवश्यकता होगी।

अनुभव से पता चला है कि सभी कार्यों के लिए व्यापक समर्थन होना आवश्यक नहीं है - अधिक बार नहीं की तुलना में, एक या अधिक कार्य पर्याप्त हैं, और सेवा कार्य अधिक दिलचस्प हैं: कंसोल को पूरी तरह से एक चर या अभिव्यक्ति (जब उत्पादन के लिए कोड बाहर रखा गया है) के साथ अक्षम करें, केवल चर पर त्रुटियों को प्रदर्शित करें या त्रुटियों के लिए तैयार करें परियोजना के तकनीकी समर्थन के लिए भेजना, कई विकल्पों के रूप में संदेशों का एक नियंत्रित आउटपुट है।

परिष्कृत और गैर-क्रॉस-ब्राउज़र फ़ंक्शंस की ज़रूरत से ज़्यादा ज़रूरत नहीं है: सुंदर टेबल आउटपुट जो IE या सफारी में डिबगिंग की अनुमति नहीं देता है, बल्कि हस्तक्षेप करेगा, आपको सांत्वना क्षणों में कंसोल सेटिंग्स स्तर पर वापस कर देगा।

इसलिए, अनुभव के आधार पर, उदाहरण यथासंभव सरल होंगे, लेकिन बहुत अधिक कोड के बिना काम करना। यदि आपको कोड के टुकड़े की आवश्यकता नहीं है, तो प्रोजेक्ट या पृष्ठ के लिए कम जटिल उदाहरण चुनना आसान है।

पहले हमें अपने स्वयं के अविष्कारों को करने की आवश्यकता है जो हमारे पास होने की आवश्यकता है। जो लोग किसी के निर्माण को नहीं पढ़ते हैं, वे इस पर एक लेख छोड़ सकते हैं। उनके आधार पर, उदाहरण बनाए जाएंगे।

1. फ़ंक्शन कोड डिज़ाइन।

बात करें और एक कोड डिजाइन चुनें। यह एक पृष्ठ डिजाइन नहीं है, यह इस तरह से है कि एक पाठ संपादक में कोड दिखेगा।

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

"Wcl ()" शेष संक्षिप्त रूप से और स्पष्ट रूप से पालन करें - "wci" - window.console.info; wcw - window.console.warn; wce - window.console.error। इस तरह के शब्द शायद ही कभी चर के नाम पर पाए जाते हैं, काफी कम होते हैं और आम तौर पर किसी परियोजना को खोजते या खोजते हुए दिखाई देते हैं। हम कंसोल को रीसेट करने के लिए समय के लिए wct () और wcc () जोड़ते हैं।

इन कार्यों को तुरंत एक वैश्विक वस्तु में रखना प्रस्तावित है। यह वैश्विक ऑब्जेक्ट के स्थान को रोक नहीं पाएगा, क्योंकि यदि आप चाहें तो उत्पादन पर उन्हें प्रोजेक्ट कोड से काट दिया जा सकता है। और अनुप्रयोग कम से कम 2 वर्णों को बचाता है या इससे अधिक यदि वे वस्तु में थे (जैसे कि C.log, C.err, ...)।

यह डिजाइन का अंत नहीं है - इस तरह के एक फंटिंग स्टिंग ऑब्जेक्ट के तरीकों के लिए उन्हें सुविधाजनक बनाने के लिए पर्याप्त सुविधाजनक निकला।

 String.prototype.wcl = wcl;

अशिष्ट हाथों को उठाने के लिए जल्दी मत करो - यह शुद्ध सिद्धांतों का उल्लंघन नहीं है, क्योंकि यह डिबगिंग, विकास के चरण में, फिर से काम करेगा। एक स्वच्छ परियोजना पर, आप उन्हें कोड से बाहर भी काट सकते हैं। और जिस तरह से संदेशों को डीबग करना आसान है उसे Ctrl-F के माध्यम से खोजने में मदद मिलती है।

 'Ajax_request'.wcl(data); //  'Ajax_request' Object{......} // wcl('Ajax_request', data);

कोड में इस टुकड़े का पता लगाएं - लाइन " अजाक्स_रेक्वेस्ट ' " (अंत में एक एपॉस्ट्रॉफी के साथ)। लाइन की शुरुआत में, हम लॉग में संदेश को बेहतर ढंग से उजागर करने के लिए अपने अतिरिक्त पात्रों को रखने के लिए स्वतंत्र हैं, उदाहरण के लिए, "=="।

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

अंत में, यदि आपको लॉग से उत्पादन को जल्दी से साफ करने की आवश्यकता है, तो आपके पास शेल में एक अभिव्यक्ति होनी चाहिए जो लॉग आउटपुट को प्रतिबंधित करती है। उदाहरण के लिए, आउटपुट यदि डोमेन लोकलहोस्ट है और अन्यथा नहीं। फिर प्रोजेक्ट को पार्स करके उन्हें कोड से हटाना आवश्यक नहीं है, हालांकि डिबगिंग अक्षम करने से जेएस थोड़ा लोड हो जाएगा और कोड बढ़ जाएगा।

कोड डिजाइन को संक्षेप में प्रस्तुत करने के लिए (इन तर्कों पर अब इसका गठन नहीं किया गया था, लेकिन अभ्यास के 2 वर्षों में, तर्क मूल और परिणामी सुविधाओं के कारणों को समझाने का एक तरीका है)।

1) हम लॉग के लिए नामों का उपयोग करते हैं: wcw, wci, wcl, wce, wcc, wct;
2) हम अन्य अवसरों का उपयोग नहीं करेंगे - हम उपयोग करने के लिए नहीं बढ़े हैं, लेकिन इस समझ में बढ़ गए हैं कि सरल जटिल से बेहतर है;
3) सभी फ़ंक्शन कोड में लिखने में आसानी के लिए स्ट्रिंग ऑब्जेक्ट के तरीकों के रूप में काम कर सकते हैं: 'string'wcl ();
4) एक अभिव्यक्ति द्वारा अक्षम किया जा सकता है;
5) अन्य दृश्य में लॉग प्रदर्शित कर सकते हैं - स्क्रीन पर एक div या एक रिमोट कंसोल;
6) जानकारी वितरित करने के लिए गतिशील रूप से स्विच करने की क्षमता दिलचस्प है।

2. स्निपेट

2.1। IE के बिना सरल लॉगिंग

 var noConsole =0, win = window ,wcl = function(a){ a = a!==undefined ? a :''; //     ,    noConsole ==1 if(win.console && !noConsole) win.console.log.apply(console, this instanceof String ? ["'=="+ this +"'"].concat([].slice.call(arguments)) : arguments); }; String.prototype.wcl = wcl;

सरल सड़क जादू के तत्वों के एक जोड़े हैं: फ़ंक्शन की पहली पंक्ति आपको तर्कों को निर्दिष्ट नहीं करने देती है और प्रपत्र 'ट्रेस_लोकेशन_116'.wcl () के अभिव्यक्तियों के लिए त्रुटियां नहीं हैं। और अभिव्यक्ति [] .slice.call (तर्क) आपको एक सरणी संपत्ति के रूप में तर्क का संग्रह प्राप्त करने की अनुमति देता है ताकि वे त्रुटियों के बिना कॉनकैट () संचालन में भाग ले सकें। (यह अक्सर साक्षात्कारों में पूछा जाता है: आप किसी संग्रह को किसी सरणी में कैसे बदल सकते हैं?)

यदि आप ऑब्जेक्ट की संपत्ति को पूरी तरह से छोड़ने का निर्णय लेते हैं, तो यह बहुत संक्षेप में पता चलता है (प्रश्न कोड के डिजाइन में है कि क्या केवल wcl (...) प्रारूप में लिखना हमारे लिए उपयुक्त है):

 var noConsole =0, win = window ,wcl = function(){ //     ,    noConsole ==1 if(win.console && !noConsole) win.console.log(arguments); };

हम तर्कों की अनुपस्थिति के लिए जाँच नहीं करते हैं, क्योंकि हम केवल तर्कों के बिना "wcl ();" का उपयोग नहीं करेंगे। यदि डेवलपर टूल विंडो खुली है तो यह IE में काम करेगा।

2.2। IE के साथ सरल लॉगिंग

यह समझने में ब्राउज़र की विफलता कि कंसोल.लॉग एक फ़ंक्शन है जादू का एक और दौर (और, सामान्य रूप से, सभी समाधानों में थोड़ा धीमा हो जाता है, इसलिए यदि आपको वास्तव में IE की आवश्यकता है तो इसका उपयोग करना बेहतर है)।

 var noConsole =0, win = window ,wcl = function(a){ a = a!==undefined ? a :''; //     ,  .  noConsole ==1, +IE if(win.console && !noConsole) Function.prototype.apply.call(console.log, console, this instanceof String ? ["'=="+ this +"'"].concat([].slice.call(arguments)) : arguments); }; String.prototype.wcl = wcl;

2.3। लॉग संदेश के चार स्तर

यदि हम अपने प्रोजेक्ट के संदेशों के महत्व और प्रकृति के बीच अंतर करने के लिए आउटपुट को थोड़ा-बहुत रंगना चाहते हैं, तो हम ~~कॉपी-पेस्ट का~~ उपयोग करेंगे और 2.1 में लिखे कोड का उपयोग 4 समान और सभी समर्थित कार्यों - लॉग, चेतावनी, जानकारी, त्रुटि के साथ करेंगे। चूंकि कोड में कॉपी-पेस्ट सबसे अच्छा नहीं है, एक साधारण विधि के बावजूद, निम्नलिखित स्निपेट की प्रतिलिपि बनाएँ, जहां कॉपी-पेस्ट पहले से ही लूप में परिवर्तित हो जाता है, और एक दिलचस्प विशेषता जोड़ी जाती है - लॉग में प्रदर्शित होने वाले संदेशों का स्तर निर्दिष्ट करें। स्तर:
0: चेतावनी, (चेतावनी)
1: जानकारी,
2: लॉग,
3: त्रुटि।
कुछ लॉग-वे चर नीचे इंगित करेंगे कि संदेश किस स्तर पर प्रदर्शित नहीं किया जाना चाहिए।

 (function(w, logLevel, wcA){ var lvl =0 ,$x = function(el, h){if(h) for(var i in h) el[i] = h[i]; return el}; for(var i in wcA) //[i]      w[i] = (function(lvl, wcAI, i){ return function(a){ a = a!==undefined|| arguments.length ? a :''; if(w.console && logLevel <= lvl) Function.prototype.apply.call(w.console[i], w.console, this instanceof String //w.console[i].apply(console, this instanceof String //--for without IE ? [wcAI + this +"'"].concat([].slice.call(arguments)) : arguments); else w.console[i] = function(){}; } })(lvl++, wcA[i], {wcw:'warn', wci:'info', wcl:'log', wce:'error'}[i]); w.wcc = w.console.clear; $x(String.prototype, {wcw: w.wcw, wci: w.wci, wcl: w.wcl, wce: w.wce, wcc: w.wcc }); })(window, /*logLevel*/ 0, {wcw:"'-w-", wci:'--', wcl:"'==", wce:"'=E="});

2.4। लॉग में या स्क्रीन पर ब्लॉक में संदेशों के चार स्तर

कंसोल का उपयोग करने की असंभवता के मामले में, स्क्रीन पर एक दृश्य ब्लॉक में लॉग के आउटपुट को बनाने के लिए कोड को लगभग दो बार विस्तारित करना होगा। एक अतिरिक्त फ़ंक्शन के रूप में, प्रोग्राम में कहीं भी लकड़हारा को फिर से शुरू करने की क्षमता जोड़ी जाती है, लॉगलेवल और स्क्रीन पर आउटपुट को चुनकर या कंसोल पर दोनों लॉगिंग विवरणों को बदलते हुए। लॉगिंग को फिर से शुरू में logLevel = 4 सेट करके अक्षम किया गया है।
(IE8- में शुरू करने के लिए, सहायक परिभाषाओं की आवश्यकता है :)

छिपा हुआ पाठ

 if(!Array.indexOf) //old browser support Array.prototype.indexOf = function(obj){ for(var i =0, iL = this.length; i < iL; i++) if(this[i] == obj) return i; return -1; }; if(!document.getElementsByClassName) document.getElementsByClassName = function(className){ if(!className) return []; var e = document.getElementsByTagName('*') ,list = []; for(var i =0, iL = e.length; i < iL; i++){ var clss = e[i].className.split(' '); if(clss.indexOf(className) >-1) list.push(e[i]); } return list; };

$ e () ब्लॉक उत्पन्न करने का एक तरीका है:

छिपा हुआ पाठ

 var $e = function(g){//g={el,cl,ht,cs,at,on,apT} if(!g.el && g.el !==undefined && g.el !='') return g.el; g.el = g.el ||'DIV'; var o = g.el = typeof g.el =='string'? document.createElement(g.el) : g.el; if(o){ if(g.cl) o.className = g.cl; if(g.cs){ if(!IE) $x(o.style, g.cs); else{ var s =''; for(i in g.cs) s += toCsKey(i) +':'+ g.cs[i] +';'; o.style.cssText = s; }} if(g.ht || g.at){ var at = g.at ||{}; if(g.ht) at.innerHTML = g.ht;} if(at) for(var i in at){ if(i=='innerHTML') o[i] = at[i]; else o.setAttribute(i, at[i]);} g.apT && g.apT.appendChild(o); //  ,   return o; }

 var logOnScreen =1 ,logLevel =0 //0..4 ,consoleOrig ,loadLogger = function(onScreen, logLevel){ logLevel = logLevel !==undefined ? logLevel : 3; var w = window, wcA ={wcw:"'-w-", wci:'--', wcl:"'==", wce:"'=E="} ,cons = w.document.getElementsByClassName('console')[0]; if(onScreen){ //       if(!cons) cons = $e({cl:'console',cs:{position:'fixed',width:'600px',minHeight:'150px',maxHeight:'800px',overflow:'auto',overflowX:'hidden',overflowY:'auto',top:'-2px',left:'300px',zIndex:99999,fontSize:'13px',fontFamily:'Arial',backgroundColor:'#a5c6ee',opacity:0.65, filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=65)'}, apT: w.document.body }); cons && (cons.style.display ='block'); var consA = {warn:'w', info:'i', log:'', error:'E'}; if(!w.console) w.console ={}; consoleOrig = w.console; w.console ={}; lvl =0; for(var i in consA){ w.console[i] = (function(lvl, consAI, conCA){return function(aa){ if(cons && logLevel <= lvl){ cons.innerHTML +=['<i class=cons'+ conCA +'>'+ (this instanceof String ?"'=="+ this +"'": consAI) +'</i>'].concat([].slice.call(arguments)) .join('<i class=consDelim>/ </i>') +'<br>'; cons.scrollTop = Math.max(0, cons.scrollHeight); } } })(lvl++, consA[i], i.charAt(0).toUpperCase() + i.substr(1) ); } w.console.clear = function(a){if(cons) cons.innerHTML ='';} }else cons && (cons.style.display ='none'); lvl =0; for(var i in wcA) //[i]      w[i] = (function(lvl, wcAI, i){ return function(a){ a = a!==undefined|| arguments.length ? a :''; if(w.console && logLevel <= lvl) Function.prototype.apply.call(w.console[i], w.console, this instanceof String //w.console[i].apply(console, this instanceof String //--for without IE ? [wcAI + this +"'"].concat([].slice.call(arguments)) : arguments); else w.console[i] = function(){}; } })(lvl++, wcA[i], {wcw:'warn', wci:'info', wcl:'log', wce:'error'}[i]); w.wcc = w.console.clear; $x(String.prototype, {wcw: w.wcw, wci: w.wci, wcl: w.wcl, wce: w.wce, wcc: w.wcc }); };

यह लॉगर DOM लोड करने के बाद लॉन्च किया गया है, क्योंकि div का उपयोग लॉग्स प्रदर्शित करने के लिए किया जा सकता है।

 if(window.addEventListener) this.addEventListener('DOMContentLoaded',tst,!1); else this.attachEvent('onload',tst); var tst = function(){ loadLogger(logOnScreen, logLevel); wcl('tst1'); wcl(); 'tst2'.wcl(); 'tst3'.wcl({t: 23, o:{s: true}}); 'tst-wcw'.wcw(120) 'tst-wci'.wci(121) 'tst-wcl'.wcl(122) 'tst-wce'.wce(123) };

यदि पाठ ऊंचाई अधिकतम ब्लॉक ऊंचाई से अधिक है, तो स्क्रॉल स्क्रॉल लाइन "cons.scrollTop = Math.max (0, cons.scrollHeight);" के साथ कार्य करेगा।

3. समय डिजाइन

"समय *" समूह के प्रारूप का पालन नहीं करने का कारण है, क्योंकि मूल प्रारूप में वे एकरूप नहीं हैं। केवल एक तर्क का उपयोग किया जाता है, और आउटपुट लाइन में केवल गिना गया समय होता है। एक स्ट्रिंग को खाली होने से रोकने के लिए, इसे लॉग प्रारूपों में से एक के साथ भरना बेहतर है, उदाहरण के लिए, wci (), इसमें शेष अंतराल से गणना की गई अंतराल और अन्य मान डालते हैं। सच है, इसके लिए गणना तंत्र की नकल करना आवश्यक है, यह IE के लिए एक ही समय में बना रहा है। इससे div में मूल्यों को प्रदर्शित करना भी संभव हो जाएगा।

आइए इसे शुरू करना आसान बनाएं - टाइमर को केवल कंसोल के लिए काम करने दें। लेकिन हमारे पास एक निरर्थक रूप है: एक संदर्भ विधि और एक सामान्य कार्य। 'X'wct () टाइमर की शुरुआत हो, और wct (' x ') टाइमर का अंत हो। यदि दो से अधिक तर्क हैं, तो 2 लाइनें प्रदर्शित की जाती हैं: एक नियमित लॉग, और फिर समय।

इस प्रणाली में टाइमस्टैम्प () के लिए कोई जगह नहीं है, हालांकि कोई भी उनके लिए wcts () फ़ंक्शन के बारे में सोच सकता है, वह भी किसी भी तर्क के साथ। लेकिन अतिसूक्ष्मवाद से चिपके रहना बेहतर है।

(हम पिछले एक के समान कोड के फेंक-इन को ध्वस्त कर देंगे)

 var logOnScreen =0 ,logLevel =1 //0..4 ,logTime =1 ,consoleOrig ,loadLogger = function(onScreen, logLevel){ logLevel = logLevel !==undefined ? logLevel : 3; var w = window, wcA ={wcw:"'-w-", wci:'--', wcl:"'==", wce:"'=E="} ,cons = w.document.getElementsByClassName('console')[0]; if(onScreen){ //       if(!cons) cons = $e({cl:'console',cs:{position:'fixed',width:'600px',minHeight:'150px',maxHeight:'800px',overflow:'auto',overflowX:'hidden',overflowY:'auto',top:'-2px',left:'300px',zIndex:99999,fontSize:'13px',fontFamily:'Arial',backgroundColor:'#a5c6ee',opacity:0.65, filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=65)'}, apT: w.document.body }); cons && (cons.style.display ='block'); var consA = {warn:'w', info:'i', log:'', error:'E'}; if(!w.console) w.console ={}; consoleOrig = w.console; w.console ={}; lvl =0; for(var i in consA){ w.console[i] = (function(lvl, consAI, conCA){return function(aa){ if(cons && logLevel <= lvl){ cons.innerHTML +=['<i class=cons'+ conCA +'>'+ (this instanceof String ?"'=="+ this +"'": consAI) +'</i>'].concat([].slice.call(arguments)) .join('<i class=consDelim>/ </i>') +'<br>'; cons.scrollTop = Math.max(0, cons.scrollHeight); } } })(lvl++, consA[i], i.charAt(0).toUpperCase() + i.substr(1) ); } w.console.clear = function(){if(cons) cons.innerHTML ='';}; }else cons && (cons.style.display ='none'); lvl =0; for(var i in wcA) //[i]      w[i] = (function(lvl, wcAI, i){ return function(a){ a = a!==undefined|| arguments.length ? a :''; if(w.console && logLevel <= lvl) Function.prototype.apply.call(w.console[i], w.console, this instanceof String //w.console[i].apply(console, this instanceof String //--for without IE ? [wcAI + this +"'"].concat([].slice.call(arguments)) : arguments); else w.console[i] = function(){}; } })(lvl++, wcA[i], {wcw:'warn', wci:'info', wcl:'log', wce:'error'}[i]); w.wcc = w.console.clear; w.wct = !document.all && logTime ? (function(lvl, wcAI, i){ return function(a){ arguments.length ? (arguments.length !=1 || this != w ? this.wcl.apply(this,arguments) :0 ,console.timeEnd.call(console, this != w ? this : a) ): console.time.call(console,this); } })() : function(){}; $x(String.prototype, {wcw: w.wcw, wci: w.wci, wcl: w.wcl, wce: w.wce, wcc: w.wcc, wct: w.wct }); };

आप इसे इस तरह से देख सकते हैं:

 var tst = function(){ loadLogger(logOnScreen, logLevel); 'x'.wct() wcl('tst1'); wcl(); 'tst2'.wcl(); 'y'.wct() 'tst3'.wcl({t: 23, o:{s: true}}); wct('x') wct('y',' ') };

ऐसा लगता है:

फिडल: jsfiddle.net/spmbt/Wgah8

जावास्क्रिप्ट कंसोल एपीआई