কনসোলে বার্তা লগ করুন

Kayce Basques

এই ইন্টারেক্টিভ টিউটোরিয়ালটি আপনাকে দেখাবে কিভাবে ক্রোম ডেভটুলস কনসোলে মেসেজ লগ ও ফিল্টার করতে হয়।

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

ডেমো এবং ডেভটুলস সেট আপ করুন

এই টিউটোরিয়ালটি এমনভাবে তৈরি করা হয়েছে যাতে আপনি ডেমোটি খুলে সমস্ত ওয়ার্কফ্লো নিজে চেষ্টা করে দেখতে পারেন। যখন আপনি হাতে-কলমে অনুসরণ করবেন, তখন পরবর্তীতে ওয়ার্কফ্লোগুলো মনে রাখার সম্ভাবনা বেশি থাকবে।

1. ডেমোটি খুলুন।

2. ঐচ্ছিক: ডেমোটি একটি আলাদা উইন্ডোতে সরিয়ে নিন। এই উদাহরণে, টিউটোরিয়ালটি বাম দিকে এবং ডেমোটি ডান দিকে রয়েছে।

   

3. ডেমোটির উপর ফোকাস করুন এবং তারপরে DevTools খোলার জন্য Control + Shift + J অথবা Command + Option + J (Mac) চাপুন। ডিফল্টরূপে DevTools ডেমোটির ডানদিকে খোলে।

   

4. ঐচ্ছিক: DevTools-কে উইন্ডোর নিচে ডক করুন অথবা এটিকে একটি আলাদা উইন্ডোতে আনডক করুন ।

   ডেভটুলস ডেমোর নীচে ডক করা আছে:

   DevTools একটি আলাদা উইন্ডোতে আনডক করা হয়েছে:

জাভাস্ক্রিপ্ট থেকে লগ করা বার্তাগুলি দেখুন

আপনি কনসোলে যে বার্তাগুলো দেখেন, তার বেশিরভাগই আসে সেইসব ওয়েব ডেভেলপারদের কাছ থেকে, যারা পেজটির জাভাস্ক্রিপ্ট লিখেছেন। এই অংশের উদ্দেশ্য হলো, কনসোলে আপনি যেসব বিভিন্ন ধরনের বার্তা দেখতে পারেন, সেগুলোর সাথে আপনাকে পরিচয় করিয়ে দেওয়া এবং আপনার নিজের জাভাস্ক্রিপ্ট থেকে কীভাবে প্রতিটি ধরনের বার্তা লগ করতে পারেন, তা ব্যাখ্যা করা।

1. ডেমোতে থাকা লগ ইনফো বাটনটিতে ক্লিক করুন। Hello, Console! বার্তাটি কনসোলে লগ হয়ে যাবে।

   

