कंसोल में मैसेज लॉग करें

Kayce Basques

इस इंटरैक्टिव ट्यूटोरियल में, Chrome DevTools कंसोल में मैसेज लॉग करने और उन्हें फ़िल्टर करने का तरीका बताया गया है.

इस ट्यूटोरियल को क्रम से पूरा करना ज़रूरी है. इसमें यह माना जाता है कि आपको वेब डेवलपमेंट की बुनियादी बातों के बारे में जानकारी है. जैसे, किसी पेज में इंटरैक्टिविटी जोड़ने के लिए JavaScript का इस्तेमाल कैसे किया जाता है.

डेमो और DevTools सेट अप करना

इस ट्यूटोरियल को इस तरह से डिज़ाइन किया गया है कि आप डेमो खोलकर, सभी वर्कफ़्लो को खुद आज़मा सकें. जब आप निर्देशों के मुताबिक काम करते हैं, तो आपको बाद में वर्कफ़्लो याद रहने की संभावना ज़्यादा होती है.

1. डेमो खोलें.

2. ज़रूरी नहीं: डेमो को किसी दूसरी विंडो पर ले जाएं. इस उदाहरण में, ट्यूटोरियल बाईं ओर और डेमो दाईं ओर है.

   

3. डेमो पर फ़ोकस करें. इसके बाद, DevTools खोलने के लिए Control+Shift+J या Command+Option+J (Mac) दबाएं. डिफ़ॉल्ट रूप से, DevTools डेमो के दाईं ओर खुलता है.

   

4. ज़रूरी नहीं: DevTools को विंडो के सबसे नीचे डॉक करें या उसे अलग विंडो में अनडॉक करें.

   डेमो के सबसे नीचे डॉक किए गए DevTools:

   DevTools को किसी अलग विंडो में अनडॉक किया गया है:

JavaScript से लॉग किए गए मैसेज देखना

आपको कंसोल में दिखने वाले ज़्यादातर मैसेज, वेब डेवलपर से मिलते हैं. ये डेवलपर, पेज की JavaScript लिखते हैं. इस सेक्शन का मकसद, आपको अलग-अलग तरह के मैसेज के बारे में बताना है. ये मैसेज आपको Console में दिख सकते हैं. साथ ही, इसमें यह भी बताया गया है कि अपने JavaScript से हर तरह के मैसेज को खुद कैसे लॉग किया जा सकता है.

1. डेमो में मौजूद, लॉग की जानकारी बटन पर क्लिक करें. Hello, Console! को कंसोल में लॉग किया जाता है.

   

2. Console में मौजूद Hello, Console! मैसेज के बगल में, log.js:2 पर क्लिक करें. सोर्स पैनल खुलता है. साथ ही, उस कोड को हाइलाइट करता है जिसकी वजह से मैसेज को कंसोल में लॉग किया गया था.

   

   यह मैसेज तब लॉग किया गया था, जब पेज की JavaScript ने console.log('Hello, Console!') को कॉल किया था.

