ब्राउज़रों में जावास्क्रिप्ट कंसोल के साथ काम करने और प्रोग्रामर की उत्पादकता बढ़ाने की आज्ञा देता है

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


शायद पहली बात यह है कि बहुत से लोग सोचते हैं कि जब वे कहते हैं कि "कंसोल" कंसोल है। console.log() कमांड। हालाँकि, वह ऐसी कई टीमों में से एक है। सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, जावास्क्रिप्ट कंसोल के साथ काम करने की सुविधाओं के लिए समर्पित है।

एक सांत्वना क्या है?

जावास्क्रिप्ट कंसोल आधुनिक ब्राउज़रों में एकीकृत एक तंत्र है जो कमांड लाइन इंटरफेस में अंतर्निहित विकास टूल का समर्थन करता है। कंसोल का उपयोग करके, एक डेवलपर निम्नलिखित कार्य कर सकता है:

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

सामान्य तौर पर, कंसोल डेवलपर को सीधे ब्राउज़र में जावास्क्रिप्ट कोड लिखने की सुविधा देता है, पृष्ठों पर क्या हो रहा है, इसकी निगरानी करता है और इन प्रक्रियाओं का प्रबंधन करता है।

Methods कंसोल.लॉग, कंसोल.रोर, कंसोल.वरन और कंसोल.इनफो

कंसोल के साथ काम करते समय संभवतः सबसे अधिक उपयोग की जाने वाली विधियां console.log() , console.error() , console.warn() और console.info() । आप इन विधियों में से एक या अधिक पैरामीटर पास कर सकते हैं। सिस्टम उनमें से प्रत्येक के मूल्य की गणना करता है और सभी परिणामों को एक स्ट्रिंग में जोड़ता है, जिसके कुछ हिस्सों को रिक्त स्थान द्वारा अलग किया जाता है। ऑब्जेक्ट या सरणियों के मामले में, ये कमांड आपको उन्हें ऐसे रूप में प्रदर्शित करने की अनुमति देते हैं जो आपको उनकी सामग्री को देखने की अनुमति देता है। यहाँ है कि यह कैसा दिखता है।


कंसोल में डेटा को आउटपुट करने के लिए विभिन्न कमांड का उपयोग करना

Console.group विधि

