article.md

ক্রোমে ডিবাগিং

আরো জটিল জটিল কোড লিখার আগে ডিভাগিং সম্পর্কে জানা যাক -

ডিবাগিং হল একটি স্ক্রিপ্টের মধ্যে ত্রুটিগুলি খুঁজে বের করার এবং ঠিক করার একটি প্রক্রিয়া। এখনকার সকল মর্ডান ব্রাউজার এবং বেশিরভাগ অন্যান্য এনভার্নমেন্ট গুলো ডিভাগিং সাপোর্ট করে থাকে -- ডেভেলপমন্ট টুলসে কিছু স্পেশাল (UI) এর কারনে ডিভাগিং করা আরো সহজ হয়েছে. এমনকি এটির মাধ্যমে কোড স্টেপ বাই স্টেপ ট্রেস করা যায় যার কারনে বুজা যায় যে কোথায় কি হচ্ছে ।

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

সোর্স প্যানেল ( Sources )

আপনার ক্রোম ভার্সনটি হয়ত একটু ভিন্ন হতে পারে, তবে সবকিছুই একই রকম থাকতে পারে ।

• ক্রোমে এই উদাহরণ পেজটি খুলুন ।
• ডেভেলপার টুলস ওপেন করুন এই কিবোর্ড শর্টকাটের মাধ্যমে key:F12 (Mac: key:Cmd+Opt+I) ।
• Sources প্যানেল সিলেক্ট করুন ।

আপনি যদি প্রথম এটি করে থাকেন তাহলে নিচের মত দেখতে পাবেন ঃ

এই টগলার বাটনটিতে ক্লিক করলে ফাইল সহ একটি টেব ওপেন হয় ।

ট্রি ভিউ থেকে hello.js ফাইলটি সিলেক্ট করুন তাহলে নিচের মত দেখতে পাবেন ঃ

এই সোর্স প্যানেলটির তিনটি পার্ট রয়েছে ঃ

1. File Navigator এই সেকশনে এইচটিএমল, জাভাস্ক্রিপ্ট , সিএসস এবং অন্যান্য ফাইল এমনকি ইমেজ সহ দেখায় । ক্রোমের এক্সটেনশন গুলো হয়ত এখানেও দেখাতে পারে ।
2. Code Editor এই সেকশনে সোর্স কোড গুলো দেখায় ।
3. JavaScript Debugging এই সেকশনটি ডিভাগিং এর জন্য আর আমরা খুব শিগ্রই এটা নিয়ে আলোচনা করবো ।

এখন চাইলে কোড এডিটরে স্পেস বাড়ানোর জন্য টগল বাটনটিতে ক্লিক করে রিসোর্স ট্যাবটি হাইড করতে পারেন ।

কন্সোল ( Console )

যদি আমরা কিবোর্ডের key:Esc ক্লিক করি তাহলে নিচে কন্সোল ওপেন হবে । অইখানে আমরা কমান্ড টাইপ করে key:Enter প্রেস করে এক্সিকিউট করতে পারবো ।

একটি স্টেটমেন্ট এক্সিকিউট করার পর তার রেজাল্ট নিচেই দেখতে পাবো ।

উদাহরণ হিসেবে এখানে 1+2 এর রেজাল্ট 3 এবং hello("debugger") কিছুই রিটার্ন করে না , সেক্ষেত্রে রেজাল্ট হবে undefined :

ব্রেকপয়েন্টস ( Breakpoints )

চলুন উদাহরণ পেজ টি পরীক্ষা করে দেখা যাক । hello.js ফাইলে লাইন নং 4 এ ক্লিক করুন তবে কোডে নয় শুধুমাত্র ডিজিট 4 এর উপর ।

অভিনন্দন ! আপনি একটি ব্রেকপয়েন্ট সেট করেছেন । ঠিক একই ভাবে আবারো ক্লিক করুন লাইন নং 8 ।

এটা অনেকটা নিচের মত দেখাবে (নীল যেখানে আপনাকে ক্লিক করা উচিত):

একটি ব্রেকপয়েন্ট হল কোডের একটি পয়েন্ট যেখানে ডিবাগার স্বয়ংক্রিয়ভাবে জাভাস্ক্রিপ্ট এক্সিকিউশনকে বিরতি দেবে ।

যখন কোডটি পজ অবস্থায় থাকে তখন আমরা বর্তমান ভেরিয়েবল গুলো পরীক্ষা করতে পারি, কনসোলে কমান্ড চালাতে পারি এছাড়াও অনেক কিছু করতে পারি । অন্য কথায়, আমরা এটি ডিবাগ করতে পারি।

আমরা সবসময় ডান প্যানেলে ব্রেকপয়েন্টের একটি তালিকা খুঁজে পেতে পারি। এটি আসলে অনেক দরকারী যখন আমাদের বিভিন্ন ফাইলে অনেক ব্রেকপয়েন্ট থাকে। এটি আমাদের যা অনুমতি দেয় তা হল ঃ

