Console Logger সব ধরনের কনসোল আউটপুট (console.log, console.warn, console.error, console.info) ক্যাপচার করে এবং সরাসরি পেজের ওপর একটি ফ্লোটিং প্যানেলে প্রদর্শন করে। ব্রাউজারের ডেভটুলস (DevTools) ওপেন না করেই রিয়েল-টাইমে জাভাস্ক্রিপ্ট এরর, ডিবাগ মেসেজ এবং ওয়ার্নিংগুলো দেখুন। মেসেজগুলো টাইপ অনুযায়ী আলাদা রঙে চিহ্নিত করা থাকে এবং এররগুলোর ক্ষেত্রে টাইমস্ট্যাম্প ও স্ট্যাক ট্রেস (stack trace) অন্তর্ভুক্ত থাকে।
কেবল কনসোল আউটপুট দেখার জন্য ব্রাউজার ডেভটুলস ওপেন করা স্ক্রিনের অনেক জায়গা দখল করে নেয় — বিশেষ করে ছোট স্ক্রিনে বা যখন লগ মনিটর করার সময় পুরো পেজটি দেখার প্রয়োজন হয়। 'Console Logger' এর একটি হালকা সমাধান প্রদান করে: একটি ফ্লোটিং প্যানেল যা পেজের ওপর থেকে রিয়েল-টাইমে সব কনসোল আউটপুট দেখায়। প্যানেলটি console.log, console.warn, console.error, console.info এবং পূর্ণাঙ্গ স্ট্যাক ট্রেসসহ সব আনকট এক্সেপশন (uncaught exceptions) ক্যাপচার করে। মেসেজগুলো আলাদা রঙে চিহ্নিত (সবুজ/সাদা লগে, লালে এরর, হলুদে ওয়ার্নিং, নীল রঙে ইনফো) এবং কখন ঘটনাটি ঘটেছে তা ট্র্যাক করার জন্য এতে টাইমস্ট্যাম্প যুক্ত থাকে। ফিল্টার বাটনের মাধ্যমে আপনি সুনির্দিষ্ট মেসেজ টাইপ দেখতে পারেন — যেমন ক্র্যাশ ডিবাগ করার সময় কেবল এররগুলো বা ডেপ্রিকেশন নোটিশ খোঁজার সময় কেবল ওয়ার্নিংগুলো। প্যানেলটি ড্র্যাগ করে সরানো যায়, রিসাইজ করা যায় এবং এটি সেমি-ট্রান্সপারেন্ট হওয়ায় পেজের মূল কন্টেন্ট দেখতে খুব একটা বাধা দেয় না।
কনসোল মেসেজগুলো লগ হওয়ার সাথে সাথেই রিয়েল-টাইমে প্রদর্শিত হয়। পেজ ইনিশিয়ালাইজেশন লগ, API রেসপন্স হ্যান্ডলিং, ইউজার ইন্টারঅ্যাকশন এবং এরর মেসেজ — সবকিছুই ফ্লোটিং প্যানেলে লাইভ দেখা যায়।
লাল রঙে এরর, হলুদ/অ্যাম্বার রঙে ওয়ার্নিং, নীল রঙে ইনফো এবং সাদা/ধূসর রঙে সাধারণ লগ। কেবল রঙের মাধ্যমেই আপনি যেকোনো গুরুতর এরর এবং সাধারণ লগের মধ্যে পার্থক্য করতে পারবেন।
জাভাস্ক্রিপ্ট এররগুলোতে ফাইল নেম, ফাংশন নেম এবং লাইন নম্বরসহ পূর্ণাঙ্গ স্ট্যাক ট্রেস অন্তর্ভুক্ত থাকে। ডেভটুলস ওপেন না করেই ফাইল রেফারেন্সে ক্লিক করে এররটির মূল উৎস শনাক্ত করুন।
উপরে থাকা ফিল্টার বাটনগুলোর মাধ্যমে আপনি সুনির্দিষ্ট মেসেজ টাইপ (যেমন: All, Errors only, Warnings only, Info only, Logs only) দেখাতে বা লুকাতে পারেন। প্রতিটি ফিল্টারে থাকা কাউন্ট ব্যাজ থেকে জানা যায় সেই টাইপের মোট কতটি মেসেজ আছে।
প্রতিটি মেসেজে লগ হওয়ার সময় (HH:MM:SS ফরম্যাট) উল্লেখ থাকে। ঘটনার ক্রম অনুসরণ করুন, পারফরম্যান্স ইস্যুগুলো (API কল এবং রেসপন্সের মধ্যবর্তী সময়) শনাক্ত করুন এবং ইউজারের কর্মকাণ্ডের সাথে মেসেজগুলোর মিল খুঁজে বের করুন।
নতুন করে শুরু করতে সব মেসেজ মুছে ফেলুন, অথবা পেজ ব্যবহারের সাথে সাথে লগগুলো জমা হতে দিন। প্যানেলটি মোট মেসেজ সংখ্যা দেখায় এবং প্রয়োজন না হলে মিনিমাইজ করে রাখা যায়।
পেজটি পুরোটা দেখা অবস্থায় কি কনসোল আউটপুট দেখতে চান? 'Console Logger' আপনাকে ডেভটুলস প্যানেলের সাহায্য ছাড়াই লগ মনিটর করার সুবিধা দেয়। এটি ছোট স্ক্রিনে বা প্রেজেন্টেশনের সময় দারুণ কার্যকর।
যদি আপনার জাভাস্ক্রিপ্ট API রেসপন্স লগ করে, তবে 'Console Logger' সেগুলো রিয়েল-টাইমে দেখাবে। বারবার পেজ এবং ডেভটুলসের মধ্যে সুইচ না করেই রিকোয়েস্ট/রেসপন্স ডেটা দেখুন।
কিছু জাভাস্ক্রিপ্ট এরর নিঃশব্দে ঘটে — বাইরে কোনো পরিবর্তন দেখা যায় না, কিন্তু কনসোলে এরর থাকে। এটি সেই এররগুলোকে পেজের ওপর ফুটিয়ে তোলে যাতে সাধারণ ব্রাউজিংয়ের সময়ও আপনি সেগুলো খেয়াল করেন।
লাইভ ডেমোর সময় স্ক্রিনের এক কোণায় 'Console Logger' প্যানেলটি খোলা রাখুন। যদি কোনো সমস্যা হয়, তবে ডেমো থামিয়ে ডেভটুলস ওপেন না করেই আপনি সরাসরি এরর মেসেজটি দেখে নিতে পারবেন।
থার্ড-পার্টি স্ক্রিপ্টগুলো (যেমন অ্যানালিটিক্স, চ্যাট উইজেট, অ্যাড নেটওয়ার্ক) প্রায়ই এরর বা ওয়ার্নিং দেয়। 'Console Logger' এগুলো ক্যাপচার করে যাতে আপনি আপনার এক্সটারনাল ডিপেন্ডেন্সিগুলোর অবস্থা মনিটর করতে পারেন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Console Logger আইকনে ক্লিক করুন। একটি ফ্লোটিং প্যানেল ওপেন হবে এবং সাথে সাথেই কনসোল আউটপুট ক্যাপচার করা শুরু করবে।
স্বাভাবিকভাবেই পেজটি ব্যবহার করুন — বাটন ক্লিক করুন, নেভিগেট করুন বা ফরম সাবমিট করুন। পেজের জাভাস্ক্রিপ্ট থেকে মেসেজ লগ হওয়ার সাথে সাথে সেগুলো প্যানেলে প্রদর্শিত হবে।
কেবল এরর, ওয়ার্নিং বা লগ দেখতে ফিল্টার বাটনগুলো ব্যবহার করুন। কাউন্ট ব্যাজ থেকে বুঝবেন প্রতিটি টাইপে কতটি মেসেজ আছে।
এরর মেসেজগুলোর ক্ষেত্রে ফাইল এবং লাইন নম্বর দেখতে স্ট্যাক ট্রেসটি বড় (expand) করুন। বাঘ (bug)-এর উৎস শনাক্ত করতে এটি ব্যবহার করুন।
প্যানেলটি রিসেট করতে "Clear" বাটনে ক্লিক করুন অথবা টুলটি বন্ধ করতে ডিঅ্যাক্টিভেট করুন। পেজে এর কোনো চিহ্ন থাকবে না।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
