Chrome DevTools দিয়ে আপনার ইন্টারেক্টিভ ক্যানভাস ওয়েব অ্যাপ ডিবাগ করুন

আপনি Chrome DevTools ব্যবহার করে আপনার ইন্টারেক্টিভ ক্যানভাস ওয়েব অ্যাপ ডিবাগ করতে পারেন। Chrome ডিবাগার Google Home বা Google Nest স্মার্ট ডিসপ্লেতে 30 বা তার পরের সফ্টওয়্যার সংস্করণ সহ সমর্থিত (এই আপডেটটি অক্টোবর 2020 থেকে শুরু হবে) এবং 1.50 বা তার পরবর্তী কাস্ট ফার্মওয়্যার সংস্করণ। আপনি আপনার স্মার্ট ডিসপ্লেতে System settings / About device সংস্করণের অধীনে সংস্করণগুলি পরীক্ষা করতে পারেন।

দ্রষ্টব্য: তৃতীয় পক্ষের স্মার্ট ডিসপ্লে ডিভাইসে ক্যানভাস ওয়েব অ্যাপস ডিবাগ করা সমর্থিত নয়।

আপনার পরিবেশ সেট আপ করুন

আপনি ডিবাগ করার আগে, আপনার পরিবেশ সঠিকভাবে সেট আপ করতে নিম্নলিখিতগুলি করুন:

• অ্যাকশন কনসোল সিমুলেটরে পরীক্ষার জন্য আপনার অ্যাকশন সক্ষম করুন।
• আপনি যে Google Home বা Google Nest ডিভাইসটি পরীক্ষা করছেন সেই একই লোকাল এরিয়া নেটওয়ার্কে আপনার মেশিনকে কানেক্ট করুন।
• নিশ্চিত করুন যে আপনার নেটওয়ার্ক ডিভাইসগুলির মধ্যে প্যাকেটগুলিকে ব্লক করে না৷
• অ্যাকশন কনসোলে এবং Google Home বা Google Nest ডিভাইসে একই Google অ্যাকাউন্ট দিয়ে লগ ইন করুন।

আপনার পরিবেশ প্রস্তুত হয়ে গেলে, আপনি আপনার পরীক্ষা স্মার্ট ডিসপ্লেতে আপনার অ্যাকশন চালু করতে পারেন।

দ্রষ্টব্য: আপনি আপনার পরীক্ষা স্মার্ট ডিসপ্লেতে আপনার ডেভেলপমেন্ট অ্যাকশন চালু না করা পর্যন্ত আপনি আপনার ক্যানভাস ওয়েব অ্যাপ ডিবাগ করতে পারবেন না।

ডিবাগারে ক্যানভাস ওয়েব অ্যাপ সংযুক্ত করুন

আপনার ক্যানভাস ওয়েব অ্যাপটিকে Chrome DevTools ডিবাগারের সাথে সংযুক্ত করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. আপনার স্থানীয় ডেভেলপমেন্ট মেশিনে, Google Chrome ব্রাউজারটি ইনস্টল এবং চালু করুন।
2. আপনার ক্রোম ব্রাউজারের ঠিকানা ক্ষেত্রে, ক্রোম ইন্সপেক্টর চালু করতে chrome://inspect#devices লিখুন। আপনি পৃষ্ঠায় ডিভাইসগুলির একটি তালিকা দেখতে পাবেন এবং ক্যানভাস HTML URL আপনার পরীক্ষার Google Home বা Google Nest ডিভাইসের নামে তালিকাভুক্ত করা উচিত। মনে রাখবেন যে আপনার নেটওয়ার্কে থাকা সমস্ত ডিভাইসগুলি আবিষ্কার করতে Chrome-এর কিছু সময় লাগতে পারে৷
3. Chrome DevTools চালু করতে HTML URL-এর অধীনে inspect লিঙ্কে ক্লিক করুন।

Chrome DevTools এর নিজস্ব উইন্ডোতে লোড হয়। আপনি স্ক্রিনকাস্ট ক্লিক করতে পারেন ( ডিভাইসে রেন্ডার করা ওয়েব GUI দেখতে ) বোতাম। নিম্নলিখিত স্ক্রিনশটটি দেখায় যে কীভাবে আপনার ওয়েব অ্যাপ Chrome DevTools-এ প্রদর্শিত হয়:

মনে রাখবেন আপনার ক্যানভাস ওয়েব অ্যাপটি একটি আইফ্রেমে লোড করা হয়েছে।

ডিবাগিং টিপস

ডিবাগ করার সময় নিম্নলিখিত অতিরিক্ত টিপস মনে রাখবেন:

• আপনার ডেভেলপমেন্ট ইউআরএল থেকে লেটেস্ট কোড সহ আপনার স্থানীয় পূর্ণতা অ্যাপ কন্টেইনার রিলোড করতে Chrome DevTools-এ পৃষ্ঠাটি রিফ্রেশ করুন।
• আপনার JavaScript অ্যাপটি ত্রুটি ছাড়াই লোড হচ্ছে কিনা তা পরীক্ষা করুন। এটি করতে, DevTools পৃষ্ঠার কনসোল বিভাগটি দেখুন।
• debugger; আপনার ওয়েব অ্যাপ কোডের মধ্যে।
• আপনি যদি একটি বর্ধিত সময়ের জন্য chrome://inspect#devices এ আপনার ডিভাইসটি দেখতে না পান, তাহলে পরিদর্শন পৃষ্ঠাটি রিফ্রেশ করুন৷
• পারফরম্যান্স সংক্রান্ত যেকোনো সমস্যা ডিবাগ করতে, রানটাইম পারফরম্যান্স বিশ্লেষণের সাথে শুরু করুন টিউটোরিয়াল অনুসরণ করুন।
• যেহেতু স্মার্ট ডিসপ্লে মেমরি সীমিত, আপনার ওয়েব অ্যাপটি 200MB এর বেশি হলে ক্র্যাশ বা হ্যাং হয়ে যেতে পারে। কোনো মেমরি সমস্যা ডিবাগ করতে, ফিক্স মেমরি সমস্যা টিউটোরিয়াল অনুসরণ করুন।
• কোনো পূর্ণতা ত্রুটির জন্য, আপনার ওয়েবহুক লগ বা স্ট্যাকড্রাইভার লগ থেকে ওয়েবহুকে অ্যাকশন অন Google সার্ভারের পাঠানো অনুরোধগুলি দেখুন।