3. इनमें से किसी एक वर्कफ़्लो का इस्तेमाल करके, Console पर वापस जाएं:

   • कंसोल टैब पर क्लिक करें.
   • Control+[ या Command+[ (Mac) को तब तक दबाकर रखें, जब तक Console पर फ़ोकस न हो जाए.
   • कमांड मेन्यू खोलें. इसके बाद, Console टाइप करना शुरू करें. फिर, Show Console Panel कमांड चुनें. इसके बाद, Enter दबाएं.

4. डेमो में मौजूद, Log Warning बटन पर क्लिक करें. Abandon Hope All Ye Who Enter को कंसोल में लॉग किया जाता है.

   

   इस तरह से फ़ॉर्मैट किए गए मैसेज, चेतावनियां होती हैं.

5. ज़रूरी नहीं: मैसेज को इस तरह फ़ॉर्मैट करने वाले कोड को देखने के लिए, log.js:12 पर क्लिक करें. इसके बाद, काम पूरा होने पर Console पर वापस जाएं. जब भी आपको वह कोड देखना हो जिसकी वजह से किसी मैसेज को खास तरीके से लॉग किया गया है, तब ऐसा करें.

6. Abandon Hope All Ye Who Enter के बगल में मौजूद, बड़ा करें आइकॉन पर क्लिक करें. DevTools, कॉल तक पहुंचने वाले स्टैक ट्रेस को दिखाता है.

   

   स्टैक ट्रेस से पता चलता है कि logWarning नाम के फ़ंक्शन को कॉल किया गया था. इसके बाद, quoteDante नाम के फ़ंक्शन को कॉल किया गया. दूसरे शब्दों में, सबसे पहले किया गया कॉल, स्टैक ट्रेस में सबसे नीचे होता है. console.trace() को कॉल करके, किसी भी समय स्टैक ट्रेस लॉग किए जा सकते हैं.

7. Log Error पर क्लिक करें. गड़बड़ी की जानकारी देने वाला यह मैसेज लॉग किया जाता है: I'm sorry, Dave. I'm afraid I can't do that.

   

8. लॉग टेबल पर क्लिक करें. मशहूर कलाकारों के बारे में जानकारी देने वाली टेबल को Console में लॉग किया जाता है.

   

   ध्यान दें कि birthday कॉलम में सिर्फ़ एक लाइन के लिए जानकारी भरी गई है. कोड की जांच करके पता लगाएं कि ऐसा क्यों हो रहा है.

9. लॉग ग्रुप पर क्लिक करें. अपराध से लड़ने वाले चार मशहूर कछुओं के नाम, Adolescent Irradiated Espionage Tortoises लेबल के तहत ग्रुप किए गए हैं.

   

10. Log Custom पर क्लिक करें. लाल बॉर्डर और नीले बैकग्राउंड वाला मैसेज, कंसोल में लॉग हो जाता है.

    

यहां मुख्य बात यह है कि जब आपको JavaScript से Console में मैसेज लॉग करने होते हैं, तब आपको console में से किसी एक तरीके का इस्तेमाल करना होता है. हर तरीके से मैसेज अलग-अलग फ़ॉर्मैट में दिखते हैं.

इस सेक्शन में बताए गए तरीकों के अलावा, और भी तरीके हैं. ट्यूटोरियल के आखिर में, आपको बाकी तरीकों के बारे में जानने का तरीका बताया जाएगा.

ब्राउज़र से लॉग किए गए मैसेज देखना

ब्राउज़र, मैसेज को कंसोल में भी लॉग करता है. आम तौर पर, ऐसा तब होता है, जब पेज में कोई समस्या हो.

1. 404 गड़बड़ी की वजह पर क्लिक करें. ब्राउज़र, 404 नेटवर्क की गड़बड़ी को लॉग करता है. ऐसा इसलिए होता है, क्योंकि पेज की JavaScript ने ऐसी फ़ाइल को फ़ेच करने की कोशिश की है जो मौजूद नहीं है.

   

2. गड़बड़ी की वजह पर क्लिक करें. ब्राउज़र, अनकैच किया गया TypeError लॉग करता है, क्योंकि JavaScript ऐसे DOM नोड को अपडेट करने की कोशिश कर रही है जो मौजूद नहीं है.

   

3. लॉग लेवल ड्रॉप-डाउन पर क्लिक करें. इसके बाद, अगर ज़्यादा जानकारी विकल्प बंद है, तो उसे चालू करें. अगले सेक्शन में, फ़िल्टर करने के बारे में ज़्यादा जानें. ऐसा करना इसलिए ज़रूरी है, ताकि यह पक्का किया जा सके कि लॉग किया गया अगला मैसेज दिखे. ध्यान दें: अगर डिफ़ॉल्ट लेवल वाला ड्रॉप-डाउन बंद है, तो आपको कंसोल साइडबार बंद करना पड़ सकता है. Console के साइडबार के बारे में ज़्यादा जानने के लिए, यहां दिए गए मैसेज सोर्स के हिसाब से फ़िल्टर करें.

   

4. उल्लंघन की वजह पर क्लिक करें. पेज कुछ सेकंड के लिए काम नहीं करता. इसके बाद, ब्राउज़र Console में [Violation] 'click' handler took 3000ms मैसेज लॉग करता है. इसमें लगने वाला समय अलग-अलग हो सकता है.

   

मैसेज फ़िल्टर करना

कुछ पेजों पर, आपको Console में कई मैसेज दिखेंगे. DevTools, ऐसे मैसेज को फ़िल्टर करने के कई तरीके उपलब्ध कराता है जो मौजूदा टास्क के लिए काम के नहीं हैं.

अहम जानकारी: Console सिर्फ़ आउटपुट मैसेज को फ़िल्टर करता है. Console में टाइप किए गए सभी इनपुट वहीं रहते हैं.

लॉग लेवल के हिसाब से फ़िल्टर करना

हर console.* तरीके को गंभीरता का एक लेवल असाइन किया जाता है: Verbose, Info, Warning या Error. उदाहरण के लिए, console.log() एक Info-लेवल का मैसेज है, जबकि console.error() एक Error-लेवल का मैसेज है.

ध्यान दें: console.* के तरीकों और उनके गंभीर होने के लेवल की पूरी सूची देखने के लिए, Console API का रेफ़रंस देखें.

लॉग लेवल के हिसाब से फ़िल्टर करने के लिए:

1. लॉग लेवल ड्रॉप-डाउन पर क्लिक करें और गड़बड़ियां को बंद करें. किसी लेवल के बगल में सही का निशान न होने पर, वह लेवल बंद हो जाता है. Error-लेवल के मैसेज दिखना बंद हो जाते हैं.

   

2. लॉग लेवल ड्रॉप-डाउन पर फिर से क्लिक करें और गड़बड़ियां को फिर से चालू करें. Error-लेवल के मैसेज फिर से दिखने लगते हैं.

अहम जानकारी: Console में, आपने जो ड्रॉप-डाउन फ़िल्टर लगाया है वह हमेशा याद रखा जाता है. यह कुकी, सभी पेजों के साथ-साथ पेज, DevTools, और Chrome को फिर से लोड करने पर भी बनी रहती है. अस्थायी फ़िल्टर को तुरंत लागू करने के लिए, साइडबार का इस्तेमाल करें.

टेक्स्ट के हिसाब से फ़िल्टर करना

अगर आपको सिर्फ़ वे मैसेज देखने हैं जिनमें कोई स्ट्रिंग मौजूद है, तो उस स्ट्रिंग को फ़िल्टर बॉक्स में टाइप करें.

1. फ़िल्टर करें बॉक्स में Dave टाइप करें. Dave स्ट्रिंग के बिना वाले सभी मैसेज छिपे हुए हैं.

   

2. फ़िल्टर बॉक्स से Dave को मिटाएं. सभी मैसेज फिर से दिखने लगते हैं.

रेगुलर एक्सप्रेशन के हिसाब से फ़िल्टर करना

जब आपको किसी खास स्ट्रिंग के बजाय, टेक्स्ट के पैटर्न वाले सभी मैसेज दिखाने हों, तो रेगुलर एक्सप्रेशन का इस्तेमाल करें.

1. फ़िल्टर करें बॉक्स में /^[AH]/ टाइप करें. इस पैटर्न को RegExr में टाइप करें. इससे आपको यह समझने में मदद मिलेगी कि यह पैटर्न क्या काम करता है.

   

2. फ़िल्टर बॉक्स से /^[AH]/ को मिटाएं. सभी मैसेज फिर से दिखने लगते हैं.

मैसेज के सोर्स के हिसाब से फ़िल्टर करना

अगर आपको सिर्फ़ किसी यूआरएल से मिले मैसेज देखने हैं, तो साइडबार का इस्तेमाल करें.

अहम जानकारी: साइडबार में मौजूद फ़िल्टर कुछ समय के लिए होते हैं. Console, इन फ़िल्टर को सभी पेजों के साथ-साथ पेज, DevTools, और Chrome को फिर से लोड करने पर भी सेव नहीं करती है.

1. कंसोल साइडबार दिखाएं पर क्लिक करें.

   

2. 12 Messages के बगल में मौजूद, बड़ा करें आइकॉन पर क्लिक करें. साइडबार में, उन यूआरएल की सूची दिखती है जिनकी वजह से मैसेज लॉग किए गए. उदाहरण के लिए, log.js की वजह से 11 मैसेज मिले.

   

उपयोगकर्ता के मैसेज के हिसाब से फ़िल्टर करना

पहले, Log Info पर क्लिक करने पर, Console में मैसेज लॉग करने के लिए console.log('Hello, Console!') नाम की स्क्रिप्ट कॉल की जाती थी. JavaScript से लॉग किए गए इस तरह के मैसेज को उपयोगकर्ता मैसेज कहा जाता है. इसके उलट, जब आपने 404 गड़बड़ी की वजह पर क्लिक किया, तो ब्राउज़र ने Error-लेवल का मैसेज लॉग किया. इसमें बताया गया है कि अनुरोध की गई संसाधन नहीं मिला. इस तरह के मैसेज को ब्राउज़र मैसेज माना जाता है. ब्राउज़र के मैसेज को फ़िल्टर करके सिर्फ़ उपयोगकर्ताओं के मैसेज दिखाने के लिए, साइडबार का इस्तेमाल किया जा सकता है.

1. 9 उपयोगकर्ता मैसेज पर क्लिक करें. ब्राउज़र के मैसेज छिपे हुए हैं.

   

2. सभी मैसेज फिर से दिखाने के लिए, 12 मैसेज पर क्लिक करें.

किसी अन्य पैनल के साथ कंसोल का इस्तेमाल करना

अगर आपको स्टाइल में बदलाव करना है, लेकिन आपको किसी चीज़ के लिए Console लॉग को तुरंत देखना है, तो क्या करें? ड्रॉर का इस्तेमाल करें.

1. तत्व टैब पर क्लिक करें.

2. Escape दबाएं. ड्रॉर का कंसोल टैब खुलता है. इसमें Console की वे सभी सुविधाएं हैं जिनका इस्तेमाल आपने इस ट्यूटोरियल में किया है.

   

अगले चरण

बधाई हो, आपने ट्यूटोरियल पूरा कर लिया है. अपनी ट्रॉफ़ी पाने के लिए, Dispense Trophy पर क्लिक करें.

• Console के यूज़र इंटरफ़ेस (यूआई) से जुड़ी ज़्यादा सुविधाओं और वर्कफ़्लो के बारे में जानने के लिए, Console का रेफ़रंस देखें.
• Console API के बारे में जानकारी देखें. इससे आपको console के उन सभी तरीकों के बारे में ज़्यादा जानने में मदद मिलेगी जिनके बारे में JavaScript से लॉग किए गए मैसेज देखना में बताया गया था. साथ ही, console के उन अन्य तरीकों के बारे में भी जानें जिनके बारे में इस ट्यूटोरियल में नहीं बताया गया था.
• DevTools की मदद से और क्या-क्या किया जा सकता है, यह जानने के लिए शुरू करें पर जाएं.
• console फ़ॉर्मैट और स्टाइलिंग के सभी तरीकों के बारे में ज़्यादा जानने के लिए, Console में मैसेज फ़ॉर्मैट और स्टाइल करना लेख पढ़ें.