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

Jecelyn Yeen

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

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

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

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

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

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

1. कंसोल खोलना

2. कंसोल में यह निर्देश डालें.

   const tools = 'Chrome DevTools';
   console.warn('%s is awesome.', tools);
   

3. ऊपर दिए गए कमांड से Chrome DevTools is awesome. मैसेज मिलता है.

फ़िलहाल, Chrome DevTools में फ़ॉर्मैट के लिए इस्तेमाल होने वाले टेंप्लेट की सूची यहां दी गई है.

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

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

1. कंसोल में यह निर्देश डालें.

   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. कंसोल में यह निर्देश डालें.

   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. कंसोल में यह निर्देश डालें.

   console.log('Jane has %i kiwis.', 'two');
   

2. ऊपर दिए गए कमांड से Jane has NaN kiwis. मैसेज मिलता है.

3. %i से पता चलता है कि वैल्यू को पूर्णांक में बदला जाना चाहिए/बदल दिया जाएगा, लेकिन आर्ग्युमेंट एक स्ट्रिंग है. इसलिए, यह NaN (नॉट-अ-नंबर) दिखाता है.

कंसोल मैसेज की स्टाइल तय करना

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

फ़ॉर्मैट के लिए इस्तेमाल होने वाले निर्देश के साथ स्टाइल

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

1. कंसोल में यह निर्देश डालें.

   const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
   console.log("%cHooray", style);
   

2. ऊपर दिए गए कमांड से, सीएसएस स्टाइल लागू होने के बाद Hooray दिखता है.

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

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

Node.js डेवलपर, आम तौर पर ANSI एस्केप सीक्वेंस की मदद से लॉग मैसेज को रंग देते हैं. इसके लिए, वे chalk, colors, ansi-colors, kleur जैसी स्टाइलिंग लाइब्रेरी का इस्तेमाल करते हैं.

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

\x1B[𝘗1;…;𝘗nm

जहां,

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

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

1. कंसोल में यह निर्देश डालें.

   console.log('\x1B[41;93;4mHello\x1B[m');
   

2. ऊपर दिए गए निर्देश से, Hello मैसेज का बैकग्राउंड लाल, टेक्स्ट पीला, और टेक्स्ट अंडरलाइन किया गया है.

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

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

यहां एक और ज़्यादा मुश्किल उदाहरण दिया गया है, जिसमें कई स्टाइलिंग हैं.

1. कंसोल में यह निर्देश डालें.

   const hello = '\x1B[41;93;4mHello';
   const space = '\x1B[m ';
   const world = '\x1B[34;102;9mWorld';
   
   console.log(hello + space + world);
   

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