• যেকোন সময় যেকোন ব্রেকপয়েন্টে জাম্প করা যাবে ( ডান পাশের প্যানেলে ক্লিক করে ) ।
• আনচেকের মাধ্যমে ব্রেকপয়েন্টকে সাময়িকের জন্য ডিজেবল করা যাবে ।
• রাইট ক্লিক করে রিমুভ সিলেক্টের মাধ্যমে ব্রেকপয়েন্ট রিমুভ করা যায় ।
• ...ইত্যাদি ।

লাইন নাম্বারে *Right click* করে *conditional* ব্রেক পয়েন্ট তৈরি করা যায় । এটা তখনি ট্রিগ্রার করে যখন এক্সপ্রেশনটি সত্য হয় ।

এটা আসলেই কার্যকর যখন আমাদের একটি নির্দিষ্ট ভেরিয়বল ভেলুতে থামা দরকার অথবা নির্দিষ্ট ফাংসন প্যারামিটারে ।

ডিভাগার কমান্ড

আমরা নিচের মত debugger কমান্ড ব্যবহার করেও কোড পজ করতে পারি ঃ

function hello(name) {
  let phrase = `Hello, ${name}!`;

*!*
  debugger;  // <-- the debugger stops here
*/!*

  say(phrase);
}

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

পজ করুন এবং চারদিকে লক্ষ্য করুন

আমাদের উদাহরণে পেজ লোডের সময় hello() কল করা হয়েছে, তো সবচাইতে সহজ উপায় ডিবাগারটি একটিভ করার জন্য (ব্রেকপয়েন্ট সেট করার পর) পেজটি রিলোড করতে হবে । কিবোর্ড থেকে key:F5 (Windows, Linux) or key:Cmd+R (Mac) প্রেস করুন ।

ব্রেকপয়েন্ট সেট করা হলে, এক্সিকিউশন ৪নং লাইনে থামে ঃ

ডানদিকে ইনফরম্যাশনাল ড্রপডাউনটি খুলুন ( এরো চিহ্নের আইকন )। আর এখান থেকেই বর্তমান কোড গুলো পরীক্ষা করার যায়:

1. Watch -- যেকোনো এক্সপ্রেশনের জন্য বর্তমান মান দেখায় ।

   আপনি চাইলে প্লাসে + ক্লিক করে একটি এক্সপ্রেশন ইনপুট দিতে পারেন । ডিবাগার যেকোনো মুহূর্তে এটির মান দেখাবে এবং অটোম্যাটিক্যালি এক্সিকিশন প্রসেস গুলো পুনরায় ক্যালকুলেট হবে ।

2. Call Stack -- নেস্টেড কল গুলো দেখায়.

   এই মূহুর্তে ডিভাগার hello() কল এর ভিতর রয়েছে , আর এটি index.html এর মধ্যে থাকা স্ক্রিপ্ট থেকে কল হয়েছে ( কোন ফাংশন ছিলো না , তাই এটাকে এননিমাউস বলা হয় ) ।

   যদি আপনি কল স্ট্যাক থেকে যেকোন স্ট্যাক আইটেম (e.g. "anonymous") ক্লিক করেন তাহলে ডিভাগার ঠিক সেই কোডেই জাম্প করবে এবং থাকা সকল ভেরিয়েবল গুলো পরিক্ষা করে দেখা যাবে।

3. Scope -- বর্তমান ভেরিয়েবল.

   Local লোকাল ফাংশনের ভেরিয়েবল গুলো দেখায় । সেই সাথে সোর্স কোডে ভেলু গুলো হাইলাইট করে দেখানো হয় ।

   Global গ্লোবাল ভেরিয়েবল গুলো দেখায় (যেকোন ফাংসনের বাহিরের ভেরিয়েবল).

   সেখানে এই this কিউয়ার্ডটিও রয়েছে যা আমরা এখনো আলোচনা করিনি কিন্তু খুব শিগ্রই এটা নিয়ে আলোচনা হবে ।

এক্সিকিউশান গুলো ট্রেস করা

এখন স্ক্রিপ্ট ট্রেস করার সময় -

ডান প্যানেলের উপরে এটির জন্য বাটন রয়েছে । চলুন ক্লিক করা যাক

-- "Resume": এক্সিকিউশান চলমানের জন্য, hotkey key:F8.

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

ক্লিক করার পর আমরা যা দেখতে পাই এখানে ঃ

এক্সিকিউশনটি আবার শুরু হয়েছে এবং অন্য একটি ব্রেকপয়েন্টে say() যেয়ে থেমেছে । এখন কল স্ট্যাকে লক্ষ্য করুন এখানে আরেকটি কল বৃদ্ধি পেয়েছে । এখন আমরা say() এর মধ্যে ।