2. কনসোলে থাকা Hello, Console! মেসেজটির পাশে log.js:2-এ ক্লিক করুন। এতে সোর্সেস প্যানেলটি খুলবে এবং যে কোড লাইনের কারণে মেসেজটি কনসোলে লগ হয়েছিল, সেটি হাইলাইট করবে।

   

   যখন পেজটির জাভাস্ক্রিপ্ট ` console.log('Hello, Console!') কল করে, তখন মেসেজটি লগ করা হয়েছিল।

3. নিম্নলিখিত ওয়ার্কফ্লোগুলির যেকোনো একটি ব্যবহার করে কনসোলে ফিরে যান:

   • কনসোল ট্যাবে ক্লিক করুন।
   • কনসোল ফোকাসে না আসা পর্যন্ত Control + [ অথবা Command + [ (Mac) চাপুন।
   • কমান্ড মেনু খুলুন , Console টাইপ করা শুরু করুন, Show Console Panel কমান্ডটি নির্বাচন করুন এবং তারপরে এন্টার চাপুন।

4. ডেমোতে থাকা 'লগ ওয়ার্নিং' বাটনটিতে ক্লিক করুন। Abandon Hope All Ye Who Enter কনসোলে লগ হয়ে যাবে।

   

   এইভাবে বিন্যাস করা বার্তাগুলো সতর্কবার্তা।

5. ঐচ্ছিক: যে কোডের কারণে বার্তাটি এইভাবে ফরম্যাট হয়েছে তা দেখতে log.js:12-এ ক্লিক করুন এবং কাজ শেষ হলে কনসোলে ফিরে যান। যখনই আপনি কোনো বার্তা একটি নির্দিষ্ট উপায়ে লগ হওয়ার পেছনের কোড দেখতে চান, তখনই এটি করুন।

6. এক্সপ্যান্ড- এ ক্লিক করুন Abandon Hope All Ye Who Enter এর সামনে থাকা আইকন। DevTools কলটির পূর্ববর্তী স্ট্যাক ট্রেস দেখায়।

   

   স্ট্যাক ট্রেস আপনাকে বলছে যে logWarning নামের একটি ফাংশন কল করা হয়েছিল, যা আবার quoteDante নামের একটি ফাংশনকে কল করেছে। অন্য কথায়, যে কলটি প্রথমে হয়েছিল সেটি স্ট্যাক ট্রেসের একেবারে নিচে রয়েছে। আপনি যেকোনো সময় console.trace() কল করে স্ট্যাক ট্রেস লগ করতে পারেন।

7. 'লগ এরর'-এ ক্লিক করুন। নিম্নলিখিত ত্রুটি বার্তাটি লগ হয়: I'm sorry, Dave. I'm afraid I can't do that.

   

8. লগ টেবিলে ক্লিক করুন। বিখ্যাত শিল্পীদের সম্পর্কে একটি টেবিল কনসোলে লগ হয়ে যাবে।

   

   লক্ষ্য করুন, birthday কলামটি শুধুমাত্র একটি সারির জন্য পূরণ করা হয়েছে। এর কারণ জানতে কোডটি দেখুন।

9. লগ গ্রুপে ক্লিক করুন। ৪টি বিখ্যাত, অপরাধ-দমনকারী কচ্ছপের নাম Adolescent Irradiated Espionage Tortoises লেবেলের অধীনে গোষ্ঠীভুক্ত করা হয়েছে।

   

10. লগ কাস্টম-এ ক্লিক করুন। লাল বর্ডার এবং নীল ব্যাকগ্রাউন্ড সহ একটি বার্তা কনসোলে লগ হয়।

    

এখানকার মূল ধারণাটি হলো, যখন আপনি আপনার জাভাস্ক্রিপ্ট থেকে কনসোলে বার্তা লগ করতে চান, তখন আপনি console মেথডগুলোর মধ্যে একটি ব্যবহার করেন। প্রতিটি মেথড ভিন্ন ভিন্ন উপায়ে বার্তা ফরম্যাট করে।

এই অংশে যা দেখানো হয়েছে তার চেয়েও আরও অনেক পদ্ধতি রয়েছে। টিউটোরিয়ালের শেষে আপনি বাকি পদ্ধতিগুলো কীভাবে অন্বেষণ করতে হয় তা শিখবেন।

ব্রাউজার দ্বারা লগ করা বার্তাগুলি দেখুন

ব্রাউজারটি কনসোলেও বার্তা লগ করে। সাধারণত পেজটিতে কোনো সমস্যা হলে এমনটা ঘটে।

1. ‘Cause 404’- এ ক্লিক করুন। ব্রাউজার একটি 404 নেটওয়ার্ক ত্রুটি লগ করে, কারণ পেজটির জাভাস্ক্রিপ্ট এমন একটি ফাইল আনার চেষ্টা করেছিল যা বিদ্যমান নেই।

   

2. 'Cause Error'- এ ক্লিক করুন। ব্রাউজার একটি আনক্যাচড TypeError লগ করে, কারণ জাভাস্ক্রিপ্ট এমন একটি DOM নোড আপডেট করার চেষ্টা করছে যার অস্তিত্ব নেই।

   

3. লগ লেভেলস ড্রপ-ডাউনে ক্লিক করুন এবং ভার্বোস অপশনটি নিষ্ক্রিয় থাকলে তা সক্রিয় করুন। পরবর্তী বিভাগে আপনি ফিল্টারিং সম্পর্কে আরও জানতে পারবেন। আপনার লগ করা পরবর্তী বার্তাটি যেন দেখা যায়, তা নিশ্চিত করার জন্য আপনাকে এটি করতে হবে। দ্রষ্টব্য: যদি ডিফল্ট লেভেলস ড্রপ-ডাউনটি নিষ্ক্রিয় থাকে, তাহলে আপনাকে কনসোল সাইডবারটি বন্ধ করতে হতে পারে। কনসোল সাইডবার সম্পর্কে আরও তথ্যের জন্য নিচে মেসেজ সোর্স অনুযায়ী ফিল্টার করুন।

   

4. ক্লিক করলে লঙ্ঘন (Cause Violation) ঘটে । পৃষ্ঠাটি কয়েক সেকেন্ডের জন্য প্রতিক্রিয়াহীন হয়ে পড়ে এবং তারপরে ব্রাউজার কনসোলে [Violation] 'click' handler took 3000ms বার্তাটি লগ করে। সঠিক সময়কাল ভিন্ন হতে পারে।

   

বার্তা ফিল্টার করুন

কিছু পেজে আপনি দেখবেন কনসোল মেসেজে ভরে যায়। ডেভটুলস এমন অনেক উপায় দেয় যার মাধ্যমে চলমান কাজের সাথে অপ্রাসঙ্গিক মেসেজগুলো ফিল্টার করে বাদ দেওয়া যায়।

মূল বিষয়: কনসোল শুধুমাত্র আউটপুট বার্তাগুলো ফিল্টার করে, আপনার টাইপ করা সমস্ত ইনপুট সেখানেই থেকে যায়।

লগ স্তর অনুসারে ফিল্টার করুন

প্রতিটি console.* মেথডকে একটি তীব্রতার স্তর (severity level) নির্ধারণ করে দেওয়া হয়: Verbose , Info , Warning , বা Error । উদাহরণস্বরূপ, console.log() হলো একটি Info স্তরের বার্তা, অপরদিকে console.error() হলো একটি Error স্তরের বার্তা।

দ্রষ্টব্য: console.* মেথডসমূহ এবং তাদের তীব্রতার স্তরগুলির সম্পূর্ণ তালিকার জন্য, কনসোল এপিআই রেফারেন্স দেখুন।

লগ লেভেল অনুযায়ী ফিল্টার করতে:

1. লগ লেভেলস ড্রপ-ডাউনে ক্লিক করুন এবং এররস (Errors) নিষ্ক্রিয় করুন। কোনো লেভেলের পাশে যখন আর কোনো চেকমার্ক থাকে না, তখন সেটি নিষ্ক্রিয় হয়ে যায়। Error -লেভেলের বার্তাগুলো অদৃশ্য হয়ে যায়।

   

2. আবার লগ লেভেলস ড্রপ-ডাউনটিতে ক্লিক করুন এবং এররস পুনরায় সক্রিয় করুন। Error -লেভেলের বার্তাগুলো আবার প্রদর্শিত হবে।

গুরুত্বপূর্ণ বিষয়: কনসোল আপনার প্রয়োগ করা ড্রপ-ডাউন ফিল্টারটি সর্বদা মনে রাখে। এটি সমস্ত পৃষ্ঠা জুড়ে, এমনকি পৃষ্ঠা, ডেভটুলস এবং ক্রোম রিলোডের পরেও অপরিবর্তিত থাকে। দ্রুত একটি অস্থায়ী ফিল্টার প্রয়োগ করতে, সাইডবার ব্যবহার করুন।

টেক্সট দ্বারা ফিল্টার করুন

আপনি যখন শুধুমাত্র একটি নির্দিষ্ট স্ট্রিং অন্তর্ভুক্ত বার্তাগুলি দেখতে চান, তখন সেই স্ট্রিংটি ফিল্টার বক্সে টাইপ করুন।

1. ফিল্টার বক্সে Dave টাইপ করুন। যেসব মেসেজে Dave শব্দটি নেই, সেগুলো লুকানো থাকবে।

   

2. ফিল্টার বক্স থেকে Dave মুছে দিন। সব বার্তা আবার দেখা যাবে।

রেগুলার এক্সপ্রেশন দ্বারা ফিল্টার করুন

যখন আপনি কোনো নির্দিষ্ট স্ট্রিং-এর পরিবর্তে টেক্সটের একটি প্যাটার্ন অন্তর্ভুক্ত সমস্ত মেসেজ দেখাতে চান, তখন রেগুলার এক্সপ্রেশন ব্যবহার করুন।

1. ফিল্টার বক্সে /^[AH]/ টাইপ করুন। এটি কী করছে তার ব্যাখ্যা পেতে RegExr- এ এই প্যাটার্নটি টাইপ করুন।

   

2. ফিল্টার বক্স থেকে /^[AH]/ মুছে ফেলুন। সব বার্তা আবার দেখা যাবে।

বার্তার উৎস অনুযায়ী ফিল্টার করুন

আপনি যখন শুধুমাত্র একটি নির্দিষ্ট ইউআরএল থেকে আসা বার্তাগুলো দেখতে চান, তখন সাইডবার ব্যবহার করুন।

গুরুত্বপূর্ণ বিষয়: সাইডবার ফিল্টারগুলো অস্থায়ী। কনসোল এই ধরনের ফিল্টারগুলোকে সমস্ত পেজে, সেইসাথে পেজ, ডেভটুলস এবং ক্রোম রিলোডের ক্ষেত্রে ধরে রাখে না।

1. কনসোল সাইডবার দেখান -এ ক্লিক করুন .

   

2. এক্সপ্যান্ড- এ ক্লিক করুন ১২টি বার্তার পাশে থাকা আইকন। সাইডবারে সেইসব ইউআরএল-এর একটি তালিকা দেখানো হয়, যেগুলোর কারণে বার্তাগুলো লগ হয়েছে। উদাহরণস্বরূপ, log.js কারণে ১১টি বার্তা এসেছে।

   

ব্যবহারকারীর বার্তা দ্বারা ফিল্টার করুন

আগে, আপনি যখন 'লগ ইনফো' (Log Info)-তে ক্লিক করতেন, তখন কনসোলে বার্তাটি লগ করার জন্য console.log('Hello, Console!') নামের একটি স্ক্রিপ্ট চলত। জাভাস্ক্রিপ্ট থেকে এভাবে লগ করা বার্তাগুলোকে ইউজার মেসেজ (user messages ) বলা হয়। এর বিপরীতে, আপনি যখন `কজ ৪০৪' (Cause 404) -এ ক্লিক করতেন, তখন ব্রাউজারটি একটি Error -level) বার্তা লগ করত, যেখানে বলা থাকত যে অনুরোধ করা রিসোর্সটি খুঁজে পাওয়া যায়নি। এই ধরনের বার্তাগুলোকে ব্রাউজার মেসেজ (browser messages) হিসেবে গণ্য করা হয়। আপনি সাইডবার ব্যবহার করে ব্রাউজার মেসেজগুলো ফিল্টার করে বাদ দিতে এবং শুধুমাত্র ইউজার মেসেজগুলো দেখাতে পারেন।

