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

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

   

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

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

   • कंसोल टैब पर क्लिक करें.
   • जब तक Console फ़ोकस में न आ जाए, तब तक Control+[ या Command+[ (Mac) दबाएं.
   • Command मेन्यू खोलें, Console टाइप करें. इसके बाद, Console Panel दिखाएं कमांड चुनें और 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. लॉग लेवल ड्रॉप-डाउन पर क्लिक करें और अगर Verbose विकल्प बंद है, तो उसे चालू करें. अगले सेक्शन में, आपको फ़िल्टर करने के बारे में ज़्यादा जानकारी मिलेगी. ऐसा करना इसलिए ज़रूरी है, ताकि यह पक्का किया जा सके कि लॉग किया गया अगला मैसेज दिख रहा हो. ध्यान दें: अगर डिफ़ॉल्ट लेवल वाला ड्रॉप-डाउन बंद है, तो आपको कंसोल साइडबार बंद करना पड़ सकता है. कंसोल साइडबार के बारे में ज़्यादा जानकारी के लिए, नीचे दिए गए मैसेज के सोर्स के हिसाब से फ़िल्टर करें.

   

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

   

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

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

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

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

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

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

   

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

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

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

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

   

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

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

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

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

   

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

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

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

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

   

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

   

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

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

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

   

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

किसी भी दूसरे पैनल के साथ कंसोल का इस्तेमाल करना

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

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

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

   

अगले चरण

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

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