-- "Step": পরবর্তী কমান্ড চালান, hotkey key:F9.

পরবর্তী স্টেটমেন্টটি চালান । যদি আমরা এখন এটি ক্লিক করি তাহলে alert দেখাবে ।

বার বার এটিতে ক্লিক করলে স্টেটমেন্টগুলো একের পর এক এক্সিকিউশান হতে থাকবে ।

-- "Step over": পরবর্তী কমান্ড চালান তবে ফাংশানে যাবেন না, hotkey key:F10.

অনেকটা আগের কমান্ডের "Step" মতই কিন্তু একটু অন্যভাবে আচরন করে যদি পরবর্তি স্টেটমেন্টটি একটি ফাংশন কল হয়ে থাকে ( এটা বিল্ট ইন না alert এর মত কিন্তু এটি আমাদের নিজস্ব একটি ফাংশন )

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

সেই ফাংশন কলের পরপরই এক্সিকিউশান আবার পজ হয়।

তবে সমস্যা নাই যদি আমরা ফাংশনের ভিতর কি হচ্ছে না হচ্ছে তা না দেখতে চাই ।

-- "Step into", hotkey key:F11.

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

ফিউচারের জন্য নোট করে রাখতে পারেন যে "Step" কমান্ড এসিনক্রোনাস একশান ইগনোর করে থাকে , যেমন setTimeout (scheduled function call) যেট পরে এক্সিকিউট করে থাকে । "Step into" কোডের ভেতর যায় এবং প্রয়োজন হলে অপেক্ষা করে । আরো তথ্যের জন্য এটা দেখতে পারেন DevTools manual ।

-- "Step out": বর্তমান ফাংশন শেষ না হওয়া পর্যন্ত এক্সিকিউশান চালিয়ে যান, hotkey key:Shift+F11.

এক্সিকিউশন চালিয়ে যান এবং বর্তমান ফাংশনের একেবারে শেষ লাইনে এটি বন্ধ করুন। এটি তখন কার্যকর যখন আমরা ভুলবশত একটি নেস্টেড কল ব্যবহার করে প্রবেশ করি । আর এটি আমাদের উপর ইন্টারেস্ট রাখে না যার কারনে আমরা শেষ না হওয়া পর্যন্ত কন্টিনিউ করতে থাকি যত দ্রুত সম্ভব ।

-- enable/disable সকল ব্রেক পয়েন্টগুলো

এই বাটনটি এক্সিকিউশন করে না , শুধুমাত্র ব্রেকপয়েন্টকে অন/অফ করার জন্য ব্যবহার হয় ।

-- enable/disable অটোম্যাটিক পজ হয় যদি কোন ত্রুটি ধরা পড়ে

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

একটি লাইনের উপর রাইট ক্লিক করে কন্টেক্সট মেনু ওপেন করলে একটা "Continue to here" অপশান পাবো ।

লাইনে যখন একাধিক স্টেপ এগিয়ে নিয়ে যেতে চাই তখন এটি সুবিধাজনক, কিন্তু একটি ব্রেকপয়েন্ট সেট করতে আমরা খুব অলসতা করি

লগিং ( Logging )

আমাদের কোড থেকে কিছু আউটপুটের জন্য এই console.log ফাংশনটি রয়েছে ।

এক্ষেত্রে 0 থেকে 4 পর্যন্ত কন্সলে ভেলু আউটপুটের জন্য ঃ

// open console to see
for (let i = 0; i < 5; i++) {
  console.log("value,", i);
}

রেগুলা ইউজাররা কোন আউটপুট দেখতে পাচ্ছেন না কারন এটি কন্সোলে প্রিন্ট হয়েছে । এটি দেখার জন্য আপনাকে কন্সোল প্যানেল ওপেন করতে হবে key:Esc প্রেস করুন । তাহলে নিচে কন্সোল প্যানেল ওপেন হবে ।

যদি আমাদের কোডে যথেষ্ট লগিং থাকে, তাহলে আমরা ডিবাগার ছাড়াই রেকর্ড থেকে কী ঘটছে তা দেখতে পারি।

সারসংক্ষেপ

তো আমারা যা দেখলাম এখানে ৩ টি প্রধান উপায় রয়েছে স্ক্রিপ্ট থামানোর জন্য ঃ

1. ব্রেকপয়েন্ট
2. debugger স্টেটমেন্ট
3. এরর ( যদি ডেভটুল ওপেন থাকে এবং বাটন অন থাকলে).

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

এখানে আরো অনেক অপশান রয়েছে ডেভটুলসের যা আমরা কভার করিনি । সম্পূর্ণ তথ্য এখানে রয়েছে - https://developers.google.com/web/tools/chrome-devtools

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

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