1. ৯টি ব্যবহারকারীর বার্তায় ক্লিক করুন। ব্রাউজারের বার্তাগুলো লুকানো থাকবে।

   

2. সবগুলো বার্তা পুনরায় দেখতে ১২টি বার্তায় ক্লিক করুন।

কনসোলটি অন্য যেকোনো প্যানেলের পাশাপাশি ব্যবহার করুন।

ধরুন আপনি স্টাইল এডিট করছেন, কিন্তু কোনো কিছুর জন্য দ্রুত কনসোল লগ চেক করার প্রয়োজন হলো। সেক্ষেত্রে ড্রয়ার ব্যবহার করুন।

1. এলিমেন্টস ট্যাবে ক্লিক করুন।

2. Escape চাপুন। ড্রয়ারের কনসোল ট্যাবটি খুলবে। এই টিউটোরিয়াল জুড়ে আপনি কনসোলের যে সমস্ত বৈশিষ্ট্য ব্যবহার করে আসছেন, তার সবই এতে রয়েছে।

   

পরবর্তী পদক্ষেপ

অভিনন্দন, আপনি টিউটোরিয়ালটি সম্পন্ন করেছেন। আপনার ট্রফিটি গ্রহণ করতে 'Dispense Trophy'-তে ক্লিক করুন।

• কনসোল UI সম্পর্কিত আরও বৈশিষ্ট্য এবং কার্যপ্রবাহ জানতে কনসোল রেফারেন্স দেখুন।
• "জাভাস্ক্রিপ্ট থেকে লগ করা বার্তাগুলি দেখুন" অংশে প্রদর্শিত সমস্ত console মেথড সম্পর্কে আরও জানতে কনসোল এপিআই রেফারেন্স দেখুন এবং এই টিউটোরিয়ালে অন্তর্ভুক্ত নয় এমন অন্যান্য console মেথডগুলিও অন্বেষণ করুন।
• DevTools দিয়ে আপনি আর কী কী করতে পারেন তা জানতে 'Get Started' দেখুন।
• কনসোলের সমস্ত ফরম্যাট এবং স্টাইলিং পদ্ধতি সম্পর্কে আরও জানতে console ফরম্যাট এবং স্টাইল বার্তাগুলি দেখুন।