জাভাস্ক্রিপ্টে ডিবাগিং: ব্রাউজার কনসোলে লগিং

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

console.log () সম্ভবত কনসোল এপিআই -তে সবচেয়ে বেশি ব্যবহৃত পদ্ধতি, কিন্তু অন্যান্য পদ্ধতিও আছে যা আপনি আপনার কর্মপ্রবাহে ব্যবহার করতে পারেন। এই গাইডটি আপনাকে বিভিন্ন ওয়েব ব্রাউজার কনসোল পদ্ধতি দেখায় যা আপনি আপনার ডিবাগিং ওয়ার্কফ্লো উন্নত করতে ব্যবহার করতে পারেন।

---

---

লগিং কেন গুরুত্বপূর্ণ?

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

সম্পর্কিত: 6 জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কস শেখার যোগ্য

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

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

স্ট্রিং বার্তা লগিং

সবচেয়ে সাধারণ কনসোল পদ্ধতিগুলির মধ্যে একটি console.log () । এটি কেবল একটি স্ট্রিং বার্তা বা ওয়েব কনসোলের কিছু মান আউটপুট করে। সাধারণ মান বা স্ট্রিং বার্তার জন্য, console.log () পদ্ধতি সম্ভবত ব্যবহার করার জন্য সর্বোত্তম বিকল্প।

---

---

অ্যান্ড্রয়েডের জন্য টেক্সট টু স্পিচ অ্যাপস

আউটপুট ক ওহে বিশ্ব বার্তা, আপনি নিম্নলিখিত ব্যবহার করতে পারেন।

console.log(`Hello World`);

এর আরেকটি বিশেষ বৈশিষ্ট্য console.log () পদ্ধতি হল DOM উপাদানগুলির আউটপুট বা ওয়েবসাইটের একটি অংশের কাঠামো মুদ্রণ করার ক্ষমতা, উদাহরণস্বরূপ, শরীরের উপাদানটির গঠন এবং এর ভিতরের সবকিছু নিম্নলিখিতটি ব্যবহার করে।

---

---

console.log(document.body)

আউটপুট হল একটি এইচটিএমএল ট্রি হিসেবে DOM উপাদানের সংগ্রহ।

ইন্টারেক্টিভ জাভাস্ক্রিপ্ট অবজেক্ট লগ করা

দ্য console.dir () পদ্ধতিটি জাভাস্ক্রিপ্ট বস্তুর ইন্টারেক্টিভ বৈশিষ্ট্য লগ করার জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি এটি একটি ওয়েবপেজে DOM উপাদানগুলি দেখতে ব্যবহার করতে পারেন।

এর সাধারণ আউটপুট console.dir () পদ্ধতিটি JSON ফর্ম্যাটে নির্দিষ্ট জাভাস্ক্রিপ্ট অবজেক্টের সমস্ত বৈশিষ্ট্য নিয়ে গঠিত। এইচটিএমএল পৃষ্ঠার মূল অংশের সমস্ত উপাদানগুলির বৈশিষ্ট্যগুলি মুদ্রণ করতে নীচের পদ্ধতিটি ব্যবহার করুন:

console.dir(document.body)

অভিব্যক্তি মূল্যায়ন

আপনি ইউনিট টেস্টিং থেকে অ্যাসার্ট পদ্ধতির সাথে পরিচিত হতে পারেন - ভাল console.assert () পদ্ধতি একই পদ্ধতিতে কাজ করে। ব্যবহার console.assert () একটি অভিব্যক্তি বা অবস্থা মূল্যায়ন করার পদ্ধতি।

যখন দাবি পদ্ধতি ব্যর্থ হয়, কনসোল একটি ত্রুটি বার্তা প্রিন্ট করে; অন্যথায়, এটি কিছুই মুদ্রণ করে না। একজন ব্যক্তির বয়স 18 এর বেশি কিনা তা মূল্যায়ন করতে নীচের কোডটি ব্যবহার করুন:

let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';

console.assert( yourAge > ageLimit, assertFailMessage);

উপরের দাবি ব্যর্থ হয় এবং সেই অনুযায়ী একটি ত্রুটি বার্তা প্রিন্ট করে।

টেবিলে লগিং ডেটা

ব্যবহার console.table () একটি সারণী বিন্যাসে তথ্য প্রদর্শন করার পদ্ধতি। টেবিল ফর্মে প্রদর্শনের জন্য ভালো প্রার্থীদের মধ্যে রয়েছে অ্যারে বা অবজেক্ট ডেটা।

বিঃদ্রঃ : ফায়ারফক্সের মতো কিছু ব্রাউজারে সর্বোচ্চ 1000 সীমার সীমা আছে যা দিয়ে প্রদর্শিত হতে পারে console.table () পদ্ধতি

ধরুন আপনার গাড়ির বস্তুর নিম্নলিখিত অ্যারে আছে:

let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
]

আপনি নীচের পদ্ধতি ব্যবহার করে একটি টেবিলে উপরের অ্যারে প্রদর্শন করতে পারেন:

console.table(cars);

বিভাগ দ্বারা বার্তা লগ করা

ওয়েব ব্রাউজার কনসোল বার্তাগুলি প্রধানত তিনটি গ্রুপে বিভক্ত: ত্রুটি, সতর্কতা এবং তথ্য।

ত্রুটি

কনসোলে ত্রুটি বার্তাগুলি বিশেষভাবে মুদ্রণ করার জন্য console.error () পদ্ধতি, ত্রুটি-সংক্রান্ত বার্তাগুলি লাল হরফে প্রদর্শিত হয়।

console.error('error message');

সতর্কবাণী

