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

कायस बैस्क

Twitter GitHub Glitch

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

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

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

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

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

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

   

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

   

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

   DevTools को डेमो में सबसे नीचे डॉक किया गया है:

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

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

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

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

   

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

   

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

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

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

4. डेमो में, लॉग चेतावनी बटन पर क्लिक करें. Abandon Hope All Ye Who Enter कंसोल में लॉग इन हो जाता है.

   

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

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

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

   

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

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

   

8. टेबल को लॉग करें पर क्लिक करें. मशहूर कलाकारों की टेबल, कंसोल में लॉग की जाती है.

   

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

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

   

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

    

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

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

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

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

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

   

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

   

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

   

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

   

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

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

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

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

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

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

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

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

   

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

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

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

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

1. फ़िल्टर टेक्स्ट बॉक्स में Dave टाइप करें. Dave स्ट्रिंग को शामिल नहीं करने वाले सभी मैसेज छिपा दिए जाते हैं. आपको Adolescent Irradiated Espionage Tortoises लेबल भी दिख सकता है. यह एक गड़बड़ी है.

   

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

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

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

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

   

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

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

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

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

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

   

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

   

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

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

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

   

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

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

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

1. एलिमेंट टैब पर क्लिक करें.

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

   

अगले चरण

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

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