ब्राउज़रों में जावास्क्रिप्ट कंसोल का उपयोग करना

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

Console.log () कमांड और चर नाम

console.log() लिए सबसे सरल उपयोग मामला है, उदाहरण के लिए, कुछ स्ट्रिंग या ऑब्जेक्ट को आउटपुट करने के लिए। उदाहरण के लिए, लाइन को कंसोल पर प्रिंट करें:

 console.log('Is this working?'); 

अब कल्पना करें कि आपको कंसोल में कई ऑब्जेक्ट्स आउटपुट करने की आवश्यकता है। उदाहरण के लिए - जैसे:

 const foo = { id: 1, verified: true, color: 'green' }; const bar = { id: 2, verified: false, color: 'red' }; 

शायद इस समस्या को हल करने के लिए फॉर्म console.log(variable) कई कमांड का उपयोग करना सबसे तर्कसंगत होगा। हालाँकि डेटा कंसोल में जाता है, लेकिन आउटपुट होने पर एक समस्या स्पष्ट हो जाती है।

कंसोल में प्रदर्शित किया गया है पर एक नज़र रखना।


कंसोल में कोई चर नाम नहीं हैं

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

 console.log({ foo, bar }); 

इस दृष्टिकोण के साथ, एक ऑब्जेक्ट कंसोल को मिलेगा जिसकी संपत्ति के नाम चर ऑब्जेक्ट्स के नाम होंगे जिन्हें प्रदर्शित करने की आवश्यकता है। इसके अलावा, यह आपको कुछ कॉल से छुटकारा console.log() है console.log() , जो पहले अलग-अलग वस्तुओं को प्रदर्शित करने के लिए उपयोग किया जाता था।

कमांड कंसोल। टेबल ()

आप तालिका में वस्तुओं की सामग्री को प्रारूपित करके कंसोल में प्रदर्शित होने वाले कार्यक्रम को और बेहतर बना सकते हैं। इससे सूचनाओं की पठनीयता पर अच्छा प्रभाव पड़ेगा। अर्थात्, हम इस तथ्य के बारे में बात कर रहे हैं कि यदि आप सांत्वना में समान वस्तुओं के समान गुण या सरणियों के साथ ऑब्जेक्ट प्रदर्शित करते हैं, तो आप कंसोल का उपयोग कर सकते हैं। console.table() कमांड। यहां फॉर्म console.table({ foo, bar }) की एक कमांड को निष्पादित करने का परिणाम है console.table({ foo, bar }) ।


Console.table () कमांड एक्शन में

Console.group () कमांड

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

मान लीजिए कि हम कंसोल में कुछ उपयोगकर्ताओं के बारे में जानकारी प्रदर्शित करते हैं:

 console.group('User Details'); console.log('name: John Doe'); console.log('job: Software Developer'); //   console.group('Address'); console.log('Street: 123 Townsend Street'); console.log('City: San Francisco'); console.log('State: CA'); console.groupEnd(); console.groupEnd(); 

यहाँ इस कोड के परिणाम क्या दिखते हैं।


डेटा आउटपुट के परिणामों को समूहीकरण के लिए सांत्वना देना

console.group() का उपयोग करते समय। समूह console.group() कमांड, समूह डिफ़ॉल्ट रूप से, विस्तारित रूप में प्रदर्शित होते हैं। उन्हें कम से कम करने के लिए, आप इस कमांड के बजाय console.groupCollapsed() कमांड का उपयोग कर सकते हैं। ऐसे समूह की सामग्री को देखने के लिए, आपको समूह नाम के बाईं ओर स्थित आइकन का उपयोग करके इसका विस्तार करना होगा।

Console.warn () और कंसोल .error ()

स्थिति के आधार पर, कंसोल पर प्रदर्शित कुछ संदेशों के महत्व पर जोर देने के लिए console.warn() और console.error() कमांड उपयोगी हो सकते हैं। चेतावनी और त्रुटियों को प्रदर्शित करने के लिए उनका उपयोग क्रमशः किया जाता है।