console.group() विधि आपको कॉल की एक श्रृंखला को console.log() और साथ ही अन्य समान तरीकों से उन समूहों में इकट्ठा करने की अनुमति देती है जिनकी सामग्री ढह सकती है और विस्तारित हो सकती है। इस पद्धति का उपयोग करना बहुत सरल है: कॉल करने के बाद console.group() या ( console.groupCollapsed() बाद। console.groupCollapsed() , console.groupCollapsed() यदि आप समूह को तुरंत कम से कम दिखाना चाहते हैं console.groupCollapsed() , तो आपको सभी console.log() कॉल को जगह देने की आवश्यकता है जिसे समूहीकृत करने की आवश्यकता है। फिर, आप जो समूह बनाना चाहते हैं, उसके सेट के अंत में, आपको console.groupEnd() कमांड को रखने की आवश्यकता है। एक उदाहरण पर विचार करें।

 function doSomething(obj){   console.group('doSomething Profile');   const _data = new Date();   console.log('evaluating data: ', _data);   const _fullName = `${obj.firstName} ${obj.lastName}`;   console.log('fullName: ', _fullName);   const _id = Math.random(1);   console.log('id: ', _id);   console.groupEnd(); } doSomething({"firstName":"Riccardo", "lastName":"Canella"}); 

इस कोड के टुकड़े के निष्पादन के बाद, निम्नलिखित को कंसोल मिलेगा।


कंसोल में डेटा को समूहीकरण करके कंसोल.ग्रुप () पद्धति का उपयोग किया जाता है

Console.table पद्धति

console.table() विधि के अस्तित्व के बारे में जानने के बाद, मेरा जीवन हमेशा के लिए बदल गया है। उदाहरण के लिए, JSON कोड या बड़े JSON सरणियों को आउटपुट करने के लिए नियमित console.log() कमांड का उपयोग एक बुरा सपना है। console.table() विधि आपको बहुत तालिकाओं के अंदर जटिल डेटा संरचनाओं को प्रदर्शित करने की अनुमति देती है, जिनके स्तंभों को पैरामीटर के रूप में पास करके नाम दिया जा सकता है (सभी ब्राउज़र इस सुविधा को समर्थन नहीं करते हैं। console.table() )। यहाँ इस टीम के साथ काम करने का एक उदाहरण है।

 const typeOfConsole = [   {name:'log', type:'standard'},   {name:'info', type:'standard'},   {name:'table', type:'wow'} ]; console.table(typeOfConsole); const mySocial = {   facebook: true,   linkedin: true,   flickr: true,   instagram: true,   VKontaktebadoo: false }; console.table(mySocial, ["Socials", "I'v an account"]); 

क्या हुआ, और बहुत अच्छा लग रहा है, और डिबगिंग की सुविधा प्रदान कर सकता है।


कंसोल का उपयोग कर आउटपुट को बड़ा करें।

Methods कंसोल .ाउंट, कंसोल.टाइम और कंसोल.टाइम। और

console.count() , console.time() और console.timeEnd() विधियों को एक डेवलपर के लिए स्विस चाकू की तरह कुछ कहा जा सकता है जो डिबगिंग अनुप्रयोगों में लगे हुए हैं। तो, console.count() विधि आपको अपनी खुद की कॉल की संख्या की गणना करने और दिए गए लेबल के साथ कंसोल में प्रदर्शित करने की अनुमति देती है। console.time() विधि आपको एक नामित टाइमर चलाने की अनुमति देती है (एक पैरामीटर के रूप में इसे नाम दिया गया है, एक पृष्ठ पर 10,000 टाइमर तक मौजूद हो सकते हैं)। एक विशिष्ट टाइमर को रोकने के लिए, console.timeEnd() कमांड का उपयोग एक पैरामीटर के रूप में पारित टाइमर लेबल के साथ किया जाता है। वह टाइमर बंद कर देता है और कंसोल में अपने काम का समय प्रदर्शित करता है। यहां इन तरीकों का उपयोग करने का तरीका बताया गया है।

 console.time('total'); console.time('init arr'); const arr = new Array(20); console.timeEnd('init arr'); for(var i = 0; i < arr.length; i++){   arr[i] = new Object();   const _type = (i % 2 === 0) ? 'even' : 'odd';   console.count(_type+'added'); } console.timeEnd('total'); 

और यहाँ कंसोल में इस कोड के काम का परिणाम है।


कंसोल.काउंट (), कंसोल.टाइम (), और कंसोल.टाइमईंड () विधियों का उपयोग करना

Console.trace और कंसोल .assert विधियाँ

console.trace() और console.assert() तरीके आपको उस जगह से स्टैक जानकारी को आउटपुट करने की अनुमति देते हैं जो उन्हें बुलाया गया था। कल्पना करें कि आप JS लाइब्रेरी विकसित कर रहे हैं और उपयोगकर्ता को बताना चाहते हैं कि त्रुटि कहां हुई। ऐसे में ये तरीके बहुत उपयोगी हो सकते हैं। console.assert() विधि, console.assert() समान है, दोनों के बीच का अंतर यह है कि console.assert() केवल आउटपुट डेटा होगा यदि इसके लिए पारित की गई शर्त पूरी नहीं हुई है। यहां इन तरीकों के साथ काम करने का तरीका बताया गया है।

 function lesserThan(a,b){   console.assert(a<b, {       "message":"a is not lesser than b",       "a": a,       "b": b   }); } lesserThan(6,5); console.trace("End"); 

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


कंसोल.स्सर्ट () और कंसोल.ट्रेस () कमांड का उपयोग करने का परिणाम है

कंसोल और प्रोडक्शन कोड के साथ काम करने की आज्ञा देता है

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

 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') var debug = process.env.NODE_ENV !== "production"; ..... optimization: {       minimizer: !debug ? [           new UglifyJsPlugin({               //                 uglifyOptions: {                   //                     comments: false,                   compress: {                      //                        warnings: false,                      //                            drop_console: true                   },               }          })] : [] } 

यह कॉन्फ़िगरेशन बहुत सरल है, लेकिन यह प्रोग्रामर के दैनिक कार्य को सुविधाजनक बनाता है और भूल गए कंसोल कमांड की समस्या को समाप्त करता है।

परिणाम

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

प्रिय पाठकों! जावास्क्रिप्ट कंसोल के साथ काम करने के लिए आप किस तरह के कमांड का उपयोग करते हैं?