कंसोल एकीकरण: त्रुटियों/चेतावनियों की संख्या फेंक दी गई है?

Question

तो अगर आप निरीक्षक को खोलने, तो आप इस मिल (यदि आप बदकिस्मत रहे हैं):

मैं एक छोटे से जे एस घटक है जो डिबगिंग जानकारी प्रदर्शित करता है का निर्माण कर रहा हूँ - वहाँ किसी भी तरह से पढ़ने के लिए है अब तक की गई त्रुटियों और चेतावनियों की संख्या?

एक हैकी समाधान जिसमें मैं आ सकता हूं, console.(error|log|warn) फ़ंक्शंस को अपने आप से बदलकर कुछ ट्रिकरी शामिल कर सकता है, लेकिन मुझे अभी भी परीक्षण करना है कि यह सभी मामलों के लिए काम करता है (उदा। कोड के बाहर)।

क्या ऐसा करने का कोई बेहतर तरीका है?

Answer 1

जैसा कि this उत्तर में बताया गया है, आमतौर पर मूल वस्तुओं/विधियों के व्यवहार को बदलने का अच्छा विचार नहीं है। हालांकि, निम्नलिखित कोड आप मिलना चाहिए क्या आप एक काफी अहानिकर ढंग से की जरूरत है:

// Add this IIFE to your codebase: 
 
(() => { 
 
\t // Get all of the property names of the console: 
 
\t const methodsToTrack = Object.keys(window.console); 
 
\t // Create an object to collect total usage tallies in: 
 
\t const usageRegistry = {}; 
 
\t for (let i = 0, j = methodsToTrack.length; i < j; i++) { 
 
\t \t let methodName = methodsToTrack[i]; 
 
\t \t // If the property is not a method, don't touch it: 
 
\t \t if(typeof window.console[methodName] !== 'function') { 
 
\t \t \t continue; 
 
\t \t } 
 
\t \t // Cache the original console method here: 
 
\t \t let consoleMethod = window.console[methodName]; 
 
\t \t // Overwrite console's method to increment the counter: 
 
\t \t window.console[methodName] = function() { 
 
\t \t \t // Defining registry properties here, so the registry only contains values for methods that were accessed: 
 
\t \t \t usageRegistry[methodName] = usageRegistry[methodName] || 0; 
 
\t \t \t // Execute the original method's behavior, capturing the returned value (if any) in a var, to return it at the end: 
 
\t \t \t const returnedValue = consoleMethod(...arguments); 
 
\t \t \t // Increment the usage registry for the executed method: 
 
\t \t \t usageRegistry[methodName]++; 
 
\t \t \t // Return the value the console's method would have returned, so the new method has the same signature as the old. 
 
\t \t \t return returnedValue; 
 
\t \t }; 
 

 
\t } 
 
\t // Define a funciton to output the totals to a console log, then clean up after itself: 
 
\t window.showConsoleTallies = function() { 
 
\t \t window.console.log(usageRegistry); 
 
\t \t usageRegistry['log']--; 
 
\t } 
 
})(); 
 

 
// Examples: 
 
showConsoleTallies(); 
 
console.log('log 1'); 
 
console.error('error 1'); 
 
console.log('log 2'); 
 
console.warn('warn 1'); 
 
console.error('error 2'); 
 
console.log('log 3'); 
 
showConsoleTallies();

पुनश्च: ऐसा इसलिए है ECMA6 संस्करण है, लेकिन run it through Babel के लिए स्वतंत्र महसूस अगर आप इसे करना चाहते हैं होने के लिए पुराने ब्राउज़र में उपयोग के लिए संकलित।