কনসোলে ফরম্যাট এবং শৈলী বার্তা

Jecelyn Yeen

এই নির্দেশিকা আপনাকে দেখায় কিভাবে Chrome DevTools কনসোলে বার্তা ফরম্যাট এবং স্টাইল করতে হয়। কনসোলে কীভাবে বার্তাগুলি লগ করতে হয় তা শিখতে লগিং বার্তাগুলির সাথে শুরু করুন দেখুন৷

এই নির্দেশিকাটি অনুমান করে যে আপনি ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলি বোঝেন, যেমন একটি পৃষ্ঠায় ইন্টারঅ্যাক্টিভিটি যোগ করতে কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করতে হয়।

কনসোল বার্তা ফরম্যাট করুন

আপনি কনসোল বার্তা ফরম্যাট করতে বিন্যাস নির্দিষ্টকরণ ব্যবহার করতে পারেন।

ফর্ম্যাট স্পেসিফায়ারগুলি একটি শতাংশ অক্ষর (%) দিয়ে শুরু হয় এবং একটি "টাইপ অক্ষর" দিয়ে শেষ হয় যা ডেটার ধরন নির্দেশ করে (পূর্ণসংখ্যা, ফ্লোট, ইত্যাদি)।

যেমন,

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 (Not-A-Number) প্রদান করে।

শৈলী কনসোল বার্তা

DevTools-এ কনসোল মেসেজ স্টাইল করার দুটি উপায় আছে।

বিন্যাস স্পেসিফায়ার সহ শৈলী

আপনি CSS এর সাথে কনসোল মেসেজ স্টাইল করতে %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 এস্কেপ সিকোয়েন্স সহ স্টাইল

আপনি কনসোল বার্তা স্টাইল করতে ANSI এস্কেপ সিকোয়েন্স ব্যবহার করতে পারেন।

Node.js ডেভেলপারদের জন্য ANSI এস্কেপ সিকোয়েন্সের মাধ্যমে লগ বার্তাগুলিকে রঙিন করা সাধারণ, প্রায়শই চক , রং , ansi-colors , kleur এর মতো কিছু স্টাইলিং লাইব্রেরির সাহায্যে।

তবুও, আপনি কোনো লাইব্রেরি ব্যবহার না করে ANSI এস্কেপ সিকোয়েন্স দিয়ে বার্তাটি স্টাইল করতে পারেন। এখানে সিনট্যাক্স আছে:

\x1B[𝘗1;…;𝘗nm

কোথায়,

• 𝘗1 থেকে 𝘗n হল SGR (সিলেক্ট গ্রাফিক রেন্ডিশন) প্যারামিটারের বৈধ অনুসৃতি।
• 𝘗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. উপরের কমান্ডটি 3টি ভিন্ন শৈলী সহ একটি Hello World বার্তা তৈরি করে।

Jecelyn Yeen

এই নির্দেশিকা আপনাকে দেখায় কিভাবে Chrome DevTools কনসোলে বার্তা ফরম্যাট এবং স্টাইল করতে হয়। কনসোলে কীভাবে বার্তাগুলি লগ করতে হয় তা শিখতে লগিং বার্তাগুলির সাথে শুরু করুন দেখুন৷

এই নির্দেশিকাটি অনুমান করে যে আপনি ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলি বোঝেন, যেমন একটি পৃষ্ঠায় ইন্টারঅ্যাক্টিভিটি যোগ করতে কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করতে হয়।

কনসোল বার্তা ফরম্যাট করুন

আপনি কনসোল বার্তা ফরম্যাট করতে বিন্যাস নির্দিষ্টকরণ ব্যবহার করতে পারেন।

ফর্ম্যাট স্পেসিফায়ারগুলি একটি শতাংশ অক্ষর (%) দিয়ে শুরু হয় এবং একটি "টাইপ অক্ষর" দিয়ে শেষ হয় যা ডেটার ধরন নির্দেশ করে (পূর্ণসংখ্যা, ফ্লোট, ইত্যাদি)।

যেমন,

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 (Not-A-Number) প্রদান করে।

শৈলী কনসোল বার্তা

DevTools-এ কনসোল মেসেজ স্টাইল করার দুটি উপায় আছে।

বিন্যাস স্পেসিফায়ার সহ শৈলী

আপনি CSS এর সাথে কনসোল মেসেজ স্টাইল করতে %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 এস্কেপ সিকোয়েন্স সহ স্টাইল

আপনি কনসোল বার্তা স্টাইল করতে ANSI এস্কেপ সিকোয়েন্স ব্যবহার করতে পারেন।

Node.js ডেভেলপারদের জন্য ANSI এস্কেপ সিকোয়েন্সের মাধ্যমে লগ বার্তাগুলিকে রঙিন করা সাধারণ, প্রায়শই চক , রং , ansi-colors , kleur এর মতো কিছু স্টাইলিং লাইব্রেরির সাহায্যে।

তবুও, আপনি কোনো লাইব্রেরি ব্যবহার না করে ANSI এস্কেপ সিকোয়েন্স দিয়ে বার্তাটি স্টাইল করতে পারেন। এখানে সিনট্যাক্স আছে:

\x1B[𝘗1;…;𝘗nm

কোথায়,

• 𝘗1 থেকে 𝘗n হল SGR (সিলেক্ট গ্রাফিক রেন্ডিশন) প্যারামিটারের বৈধ অনুসৃতি।
• 𝘗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. উপরের কমান্ডটি 3টি ভিন্ন শৈলী সহ একটি Hello World বার্তা তৈরি করে।