इस गाइड में, Chrome DevTools कंसोल में मैसेज को फ़ॉर्मैट करने और उन्हें स्टाइल करने का तरीका बताया गया है. कंसोल में मैसेज लॉग करने का तरीका जानने के लिए, मैसेज लॉग करने की सुविधा का इस्तेमाल शुरू करना देखें.
इस गाइड में यह माना गया है कि आपको वेब डेवलपमेंट की बुनियादी बातें पता हैं. जैसे, किसी पेज पर इंटरैक्टिविटी जोड़ने के लिए JavaScript का इस्तेमाल कैसे करना है.
कंसोल मैसेज को फ़ॉर्मैट करना
कंसोल मैसेज को फ़ॉर्मैट करने के लिए, फ़ॉर्मैट की खास बातों का इस्तेमाल किया जा सकता है.
फ़ॉर्मैट के बारे में बताने वाले ब्यौरे, प्रतिशत वर्ण (%) से शुरू होते हैं और एक "टाइप वर्ण" से खत्म होते हैं, जो डेटा का टाइप (इंटीजर, फ़्लोट वगैरह) बताता है.
उदाहरण के लिए,
- कंसोल खोलें
- यह कंसोल कमांड डालें.
js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
- ऊपर दिए गए निर्देश से
Chrome DevTools is awesome.
मैसेज मिलता है.
फ़िलहाल, Chrome DevTools पर काम करने वाले फ़ॉर्मैट के बारे में खास जानकारी देने वालों की सूची यहां दी गई है.
जानकारी देने वाला | आउटपुट |
---|---|
%s |
वैल्यू को स्ट्रिंग के तौर पर फ़ॉर्मैट करता है |
%i या %d |
वैल्यू को पूर्णांक के तौर पर फ़ॉर्मैट करता है |
%f |
वैल्यू को फ़्लोटिंग पॉइंट वैल्यू के तौर पर फ़ॉर्मैट करता है |
%o |
वैल्यू को बड़ा किए जा सकने वाले DOM एलिमेंट के तौर पर फ़ॉर्मैट करता है |
%O |
वैल्यू को बड़ा किए जा सकने वाले JavaScript ऑब्जेक्ट के तौर पर फ़ॉर्मैट करता है |
%c |
दूसरे पैरामीटर के बताए गए तरीके से आउटपुट स्ट्रिंग पर, सीएसएस स्टाइल के नियम लागू करता है |
एक से ज़्यादा फ़ॉर्मैट तय करें
एक मैसेज में, फ़ॉर्मैट तय करने वाली एक से ज़्यादा सुविधाओं का इस्तेमाल किया जा सकता है.
- यह कंसोल कमांड डालें.
js console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
- ऊपर दिए गए निर्देश से
The total weight of 3 apples and 2 oranges is 432.4 grams.
मैसेज मिलता है.
टाइप कन्वर्ज़न के बारे में जानकारी
फ़ॉर्मैट के हिसाब से मैसेज को बदला जाएगा.
- यह कंसोल कमांड डालें.
js console.log('I have %i apples and %d oranges.', 2, 3.5);
- ऊपर दिए गए निर्देश से
I have 2 apples and 3 oranges.
मैसेज मिलता है. 3.5 oranges
को लॉग करने के बजाय, आउटपुट3 oranges
है.%d
से पता चलता है कि वैल्यू को पूर्णांक में बदलना चाहिए या इसमें बदलाव करना चाहिए.
यहां दिए गए उदाहरण में बताया गया है कि अमान्य टाइप कन्वर्ज़न होने पर क्या होता है.
- यह कंसोल कमांड डालें.
js console.log('Jane has %i kiwis.', 'two');
- ऊपर दिए गए निर्देश से
Jane has NaN kiwis.
मैसेज मिलता है. %i
से पता चलता है कि वैल्यू को पूर्णांक में बदलना चाहिए या उसे पूर्णांक में बदलना चाहिए, लेकिन आर्ग्युमेंट एक स्ट्रिंग है. इस तरह, यह NaN (Not-A-Number) दिखाता है.
स्टाइल कंसोल के मैसेज
DevTools में कंसोल मैसेज को स्टाइल देने के दो तरीके हैं.
फ़ॉर्मैट तय करने की सुविधा के साथ स्टाइल
सीएसएस की मदद से कंसोल मैसेज की स्टाइल बदलने के लिए, %c
फ़ॉर्मैट स्पेसिफ़िकेशन का इस्तेमाल किया जा सकता है.
- यह कंसोल कमांड डालें.
js const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
- ऊपर दिया गया निर्देश, लागू की गई सीएसएस स्टाइल के साथ
Hooray
बनाता है.
एएनएसआई एस्केप सीक्वेंस के साथ स्टाइल करें
कंसोल मैसेज को स्टाइल देने के लिए, एएनएसआई एस्केप सीक्वेंस का इस्तेमाल किया जा सकता है.
Node.js डेवलपर के लिए यह आम बात है कि वे एएनएसआई एस्केप सीक्वेंस की मदद से लॉग मैसेज को रंगीन बनाएं. इसके लिए, अक्सर चॉक, कलर, ansi-colors, kleur जैसी स्टाइलिंग लाइब्रेरी की मदद ली जाती है.
इसके बावजूद, किसी लाइब्रेरी का इस्तेमाल किए बिना, एएनएसआई एस्केप सीक्वेंस का इस्तेमाल करके मैसेज को स्टाइल दिया जा सकता है. इसका सिंटैक्स यहां दिया गया है:
\x1B[𝘗1;…;𝘗nm
कहां,
𝘗1
से𝘗n
तक, एसजीआर (ग्राफ़िक रैंडिशन चुनें) पैरामीटर के मान्य सबक्रम होते हैं.𝘗1
से𝘗n
के बीच के किसी भी पैरामीटर को शामिल नहीं किया जा सकता है. इस स्थिति में, इसकी वैल्यू को शून्य माना जाता है.\x1B[m
,\x1B[0m
के लिए शॉर्टहैंड है. इसमें, डिसप्ले एट्रिब्यूट को रीसेट किया जाएगा.
उदाहरण के लिए,
- यह कंसोल कमांड डालें.
js console.log('\x1B[41;93;4mHello\x1B[m');
- ऊपर दिए गए निर्देश से
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 | text-decoration प्रॉपर्टी में underline जोड़ें |
9 | text-decoration प्रॉपर्टी में line-through जोड़ें |
22 | font-weight प्रॉपर्टी को रीसेट करें |
23 | font-style प्रॉपर्टी को रीसेट करें |
24 | text-decoration प्रॉपर्टी से underline हटाएं |
29 | text-decoration प्रॉपर्टी से line-through हटाएं |
38;2;आर;G;B | color: rgb(𝑅,𝐺,𝐵) |
39 | color property रीसेट |
48;2;आर;जी;बी | background: rgb(𝑅,𝐺,𝐵) |
49 | background property रीसेट |
53 | text-decoration प्रॉपर्टी में overline जोड़ें |
55 | text-decoration प्रॉपर्टी से overline हटाएं |
यहां एक से ज़्यादा स्टाइल वाला एक और मुश्किल उदाहरण दिया गया है.
नीचे दिए गए कंसोल कमांड को डालें. ```js const hello = '\x1B[41;93;4mHello'; कॉन्स स्पेस = '\x1B[m '; const दुनिया = '\x1B[34;102;9mWorld';
console.log(hello + स्पेस + दुनिया); ```
ऊपर दिए गए निर्देश से
Hello World
मैसेज बनता है. इसमें तीन अलग-अलग स्टाइल होते हैं.