সতর্কতা মুদ্রণ করতে, নিম্নলিখিতগুলি ব্যবহার করুন। বেশিরভাগ পরিস্থিতিতে যেমন, সতর্কতা বার্তা কমলাতে প্রদর্শিত হয়:

console.warn('warning message');

তথ্য

কনসোলে সাধারণ তথ্য মুদ্রণ করতে, console.info () পদ্ধতি:

console.info('general info message')

ব্রাউজার কনসোলে বার্তাগুলিকে যথাযথভাবে শ্রেণীবদ্ধ করা হলে ফিল্টার করা বা খুঁজে পাওয়া সহজ।

ট্রেসিং প্রোগ্রাম ফ্লো

ব্যবহার console.trace () প্রোগ্রাম প্রবাহ বা এক্সিকিউশনের স্ট্যাক ট্রেস প্রিন্ট করার পদ্ধতি। এটি ডিবাগিংয়ের জন্য একটি খুব দরকারী বৈশিষ্ট্য কারণ এটি আপনার প্রোগ্রামে যে ক্রমগুলি সম্পাদিত হয় সেই ক্রমটি প্রিন্ট করে।

দেখতে console.trace () কর্মের পদ্ধতি, আপনি তিনটি ফাংশন তৈরি করতে পারেন (নীচের অনুযায়ী) এবং একটি ফাংশনে একটি স্ট্যাক ট্রেস রাখতে পারেন।

function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}

আপনার ব্রাউজার কনসোলে, কল করুন বা ট্রিগার করুন functionOne () এবং আপনি লাস্ট ইন ফার্স্ট আউট অর্ডারে (LIFO) মুদ্রিত ফাংশন কলগুলির একটি স্ট্যাক ট্রেস পাবেন কারণ এটি একটি স্ট্যাক।

টাইমিং প্রোগ্রাম এক্সিকিউশন

আপনার প্রোগ্রামে একটি অপারেশন চালাতে কত সময় লাগে, আপনি এটি ব্যবহার করতে পারেন console.time () পদ্ধতি console.time () সাধারণত এর সাথে একসাথে ব্যবহৃত হয় console.timeEnd () পদ্ধতি যেখানে পরেরটি টাইমার শেষ করতে ব্যবহৃত হয়।

আপনার টাইমারগুলিকে সঠিকভাবে লেবেল করার গুরুত্ব তুলে ধরে আপনি প্রতি ওয়েবপেজে 10,000 টি পর্যন্ত টাইমার চালাতে পারেন।

লুপের জন্য 1 থেকে 50,000 পর্যন্ত যেতে কত সময় লাগে, আপনি নিম্নরূপ টাইমার ব্যবহার করতে পারেন।

console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');


গণনা

দ্য console.count () কোন প্রোগ্রামে কতবার ফাংশন বা কোডের কিছু অংশ ডাকা হয়েছে তার হিসাব রাখার জন্য পদ্ধতি ব্যবহার করা হয়। উদাহরণস্বরূপ, আমরা লুপের জন্য কতবার সম্পাদন করা হয়েছে তার হিসাব রাখতে পারি:

for(i=0; i<4; i++ ){
console.count();
}

লগ বার্তাগুলিকে গ্রুপ করা

ঠিক টাইমার পদ্ধতির মত, console.group () , এবং console.groupEnd () পদ্ধতি সাধারণত জোড়ায় ব্যবহার করা হয়।

গ্রুপ পদ্ধতি আপনাকে আপনার লগ বার্তাগুলিকে আরও ভালভাবে সংগঠিত করতে সাহায্য করে। উদাহরণস্বরূপ, আমরা নিম্নরূপ লেবেল সতর্কতা সহ সতর্ক বার্তাগুলির একটি গ্রুপ তৈরি করতে পারি।

console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()

সতর্কতা গোষ্ঠীর মধ্যে দুটি বার্তা দৃশ্যত শ্রেণীবদ্ধ করা হয়েছে যেমনটি নীচের আউটপুটে দেখা গেছে।

কনসোল সাফ করা

সর্বশেষ কিন্তু অন্তত নয়, এখানে বেশ কয়েকটি উপায় রয়েছে যার মাধ্যমে আপনি আপনার ব্রাউজার কনসোলে লগ বার্তাগুলি সাফ করতে পারেন।

ব্যবহার কনসোল ক্লিয়ার () পদ্ধতি নিম্নরূপ।

console.clear()

আপনি ব্রাউজার কীবোর্ড শর্টকাট ব্যবহার করে ব্রাউজার কনসোল সাফ করতে পারেন।

গুগল ক্রম : Ctrl + L

ফায়ারফক্স : Ctrl + Shift + L

সম্পূর্ণরূপে ব্রাউজার কনসোল ব্যবহার করা

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

কিভাবে শব্দ 2016 এ ফ্ল্যাশকার্ড তৈরি করবেন

আপনার পরবর্তী প্রকল্পের জন্য একটি ক্যাপচা যাচাইকরণ করুন এবং আপনার নতুন ডিবাগিং দক্ষতা পরীক্ষা করুন!

শেয়ার করুন শেয়ার করুন টুইট ইমেইল এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি ক্যাপচা ভ্যালিডেশন ফর্ম তৈরি করুন

ক্যাপচা বৈধতা দিয়ে আপনার ওয়েবসাইটগুলি সুরক্ষিত করুন।

পরবর্তী পড়ুন সম্পর্কিত বিষয়

• প্রোগ্রামিং
• ওয়েব ডেভেলপমেন্ট
• জাভাস্ক্রিপ্ট

লেখক সম্পর্কে যেতে ভাল(36 নিবন্ধ প্রকাশিত)

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

Mwiza Kumwenda থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন