জাভাস্ক্রিপ্ট/ডিবাগিং

জাভাস্ক্রিপ্ট ডিবাগার (JavaScript Debuggers)

ফায়ারবাগ (Firebug)

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

ভেঙ্কম্যান জাভাস্ক্রিপ্ট ডিবাগার (Venkman JavaScript Debugger)

• ভেঙ্কম্যান জাভাস্ক্রিপ্ট ডিবাগার (মজিলা-ভিত্তিক ব্রাউজার যেমন নেটস্কেপ ৭.x, ফায়ারফক্স/ফিনিক্স/ফায়ারবার্ড এবং মজিলা স্যুট ১.x এর জন্য)
• ভেঙ্কম্যানের পরিচিতি
• ভেঙ্কম্যানে ব্রেকপয়েন্ট ব্যবহার

ইন্টারনেট এক্সপ্লোরার ডিবাগিং (Internet Explorer debugging)

• মাইক্রোসফট স্ক্রিপ্ট ডিবাগার (ইন্টারনেট এক্সপ্লোরারের জন্য) স্ক্রিপ্ট ডিবাগারটি উইন্ডোজ ৯৮ এবং এনটি যুগের। এর স্থলাভিষিক্ত হয়েছে ডেভেলপার টুলবার।
• ইন্টারনেট এক্সপ্লোরার ডেভেলপার টুলবার
• মাইক্রোসফটের ভিজ্যুয়াল ওয়েব ডেভেলপার এক্সপ্রেস হলো ভিজ্যুয়াল স্টুডিও আইডিই (IDE)-এর ফ্রি সংস্করণ। এতে একটি জেএস (JS) ডিবাগার থাকে। এর সক্ষমতার সংক্ষিপ্ত সারাংশের জন্য দেখুন: [১]
• ইন্টারনেট এক্সপ্লোরার ৮-এ ডিফল্টভাবে ফায়ারবাগের মতো একটি ওয়েব ডেভেলপমেন্ট টুল থাকে (কোনো অ্যাড-অন প্রয়োজন নেই), যা F12 চেপে অ্যাক্সেস করা যায়। এই টুলটি আইই৮ (IE8) এবং আইই৭ (IE7) রেন্ডারিং ইঞ্জিনের মধ্যে পরিবর্তন করার সুবিধাও দেয়।

সাফারি ডিবাগিং (Safari debugging)

সাফারিতে এমন শক্তিশালী টুল রয়েছে যা ওয়েবসাইট ডিবাগ, টুইক এবং অপ্টিমাইজ করা সহজ করে তোলে। এগুলো অ্যাক্সেস করতে সাফারির প্রেফারেন্স থেকে 'Develop' মেনু চালু করুন। এর মধ্যে রয়েছে ওয়েব ইন্সপেক্টর, এরর কনসোল, ডিসএবল ফাংশন এবং অন্যান্য ডেভেলপার ফিচার। ওয়েব ইন্সপেক্টর ব্রাউজারে থাকা সবচেয়ে সমৃদ্ধ ডেভেলপমেন্ট টুলে দ্রুত অ্যাক্সেস দেয়। ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্ট আরও দক্ষ করতে এর টুলগুলো একটি পরিষ্কার উইন্ডোতে উপস্থাপন করা হয়। এটি সক্রিয় করতে Develop মেনু থেকে 'Show Web Inspector' নির্বাচন করুন। স্ক্রিপ্ট প্যানেলে সাফারির শক্তিশালী জাভাস্ক্রিপ্ট ডিবাগার রয়েছে। এটি ব্যবহার করতে, ওয়েব ইন্সপেক্টরে স্ক্রিপ্ট প্যানেল নির্বাচন করুন এবং 'Enable Debugging'-এ ক্লিক করুন। ডিবাগার আপনার পেজের জাভাস্ক্রিপ্ট পরীক্ষা করে এবং কোনো ব্যতিক্রম (exception) বা ভুল সিনট্যাক্স পেলে থেমে যায়। স্ক্রিপ্ট প্যানেল আপনাকে জাভাস্ক্রিপ্ট পজ করা, ব্রেকপয়েন্ট সেট করা এবং লোকাল ভেরিয়েবল মূল্যায়ন করার সুযোগ দেয়।