चेतावनियाँ और त्रुटियाँ

शायद console.info() . console.info() कमांड, जो सूचना संदेशों को प्रदर्शित करने के लिए डिज़ाइन किया गया है, आपके लिए भी उपयोगी है।

कंसोल में प्रदर्शित संदेशों की उपस्थिति को अनुकूलित करने में, आप उन्हें स्वयं स्टाइल करके और भी आगे बढ़ सकते हैं। आप कंसोल में प्रदर्शित शैली पाठ के %c निर्देश का उपयोग कर सकते हैं। यह उपयोगी हो सकता है, उदाहरण के लिए, कुछ एपीआई को एक्सेस करने के लिए सबसिस्टम से आने वाली सूचनाओं के दृश्य पृथक्करण को व्यवस्थित करने के लिए, उपप्रणालियों से उपयोगकर्ता-उत्पन्न घटनाओं के प्रसंस्करण के लिए जिम्मेदार है, और इसी तरह। यहां मुख्य बात यह है कि स्टाइल के कुछ नियमों को विकसित करना और उनका पालन करना है। यहाँ कंसोल में डेटा आउटपुट की उपस्थिति को अनुकूलित करने का एक उदाहरण है:

 console.log('%c Auth ',           'color: white; background-color: #2274A5',           'Login page rendered'); console.log('%c GraphQL ',           'color: white; background-color: #95B46A',           'Get user details'); console.log('%c Error ',           'color: white; background-color: #D33F49',           'Error getting user details'); 

आप पाठ के अन्य सीएसएस गुणों को भी कॉन्फ़िगर कर सकते हैं, जैसे कि font-size और font-style ।


कंसोल के लिए स्टाइलिंग डेटा आउटपुट

Console.trace () कमांड

console.trace() कमांड कंसोल के स्टैक ट्रेस के परिणामों को प्रिंट करता है और आपको यह निर्धारित करने की अनुमति देता है कि इसके निष्पादन के दौरान कार्यक्रम में एक विशिष्ट बिंदु पर क्या हुआ। उदाहरण के लिए, कुछ विधियाँ हैं, जिन्हें कुछ स्थितियों में, केवल एक बार कॉल करने की आवश्यकता होती है, कहते हैं - डेटाबेस से जानकारी निकालने की विधियाँ। यह जांचना संभव है कि क्या console.trace() वास्तव में केवल इस पद्धति के लिए एक कॉल करता है। यह कमांड आपको कंसोल में जानकारी प्रदर्शित करने की अनुमति देता है जो कार्यक्रमों के आंतरिक तंत्र के सही संचालन को सत्यापित करने में मदद करता है।

कमांड कंसोल.टाइम ()

फ्रंट-एंड डेवलपर का सामना करने वाले महत्वपूर्ण कार्यों में से एक उच्च गति कोड प्रदान करना है। console.time() कमांड आपको संचालन के निष्पादन समय को मापने और यह प्रदर्शित करने की अनुमति देता है कि आपने कंसोल में क्या पाया। उदाहरण के लिए, इस आदेश का उपयोग करके हम कुछ चक्रों की जाँच करते हैं:

 let i = 0; console.time("While loop"); while (i < 1000000) { i++; } console.timeEnd("While loop"); console.time("For loop"); for (i = 0; i < 1000000; i++) { //   } console.timeEnd("For loop"); 

इस कोड को निष्पादित करने के बाद कंसोल में क्या मिला, इस पर एक नज़र डालें।


कंसोल.टाइम () का उपयोग करने के परिणाम

परिणाम

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

प्रिय पाठकों! यदि आप बड़ी जावास्क्रिप्ट परियोजनाएँ विकसित कर रहे हैं, तो हम आपको उन साधनों के बारे में बताने के लिए कहते हैं जिनके द्वारा आप उनमें लॉगिंग समस्याओं को हल करते हैं।