कंसोल में मैसेज को फ़ॉर्मैट करना और उनके स्टाइल में बदलाव करना

Jecelyn Yeen

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

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

कंसोल के मैसेज को फ़ॉर्मैट करना

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

फ़ॉर्मैट की खास जानकारी देने वाले टूल, प्रतिशत वर्ण (%) से शुरू होते हैं और "टाइप वर्ण" पर खत्म होते हैं. यह डेटा टाइप (पूर्णांक, फ़्लोट वगैरह) के बारे में बताता है.

उदाहरण के लिए,

1. कंसोल खोलें
2. कंसोल के लिए यह निर्देश डालें. js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
3. ऊपर दिए गए निर्देश से Chrome DevTools is awesome. मैसेज जनरेट होगा.

फ़िलहाल, Chrome DevTools के लिए फ़ॉर्मैट की खास जानकारी देने वाले टूल की सूची दी गई है.

एक से ज़्यादा फ़ॉर्मैट की खास जानकारी देने वाले टूल लागू करना

आप एक मैसेज में एक से ज़्यादा फ़ॉर्मैट स्पेसिफ़िकेशन का इस्तेमाल कर सकते हैं.

1. कंसोल के लिए यह निर्देश डालें. js console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
2. ऊपर दिए गए निर्देश से The total weight of 3 apples and 2 oranges is 432.4 grams. मैसेज जनरेट होगा.

टाइप कन्वर्ज़न के बारे में जानकारी

आउटपुट मैसेज को फ़ॉर्मैट की जानकारी देने वाले के हिसाब से बदल दिया जाएगा.

1. कंसोल के लिए यह निर्देश डालें. js console.log('I have %i apples and %d oranges.', 2, 3.5);
2. ऊपर दिए गए निर्देश से I have 2 apples and 3 oranges. मैसेज जनरेट होगा.
3. 3.5 oranges को लॉग करने के बजाय, आउटपुट 3 oranges मिलता है. %d से पता चलता है कि वैल्यू को पूर्णांक में बदला जाना चाहिए/उसमें बदला जाएगा.

यहां एक उदाहरण से बताया गया है कि अगर कन्वर्ज़न टाइप अमान्य है, तो क्या होता है.

1. कंसोल के लिए यह निर्देश डालें. js console.log('Jane has %i kiwis.', 'two');
2. ऊपर दिए गए निर्देश से Jane has NaN kiwis. मैसेज जनरेट होगा.
3. %i बताता है कि वैल्यू को पूर्णांक में बदला जाना चाहिए या पूर्णांक में बदला जाएगा, लेकिन आर्ग्युमेंट एक स्ट्रिंग है. इस तरह यह NaN (Not-A-Number) वैल्यू दिखाता है.

कंसोल के मैसेज की स्टाइल

DevTools में कंसोल मैसेज को स्टाइल करने के दो तरीके हैं.

फ़ॉर्मैट की खास जानकारी देने वाले टूल की मदद से स्टाइल

सीएसएस की मदद से कंसोल मैसेज की स्टाइल तय करने के लिए, %c फ़ॉर्मैट की खास जानकारी देने वाली सुविधा का इस्तेमाल किया जा सकता है.

1. कंसोल के लिए यह निर्देश डालें. js const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
2. ऊपर दिए गए निर्देश से, सीएसएस स्टाइल लागू करके Hooray जनरेट होता है.

एएनएसआई एस्केप सीक्वेंस की मदद से स्टाइल करना

कंसोल मैसेज को स्टाइल करने के लिए, एएनएसआई एस्केप सीक्वेंस का इस्तेमाल किया जा सकता है.

आम तौर पर, Node.js डेवलपर एएनएसआई एस्केप सीक्वेंस के ज़रिए लॉग मैसेज को कलराइज़ करते हैं. इसके लिए, अक्सर चॉक, कलर, एंसी-कलर, और क्लूर जैसी स्टाइलिंग लाइब्रेरी की मदद ली जाती है.

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

\x1B[𝘗1;…;𝘗nm

कहां,

• 𝘗1 से 𝘗n तक, एसजीआर (ग्राफ़िक रेंडिशन चुनें) पैरामीटर के मान्य बाद के क्रम में होते हैं.
• 𝘗1 से 𝘗n तक के किसी भी पैरामीटर को छोड़ा जा सकता है. ऐसा करने पर, इसकी वैल्यू शून्य मान ली जाती है.
• \x1B[m, \x1B[0m का शॉर्टहैंड है. इसमें डिसप्ले एट्रिब्यूट को रीसेट किया जाएगा.

उदाहरण के लिए,

1. कंसोल के लिए यह निर्देश डालें. js console.log('\x1B[41;93;4mHello\x1B[m');
2. ऊपर दिए गए निर्देश से, लाल बैकग्राउंड, पीले रंग के टेक्स्ट, और अंडरलाइन के साथ Hello मैसेज दिखेगा.

DevTools में इस्तेमाल किए जा सकने वाले कलर कोड की सूची यहां दी गई है.

DevTools में इस्तेमाल किए जा सकने वाले स्टाइलिंग कोड की सूची यहां दी गई है.

यहां एक से ज़्यादा स्टाइलिंग वाला एक और जटिल उदाहरण दिया गया है.

1. कंसोल का यह कमांड डालें. ```js const hello = '\x1B[41;93;4mhello'; कॉन्सट स्पेस = '\x1B[m '; कॉन्सट वर्ल्ड = '\x1B[34;102;9mWorld';

   console.log(नमस्ते + स्पेस + दुनिया); ```

2. ऊपर दिए गए निर्देश से, तीन अलग-अलग स्टाइल वाला Hello World मैसेज जनरेट होता है.