জেটিএফ: জাভাস্ক্রিপ্ট ইউনিট টেস্টিং ফার্ম (JTF: JavaScript Unit Testing Farm)

• JTF হলো একটি সহযোগী ওয়েবসাইট যা আপনাকে টেস্ট কেস তৈরি করতে দেয়, যা সব ব্রাউজারে পরীক্ষা করা হবে। টিডিডি (TDD) করার এবং আপনার কোড সব ব্রাউজারে সঠিকভাবে কাজ করবে কি না তা নিশ্চিত করার এটিই সেরা উপায়।

জেএস-ইউনিট (jsUnit)

• jsUnit

বিল্ট-ইন ডিবাগিং টুল (built-in debugging tools)

কেউ কেউ alert() ফাংশন ব্যবহারের চেয়ে "ডিবাগিং কনসোলে" ডিবাগিং মেসেজ পাঠানো পছন্দ করেন। নিচে জনপ্রিয় ব্রাউজারগুলোর তালিকা এবং তাদের কনসোল/ডিবাগিং টুল অ্যাক্সেস করার উপায় দেওয়া হলো:

• ফায়ারফক্স: Ctrl+Shift+K এরর কনসোল খোলে।
• অপেরা (৯.৫+): Tools >> Advanced >> Developer Tools অপেরা Dragonfly খোলে।
• ক্রোম: Ctrl+Shift+J ক্রোমের "Developer Tools" উইন্ডো খোলে, যা "console" ট্যাবে ফোকাস থাকে।
• ইন্টারনেট এক্সপ্লোরার: F12 ফায়ারবাগের মতো একটি ওয়েব ডেভেলপমেন্ট টুল খোলে যাতে আইই৮ (IE8) এবং আইই৭ (IE7) রেন্ডারিং ইঞ্জিনের মধ্যে পরিবর্তন করার ক্ষমতাসহ নানা ফিচার থাকে।
• সাফারি: Cmd+Alt+C সাফারির জন্য ওয়েবকিট ইন্সপেক্টর খোলে।

সাধারণ ভুল (Common Mistakes)

• টাইপোগ্রাফিক ভুলের জন্য আপনার কোডটি সতর্কতার সাথে পড়ুন।
• নিশ্চিত করুন যে প্রতিটি "(" এর জন্য একটি ")" এবং প্রতিটি "{" এর জন্য একটি "}" আছে।
• অ্যারে এবং অবজেক্ট ডিক্লারেশনে ট্রেইলিং কমা (trailing comma) মাইক্রোসফট ইন্টারনেট এক্সপ্লোরারে এরর দেখাবে, কিন্তু ফায়ারফক্সের মতো গিকো (Gecko)-ভিত্তিক ব্রাউজারে দেখাবে না।

  // অবজেক্ট
  var obj = {
    'foo'   : 'bar',
    'color' : 'red', // ট্রেইলিং কমা
  };

  // অ্যারে
  var arr = [
    'foo',
    'bar', // ট্রেইলিং কমা
  ];

• মনে রাখবেন যে জাভাস্ক্রিপ্ট কেস-সেন্সিটিভ (case sensitive)। কেস সম্পর্কিত ভুলগুলো খুঁজুন।
• ভেরিয়েবলের নাম, ফাংশনের নাম বা লুপ লেবেল হিসেবে রিজার্ভড ওয়ার্ড ব্যবহার করবেন না।
• স্ট্রিং-এর ভেতর কোটেশন চিহ্নকে "\" দিয়ে এস্কেপ করুন, অন্যথায় জাভাস্ক্রিপ্ট ইন্টারপ্রেটার মনে করবে নতুন স্ট্রিং শুরু হয়েছে, যেমন:

