कंसोल को थोड़ा और सुविधाजनक बनाना

लगभग सभी जावास्क्रिप्ट प्रोग्रामर ब्राउज़रों में कंसोल का उपयोग करते हैं। कंसोल क्रोम, ओपेरा, IE में बनाया गया है और फॉक्स में फायरबग के साथ स्थापित किया गया है।
लेकिन उसके पास कुछ असुविधाएँ हैं जिन्हें बहुत आसानी से ठीक किया जा सकता है। यह है:

• कंसोल परिभाषित नहीं होने पर त्रुटियां
• संदर्भ से बाहर का उपयोग करने में असमर्थता
• उत्पादन के दौरान अक्षम करने में असमर्थता
• गैर-क्रॉस-ब्राउज़र संगतता

इन समस्याओं को जल्दी और आसानी से ठीक करें!



सबसे पहले, हमें कंसोल ऑब्जेक्ट को हमारी ऑब्जेक्ट के साथ बदलने की आवश्यकता है। मूल कंसोल को चर original में सहेजा जाएगा

 (function () { var global = this; var original = global.console; //   var console = global.console = {}; })(); 

अब आपको मूल कंसोल के सभी तरीकों को लागू करने की आवश्यकता है, यदि कोई हो:

 (function () { var global = this; var original = global.console; var console = global.console = {}; //   var methods = ['assert', 'count', 'debug', 'dir', 'dirxml', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'trace', 'warn']; //        for (var i = methods.length; i--;) { //  ,     , //          'assert' (function (methodName) { //    console[methodName] = function () { //         if (original && methodName in original) { //     original[methodName].apply(original, arguments); } }; })(methods[i]); } })(); 

इस प्रकार, हमें न केवल अपरिभाषित कंसोल के मामले में त्रुटियों से छुटकारा मिला, बल्कि दूसरी समस्या भी हल हुई - कंसोल को संदर्भ से दूर उपयोग करने की क्षमता, उदाहरण के लिए:

 //    console.log $('#my-element').click(console.log); //   var log = console.log; for (var i = 0; i < 10; i++) log(i); 

हमारे पुनर्वित्त के बिना, कि पहले में, दूसरे मामले में, हमें " Illegal invocation " त्रुटि मिलेगी।

अगली चीज़ जो हमें करने की ज़रूरत है वह है उत्पादन के दौरान डिबग को बंद करने की क्षमता को जोड़ना। यह दो लाइनों में किया जाता है:

 (function () { // .. var console = global.console = {}; console.production = false; // ... console[methodName] = function () { //               if (original && methodName in original && !console.production) { //     original[methodName].apply(original, arguments); // .. })(); 

अब डिबग जानकारी को बंद करने के लिए, हमारे आवेदन के आरंभ के दौरान कहीं न कहीं निम्नलिखित कोड को कॉल करना पर्याप्त होगा:

 console.production = true; 

ब्राउज़र सुविधाएँ

Govnoosol

IE 8 और IE 9 हमेशा अलग रहे हैं। यदि आप निम्नलिखित कोड कहते हैं:

 alert(typeof console.log); 

वह सामान्य ब्राउज़र "फ़ंक्शन", और गधा - "ऑब्जेक्ट" प्रदर्शित करेगा। object में एक apply विधि नहीं है, इसलिए इस बग के चारों ओर जाने का सबसे आसान तरीका फ़ंक्शन प्रोटोटाइप से विधि को कॉल करना है। थोड़ा सा जादू:

 original[methodName].apply(original, arguments); //  : Function.prototype.apply.call(original[methodName], original, arguments); 

Firebug

फायरबग एक मानक चर को ओवरराइड करने की अनुमति नहीं देता है । इसलिए, यह एक बहुत ही सरल फिक्स द्वारा हल किया गया है। असाइनमेंट से पहले, आपको संपत्ति को हटाना होगा:

  var original = global.console; var console = global.console = {}; // => var original = global.console; delete global.console; var console = global.console = {}; 

नए तरीके जोड़ें

बहुत से लोग जानते हैं कि सबसे उन्नत ब्राउज़रों में कोई समय और समय पद्धति नहीं है। उन्हें फायरबग से पोर्ट करें:

  // ... var original = global.console; var console = global.console = {}; if (original && !original.time) { original.time = function(name, reset){ if (!name) return; var time = new Date().getTime(); if (!console.timeCounters) console.timeCounters = {}; var key = "KEY" + name.toString(); if(!reset && console.timeCounters[key]) return; console.timeCounters[key] = time; }; original.timeEnd = function(name){ var time = new Date().getTime(); if(!console.timeCounters) return; var key = "KEY" + name.toString(); var timeCounter = console.timeCounters[key]; if (timeCounter) { var diff = time - timeCounter; var label = name + ": " + diff + "ms"; console.info(label); delete console.timeCounters[key]; } return diff; }; } //   var methods = // ... 

अब तो गधे भी समय गिनना सीख गए हैं।

हमें मिला अंतिम कोड इस प्रकार है:

 (function () { var global = this; var original = global.console; if ('console' in global) delete global.console; var console = global.console = {}; console.production = false; if (original && !original.time) { original.time = function(name, reset){ if (!name) return; var time = new Date().getTime(); if (!console.timeCounters) console.timeCounters = {}; var key = "KEY" + name.toString(); if(!reset && console.timeCounters[key]) return; console.timeCounters[key] = time; }; original.timeEnd = function(name){ var time = new Date().getTime(); if(!console.timeCounters) return; var key = "KEY" + name.toString(); var timeCounter = console.timeCounters[key]; if (timeCounter) { var diff = time - timeCounter; var label = name + ": " + diff + "ms"; console.info(label); delete console.timeCounters[key]; } return diff; }; } var methods = ['assert', 'count', 'debug', 'dir', 'dirxml', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'trace', 'warn']; for (var i = methods.length; i--;) { (function (methodName) { console[methodName] = function () { if (original && methodName in original && !console.production) { Function.prototype.apply.call(original[methodName], original, arguments); } }; })(methods[i]); } })(); 

अब कंसोल त्रुटियों का कारण नहीं बनता है, इसे संदर्भ से बाहर किया जा सकता है, युद्ध सर्वर पर अक्षम और IE में समय पढ़ सकता है)

स्वास्थ्य के लिए उपयोग करें, कोड के लिए लाइसेंस LGPL / MIT है, पाठ के लिए लाइसेंस CC BY 3.0 है

गितुब: github.com/theshock/console-cap