ভূমিকা
আপনি 2D বা WebGL কনটেক্সট ব্যবহার করছেন কিনা তা গুরুত্বপূর্ণ নয়, যে কেউ <canvas> এলিমেন্ট নিয়ে কাজ করেছেন তিনি জানেন যে এটি ডিবাগ করা অত্যন্ত কঠিন হতে পারে। ক্যানভাস নিয়ে কাজ করার সময় সাধারণত কলের একটি দীর্ঘ এবং অনুসরণ করা কঠিন এমন তালিকা থাকে:
function draw() {
context.clearRect(0, 0, 258, 258);
context.fillStyle = "#EEEEEE";
context.beginPath();
context.arc(129, 129, 127, 0, 6.28, true);
context.closePath();
context.fill();
// … and on and on
}
কখনও কখনও আপনি ক্যানভাস কন্টেক্সটে পাঠানো নির্দেশাবলী ক্যাপচার করতে এবং সেগুলি এক এক করে ধাপে ধাপে দেখতে চান। সৌভাগ্যবশত, Chrome-এর DevTools-এ একটি নতুন ক্যানভাস ইন্সপেকশন ফিচার আছে যা আমাদের ঠিক সেটাই করতে দেয়!
এই নিবন্ধে আমি আপনাকে দেখাব যে কীভাবে এই ফিচার ব্যবহার করে আপনার ক্যানভাস কাজ ডিবাগ করা শুরু করবেন। ইন্সপেক্টর 2D এবং WebGL উভয় কনটেক্সটেই কাজ করে, তাই আপনি যেটিই ব্যবহার করুন না কেন, আপনি সরাসরি প্রয়োজনীয় ডিবাগিং তথ্য পেতে পারবেন।
শুরু করা
শুরু করতে, Chrome-এ about:flags-এ যান এবং “ডেভেলপার টুল এক্সপেরিমেন্ট চালু করুন” টগল করুন
এরপর, DevTools-এ যান এবং নিচে ডানদিকের কোণে কগ 
আইকনে ক্লিক করুন। সেখান থেকে আপনি এক্সপেরিমেন্ট বিকল্পে গিয়ে Canvas ইন্সপেকশন চালু করতে পারবেন:
পরিবর্তনগুলি কার্যকর করতে, আপনাকে DevTools বন্ধ করে আবার খুলতে হবে (আপনি Alt+R বা Option+R ব্যবহার করতে পারেন, এটি একটি সুবিধাজনক বিকল্প)।
DevTools আবার খুললে, প্রোফাইল বিভাগে যান এবং আপনি একটি নতুন ক্যানভাস প্রোফাইলার বিকল্প দেখতে পাবেন।
শুরুতেই আপনি লক্ষ্য করবেন যে Canvas Profiler বন্ধ করা আছে। আপনি যে ক্যানভাস ডিবাগ করতে চান সেটি কোনও পৃষ্ঠায় থাকলে, শুধু চালু করুন বিকল্পে প্রেস করুন এবং <canvas> কল ক্যাপচার করার জন্য পৃষ্ঠাটি রিলোড হয়ে যাবে:
আপনাকে সিদ্ধান্ত নিতে হবে যে আপনি একটি ফ্রেম ক্যাপচার করতে চান নাকি পরপর ফ্রেম ক্যাপচার করতে চান, যেখানে একটি ফ্রেম ঠিক তেমনই হবে যেমনটি আপনি DevTools টাইমলাইনে দেখতে পাবেন।
সিঙ্গেল ফ্রেম বর্তমান ফ্রেমের শেষ পর্যন্ত কল ক্যাপচার করে, তারপর বন্ধ হয়ে যায়। অন্যদিকে, পরপর ফ্রেম, আপনি বন্ধ করতে না বলা পর্যন্ত সব <canvas> এলিমেন্টের সব ফ্রেম ক্যাপচার করে। আপনি কোন মোড বেছে নেবেন তা নির্ভর করে আপনি কীভাবে <canvas> এলিমেন্ট ব্যবহার করছেন তার উপর। চলমান অ্যানিমেশনের জন্য, আপনি হয়ত একটি ফ্রেম ক্যাপচার করতে চাইবেন। ব্যবহারকারীর ইভেন্টের উত্তরে দেখানো সংক্ষিপ্ত অ্যানিমেশনের জন্য, আপনাকে পরপর ফ্রেম ক্যাপচার করতে হতে পারে।
এর মাধ্যমে আমরা সব সেট-আপ করে নিয়েছি এবং ক্যাপচার করা শুরু করার জন্য প্রস্তুত!
ফ্রেম ক্যাপচার করা হচ্ছে
ক্যাপচার করতে, আপনি শুধু শুরু করুন বিকল্পে প্রেস করুন এবং তারপর আপনার অ্যাপ্লিকেশনের সাথে ইন্টার্যাক্ট করুন, যেমন আপনি সাধারণত করেন। কিছুক্ষণ পরে DevTools-এ ফিরে যান এবং আপনি যদি পরপর ক্যাপচার করেন, তাহলে বন্ধ করুন বিকল্পে প্রেস করুন।
এখন বাঁদিকের তালিকায় আপনার একটি নতুন প্রোফাইল আছে, যেখানে সব <canvas> এলিমেন্ট জুড়ে ক্যাপচার করা কনটেক্সট কলের সংখ্যা দেখানো হয়েছে। প্রোফাইলে ক্লিক করুন এবং আপনি এমন একটি স্ক্রিন দেখতে পাবেন যা দেখতে কিছুটা এইরকম:
নিচের প্যানে আপনি ক্যাপচার করা সব ফ্রেমের তালিকা দেখতে পাবেন এবং আপনি প্রতিটি ফ্রেমে ক্লিক করলে, উপরের স্ক্রিনশট আপনাকে সেই ফ্রেমের শেষে <canvas> এলিমেন্টের স্ট্যাটাস দেখাবে। আপনার কাছে একাধিক <canvas> এলিমেন্ট থাকলে, স্ক্রিনশটের ঠিক নিচে থাকা মেনু ব্যবহার করে আপনি বেছে নিতে পারবেন যে কোনটি দেখানো হবে।
ফ্রেমের মধ্যে আপনি ড্র কল গ্রুপ দেখতে পাবেন। প্রতিটি ড্র কল গ্রুপে একটিই ড্র কল থাকে, যা গ্রুপের শেষ কল হবে। তাহলে, ড্র কল কী? 2D কনটেক্সটের ক্ষেত্রে এগুলি হল clearRect(), drawImage(), fill(), stroke(), putImageData() বা যেকোনও টেক্সট রেন্ডারিং ফাংশন এবং WebGL-এর ক্ষেত্রে এগুলি হল clear(), drawArrays() বা drawElements()। এটি মূলত এমন যেকোনও কিছু যা বর্তমান ড্রয়িং বাফারের কন্টেন্ট পরিবর্তন করবে। (আপনি গ্রাফিক্সের ব্যাপারে আগ্রহী না হলে, বাফারকে পিক্সেল সহ বিটম্যাপ হিসেবে ভাবতে পারেন যা আমরা ম্যানিপুলেট করছি।)
এখন আপনাকে শুধু তালিকাটি এক এক করে দেখতে হবে। আপনি ফ্রেম, ড্র কল গ্রুপ বা কল লেভেলে এটি করতে পারবেন। আপনি যেভাবেই তালিকাটি দেখুন না কেন (এবং স্ক্রিনশটের ঠিক নিচে বোতাম রয়েছে যা আপনাকে দ্রুত নেভিগেট করতে সাহায্য করে) আপনি সেই পয়েন্টে প্রসঙ্গটি দেখতে পাবেন, যার অর্থ হল আপনি দ্রুত বাগগুলি খুঁজে পেতে এবং সেগুলি ক্রপ করার সাথে সাথে ঠিক করতে পারবেন।
পার্থক্য খুঁজে বের করুন
আরেকটি উপযোগী ফিচার হল, দুটি কলের মধ্যে কোন কোন প্রপার্টি ও ভেরিয়েবল পরিবর্তন হয়েছে তা দেখার সুবিধা।
এটি দেখতে, আপনাকে শুধু সাইডবার বোতামে (
) ক্লিক করতে হবে এবং একটি নতুন ভিউ পপ-আউট হবে। ড্র কলের মাধ্যমে আপনি ধাপে ধাপে এগিয়ে যাওয়ার সাথে সাথে আপডেট করা প্রপার্টি দেখতে পাবেন। আপনি কোনও বাফার বা অ্যারের উপর মাউস নিয়ে গেলে, সেগুলির কন্টেন্ট দেখতে পাবেন।
আপনার কথা শুনুন!
তাহলে এখন আপনি জানেন যে Chrome-এর DevTools-এ আপনার ক্যানভাস ওয়ার্ক কীভাবে ডিবাগ করতে হয়। Canvas Profiler টুল সম্পর্কে আপনার কোনও মতামত থাকলে, বাগ ফাইল করুন অথবা Chrome DevTools গ্রুপে পোস্ট করুন। আপনি কোনও সমস্যা খুঁজে পেলে বা <canvas> পরীক্ষা করার সময় অন্য কিছু দেখতে চাইলে আমাদের জানান, কারণ ডেভেলপারদের ব্যবহার ও মতামতই Chrome-এর টুলকে আরও উন্নত করে তোলে।