alert('He's eating food'); -এর পরিবর্তে হওয়া উচিত

alert('He\'s eating food'); অথবা

alert("He's eating food");

• parseInt ফাংশন ব্যবহার করে স্ট্রিংকে সংখ্যায় রূপান্তর করার সময় মনে রাখবেন যে "08" এবং "09" (যেমন ডেটটাইমে) শূন্য প্রিফিক্সের কারণে অক্টাল সংখ্যা নির্দেশ করে। ১০ রেডিক্স (radix) ব্যবহার করে parseInt করলে ভুল রূপান্তর এড়ানো যায়। var n = parseInt('09',10);
• মনে রাখবেন জাভাস্ক্রিপ্ট প্ল্যাটফর্ম ইন্ডিপেন্ডেন্ট, কিন্তু ব্রাউজার ইন্ডিপেন্ডেন্ট নয়। যেহেতু সঠিকভাবে মানদণ্ড প্রয়োগ করা হয় না, তাই এমন ফাংশন, প্রপার্টি এমনকি অবজেক্টও থাকতে পারে যা এক ব্রাউজারে পাওয়া গেলেও অন্যটিতে পাওয়া যায় না, যেমন: মজিলা/গিকো অ্যারেতে indexOf() ফাংশন আছে; কিন্তু মাইক্রোসফট ইন্টারনেট এক্সপ্লোরারে নেই।

ডিবাগিং পদ্ধতি (Debugging Methods)

জাভাস্ক্রিপ্টে ডিবাগিং অন্যান্য প্রোগ্রামিং ভাষার চেয়ে খুব একটা আলাদা নয়। Computer Programming Principles/Maintaining/Debugging-এ এই সম্পর্কিত নিবন্ধটি দেখুন।

স্ক্রিপ্ট চলার সময় ভেরিয়েবল অনুসরণ করা (Following Variables as a Script is Running)

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

ব্রাউজার বাগ (Browser Bugs)

মাঝে মাঝে ব্রাউজারে সমস্যা থাকে, আপনার স্ক্রিপ্টে নয়। এর মানে আপনাকে বিকল্প উপায় (workaround) খুঁজে বের করতে হবে।

ব্রাউজার বাগ রিপোর্টসমূহ

ব্রাউজার-নির্ভর কোড (browser-dependent code)

জাভাস্ক্রিপ্টের কিছু উন্নত বৈশিষ্ট্য সব ব্রাউজারে কাজ করে না।

আমাদের প্রথম প্রতিক্রিয়া প্রায়শই হয়: ব্যবহারকারী কোন ব্রাউজার ব্যবহার করছেন তা শনাক্ত করুন, তারপর যদি ব্রাউজারটি সমর্থন করে তবে সেটি ব্যবহার করুন। অন্যথায় তা বাদ দিন।

"ব্রাউজার ডিটেক্ট" ব্যবহার করার পরিবর্তে, একটি ভালো পদ্ধতি হলো "অবজেক্ট ডিটেকশন" জাভাস্ক্রিপ্ট লেখা, যা শনাক্ত করবে যে ব্যবহারকারীর ব্রাউজার আমাদের ব্যবহার করতে চাওয়া নির্দিষ্ট অবজেক্ট (মেথড, অ্যারে বা প্রপার্টি) সমর্থন করে কি না।[২] [৩]

কোনো মেথড, প্রপার্টি বা অন্য কোনো অবজেক্ট বিদ্যমান কি না তা খুঁজে বের করতে এবং থাকলে কোড রান করতে আমরা এরকম কোড লিখি:

var el = null;
if (document.getElementById) {
  // আধুনিক পদ্ধতি
  el = document.getElementById(id);
} else if (document.all) {
  // পুরানো ইন্টারনেট এক্সপ্লোরার পদ্ধতি
  el = document.all[id];
} else if (document.layers) {
  // পুরানো নেটস্কেপ ওয়েব ব্রাউজার পদ্ধতি
  el = document.layers[id];
}

আরও পড়ুন

• "JavaScript Debugging" লিখেছেন বেন বাকশ (Ben Bucksch)