ডিবাগিং হল ত্রুটিগুলি দূর করার পদ্ধতিগত পদ্ধতি। এটা সব পরীক্ষার মামলা মৃত্যুদন্ড দিয়ে শুরু হয়. যখনই পরীক্ষার কেসগুলি কার্যকর করা হয়, প্রকৃত ফলাফলগুলি প্রত্যাশিত ফলাফলের সাথে তুলনা করা হয়। যদি প্রকৃত ফলাফল এবং প্রত্যাশিত ফলাফলের মধ্যে কোনো সঙ্গতির অভাব থাকে, তাহলে মূল কারণ বিশ্লেষণ করা হয় এবং অতিরিক্ত পরীক্ষা যেমন রিগ্রেশন টেস্ট করা হয় যাতে নিশ্চিত করা যায় যে ফলাফলগুলি প্রত্যাশিত লাইনের সাথে আছে।
স্ট্যাটিক ওয়েব পেজ ডিজাইন করতে, HTML ব্যাপকভাবে ব্যবহৃত হয়। গতিশীল ওয়েব-ভিত্তিক অ্যাপ্লিকেশন, জাভাস্ক্রিপ্ট বিকাশ করতে, ওয়েবের স্ক্রিপ্টিং ভাষা ব্যবহার করা উচিত। তাদের কোড বাগ-মুক্ত করতে, প্রোগ্রামাররা অনেক ডিবাগিং কৌশলের উপর নির্ভর করে। এটি উপসাগরে ত্রুটি এবং ব্যতিক্রম রাখার একটি দুর্দান্ত উপায়। যাইহোক, জাভাস্ক্রিপ্ট চমৎকার ডিবাগিং কার্যকারিতা দিয়ে সজ্জিত নয়। সৌভাগ্যবশত, ওয়েব ব্রাউজার-ভিত্তিক ডিবাগার Firebug ব্যবহার করে জাভাস্ক্রিপ্টে লেখা কোডের লাইনগুলি ডিবাগ করা সহজ৷
এখন আমি আপনাকে প্রযুক্তিগত শব্দের সাথে পরিচয় করিয়ে দিই। ফায়ারবাগ ডিবাগারের উপাদানগুলির উপর এখানে কয়েকটি অন্তর্দৃষ্টিপূর্ণ বাক্য রয়েছে:
- জেএসইএডিটর − JSEditor জাভাস্ক্রিপ্ট এডিটর ছাড়া আর কিছুই নয়। সমস্ত উদ্দেশ্য এবং উদ্দেশ্যে, JSEditor আপনাকে "সমস্ত ত্রুটির উপর বিরতি" ব্যবহার করে জাভাস্ক্রিপ্ট কোড ডিবাগ করার অনুমতি দেয়। একজন ব্যবহারকারীকে যা করতে হবে তা হল স্ক্রিপ্ট এক্সিকিউশন পজ করার জন্য এই বিকল্পটি চেক করা।
- স্ক্রিপ্ট ট্যাব - কনসোল হল ফায়ারবাগ ডিবাগারের প্যানে উপস্থিত প্রথম ট্যাব। HTML এবং CSS হল প্যানে উপস্থিত দ্বিতীয় এবং তৃতীয় ট্যাব। স্ক্রিপ্ট ট্যাব চতুর্থ এক. স্ক্রিপ্ট প্যানেলটি দুটি উপ-প্যানেলে বিভক্ত - বাম প্যানেলটি জাভাস্ক্রিপ্ট সম্পাদক। ডানদিকের প্যানেলে দুটি উপ-প্যানেল রয়েছে- ওয়াচ এবং ব্রেকপয়েন্ট।
- JSFileSelector − JSFileSelector আপনার পৃষ্ঠার আওতায় আসা সমস্ত জাভাস্ক্রিপ্ট ফাইলের তালিকা প্রদর্শন করে৷
- ব্রেকপয়েন্ট − ব্রেকপয়েন্টে জাভাস্ক্রিপ্ট এক্সিকিউশন বন্ধ হয়ে যাবে। এটা সম্পূর্ণভাবে বলা যেতে পারে যে ফায়ারবাগে তিন ধরনের ব্রেকপয়েন্ট রয়েছে- স্ট্যাটিক, কন্ডিশনাল এবং ডাইনামিক। স্ট্যাটিক ব্রেকপয়েন্ট সেট করতে, স্ক্রিপ্ট প্যানেলে কোডের পছন্দসই লাইনে ক্লিক করুন। নাম অনুসারে, শর্তের উপর ভিত্তি করে শর্তসাপেক্ষ ব্রেকপয়েন্ট সেট করা উচিত। ফাংশন নামের উপর ভিত্তি করে ব্রেকপয়েন্ট সেট করতে, আপনি গতিশীল ব্রেকপয়েন্টগুলিতে ব্যাঙ্ক করতে পারেন। ডায়নামিক ব্রেকপয়েন্টের জন্য প্রিয় কিছু আছে- সেগুলি কমান্ডলাইন থেকে সেট করা যেতে পারে। উপরন্তু, তারা দুটি জনপ্রিয় ফাংশন ব্যবহার করে সেট করা যেতে পারে- ডিবাগ এবং আনবাগ।
- ব্রেকপয়েন্টের তালিকা − সমস্ত ব্রেকপয়েন্ট প্যানেলে প্রদর্শিত হবে। আপনি অপ্রয়োজনীয় ব্রেকপয়েন্ট মুছে ফেলতে পারেন।
- ওয়াচ উইন্ডো − 'Watch Window' হল একটি পরিচিত শব্দ যারা Microsoft Visual Studio-এর সূক্ষ্ম-দৃষ্টিতে পারদর্শী। যাইহোক, ফায়ারবাগের ওয়াচ উইন্ডো এবং মাইক্রোসফ্ট ভিজ্যুয়াল স্টুডিওর মধ্যে বিদ্যমান পার্থক্যের সূক্ষ্ম রেখাগুলি বোঝা একটি ভাল কাজ করবে৷ ফায়ারবাগের ওয়াচ উইন্ডোটি একটি তালিকা হিসাবে উপলব্ধ ভেরিয়েবলের সমস্ত মান প্রদর্শন করবে। মিথ্যারোপকারীদের দুর্ভোগ হবে ঘটা! স্কোপের মধ্যে থাকা ভেরিয়েবলের মানগুলি শুধুমাত্র প্রদর্শিত হয়। বিপরীতে, মাইক্রোসফ্ট ভিজ্যুয়াল স্টুডিওর ওয়াচ উইন্ডো নির্বাচিত ভেরিয়েবলের মান প্রদর্শন করবে।
কিভাবে ফায়ারবাগ অ্যাড-অন ইনস্টল করবেন
- মোজিলা ফায়ারফক্স ব্রাউজার খুলুন। উইন্ডোর উপরের ডানদিকের কোণায়, আপনি ওপেন মেনু খুঁজে পেতে পারেন
- মেনু খুলুন এ ক্লিক করুন এবং অ্যাড-অন ক্লিক করুন। একটি নতুন উইন্ডো প্রদর্শিত হবে৷
- সার্চ বক্সে, Firebug টাইপ করুন এবং Enter টিপুন কীবোর্ডের কী।
- ফায়ারবাগ অ্যাড-অন প্রদর্শিত হয়। ইনস্টল করুন ক্লিক করুন৷ .
ফায়ারবাগ এখন আপনার ফায়ারফক্স ব্রাউজারে যোগ করা হয়েছে।
ফায়ারবাগ ব্যবহার করে জাভাস্ক্রিপ্ট কোড ডিবাগ করার উপায়
এখানে, একটি সহজ 8 ধাপ পদ্ধতি যা আপনাকে FireBug ব্যবহার করে ফায়ারফক্সে জাভাস্ক্রিপ্ট কোড ডিবাগ করতে দেয়:
- একটি নোটপ্যাড ফাইলে আপনার জাভাস্ক্রিপ্ট কোড লিখুন। .htm এক্সটেনশন দিয়ে সংরক্ষণ করুন। এই .htm ফাইলটি ফায়ারফক্স ব্রাউজারে খুলুন। কোন দ্বিতীয় চিন্তা ছাড়া, Firebug ডিবাগারের কনসোল চালু করুন৷ ৷
- কোডের পছন্দসই লাইনে একটি স্ট্যাটিক ব্রেকপয়েন্ট সেট করুন। স্ক্রিপ্ট ট্যাবের ডান প্যানেলে, আপনি কোডের লাইন দেখতে পারেন যেখানে স্ট্যাটিক ব্রেকপয়েন্ট বরাদ্দ করা হয়েছে।
- “স্টেপ ওভার” বোতামে ক্লিক করে লাইন দ্বারা কোড লাইনটি চালান। এই বোতামটি Firebug টুলবারে উপস্থিত রয়েছে। স্টেপ ওভার বোতাম ছাড়াও, আপনি আরও তিনটি বোতাম দেখতে পাবেন- কন্টিনিউ, স্টেপ ইনটু এবং স্টেপ আউট। একবার ব্রেকপয়েন্টের সম্মুখীন হলে স্ক্রিপ্টের এক্সিকিউশন পুনরায় শুরু করতে, চালিয়ে যান ক্লিক করুন। একটি বিকল্প পদক্ষেপ হিসাবে, আপনি F8 বোতাম টিপুন। একটি নির্দিষ্ট ফাংশন কল করার জন্য, স্টেপ ওভার ক্লিক করুন। একটি বিকল্প পদক্ষেপ হিসাবে, আপনি F10 বোতাম টিপুন। একটি নির্দিষ্ট ফাংশনের মূল অংশে যেতে, স্টেপ ইনটু ক্লিক করুন। একটি বিকল্প পদক্ষেপ হিসাবে, আপনি F11 বোতাম টিপুন। স্ক্রিপ্টের সঞ্চালন পুনরায় শুরু করতে এবং পরবর্তী ব্রেকপয়েন্টে থামতে, স্টেপ আউট ক্লিক করুন৷
- ঘড়ির উইন্ডোতে যে মানগুলি প্রদর্শিত হচ্ছে সেগুলিকে সাবধানে দেখুন৷ ৷
- প্রয়োজনীয় কাজ করুন। বাগ শনাক্ত করুন এবং বাগ ঠিক করুন।
- পৃষ্ঠাটি পুনরায় লোড করুন। এটি করতে, ফায়ারফক্সের রিলোড বোতামে ক্লিক করুন। একটি বিকল্প ক্রিয়া হিসাবে, আপনি কীগুলির সংমিশ্রণ- Ctrl+R টিপতে পারেন।
- বেশিরভাগ ভেরিয়েবলের মান ওয়াচ উইন্ডোতে প্রদর্শিত হবে। যাইহোক, এক বা দুটি ভেরিয়েবলের মান অনুপস্থিত হতে পারে। সেক্ষেত্রে, বিচক্ষণ ডিবাগাররা কমান্ডলাইন এপিআই-এর দক্ষতার প্রতিশ্রুতি দেয়। একটি নির্দিষ্ট ফাংশনের প্রথম লাইনে একটি ব্রেকপয়েন্ট যোগ করতে, ডিবাগ (fn) ব্যবহার করুন। একটি নির্দিষ্ট ফাংশনের প্রথম লাইনে উপস্থিত একটি ব্রেকপয়েন্ট সরাতে, আনবগ(ফু) ব্যবহার করুন।
- বাগ ফিক্স করার পর, কোডটি আবার এক্সিকিউট করুন। এতে কোনো বাগ থাকলে, উপরের ৭টি ধাপ অনুসরণ করে কোডটি ডিবাগ করুন। ফাইলটি সংরক্ষণ করুন এবং ফায়ারফক্সে একই প্রিভিউ করুন।
প্রোগ্রামাররা ফায়ারবাগের দক্ষতার উপর ব্যাংকিং করে তাদের সবচেয়ে খারাপ দুঃস্বপ্ন-বাগ ফিক্সিং দূর করতে পারে। আপনার নিষ্পত্তিতে ফায়ারবাগ দিয়ে, ডিবাগিং সহজ হয়ে যায়।
