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

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

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

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

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

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

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

  1. कंसोल खोलें
  2. कंसोल का यह कमांड डालें.

    const tools = 'Chrome DevTools';
    console.warn('%s is awesome.', tools);
    
  3. ऊपर दिए गए निर्देश से Chrome DevTools is awesome. मैसेज जनरेट होगा. फ़ॉर्मैट स्ट्रिंग की वैल्यू

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

खास जानकारी देने वाला आउटपुट
%s वैल्यू को स्ट्रिंग के तौर पर फ़ॉर्मैट करता है
%i या %d वैल्यू को पूर्णांक के तौर पर फ़ॉर्मैट करता है
%f वैल्यू को फ़्लोटिंग पॉइंट वैल्यू के तौर पर फ़ॉर्मैट करता है
%o वैल्यू को बड़े किए जा सकने वाले डीओएम एलिमेंट के तौर पर फ़ॉर्मैट करता है
%O वैल्यू को बड़े किए जा सकने वाले JavaScript ऑब्जेक्ट के तौर पर फ़ॉर्मैट करता है
%c दूसरे पैरामीटर के ज़रिए तय की गई आउटपुट स्ट्रिंग पर सीएसएस शैली के नियम लागू करता है

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

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

  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. मैसेज जनरेट होगा. कंसोल में NaN मैसेज

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

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

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 जनरेट करता है. सीएसएस के साथ स्टाइल आउटपुट

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

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

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

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

\x1B[𝘗1;…;𝘗nm

कहां,

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

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

  1. कंसोल का यह कमांड डालें.

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

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

फ़ोरग्राउंड बैकग्राउंड हल्के रंग वाली थीम गहरे रंग वाली थीम
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

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

पैरामीटर मतलब
0 डिसप्ले के सभी एट्रिब्यूट को रीसेट करें
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 underline को text-decoration प्रॉपर्टी में जोड़ें
9 line-through को text-decoration प्रॉपर्टी में जोड़ें
22 font-weight प्रॉपर्टी को रीसेट करें
23 font-style प्रॉपर्टी को रीसेट करें
24 underline को text-decoration प्रॉपर्टी से हटाएं
29 text-decoration प्रॉपर्टी से line-through हटाएं
38;2;आर;जी;बी color: rgb(𝑅,𝐺,𝐵)
39 color property को रीसेट करें
48;2;आर;जी;बी background: rgb(𝑅,𝐺,𝐵)
49 background property को रीसेट करें
53 overline को text-decoration प्रॉपर्टी में जोड़ें
55 text-decoration प्रॉपर्टी से overline हटाएं

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

  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 मैसेज तैयार होता है. नमस्कार दुनिया