আপনার কনসোল আপনাকে মিথ্যা বলছে
ডিবাগিং করার সময় আপনার ব্রাউজারের DevTools আপনাকে বিভ্রান্ত করতে পারে। এটি নষ্ট হয়ে যায়নি। এটি নিখুঁত নির্ভুলতার জন্য নয়, বরং গতির জন্য অপ্টিমাইজ করা হয়েছে।
এখানে দেওয়া হলো কেন আপনি সব সময় console.log-কে বিশ্বাস করতে পারেন না।
• Lazy Evaluation আপনি যখন একটি অবজেক্ট লগ করেন, ব্রাউজার সেটি সাথে সাথে কপি করে না। এটি একটি লাইভ রেফারেন্স (live reference) সংরক্ষণ করে। আপনি যখন এটি প্রসারিত করার জন্য অ্যারোতে ক্লিক করেন, কেবল তখনই ব্রাউজার প্রপার্টিগুলো পড়ে। আপনি ক্লিক করার আগে যদি আপনার কোড সেই অবজেক্টটি পরিবর্তন করে ফেলে, তবে আপনি পুরনো মান নয়, বরং নতুন মান দেখতে পাবেন।
• The Heisenbug Effect একটি console.log যোগ করা আসলে বাগ (bug) লুকিয়ে ফেলতে পারে। লগিং করতে সময় এবং রিসোর্স প্রয়োজন হয়। দ্রুতগতির কোডের ক্ষেত্রে, এই সামান্য বিলম্ব আপনার অ্যাপ্লিকেশনের টাইমিং পরিবর্তন করে দিতে পারে। এটি আপনি যখন দেখছেন তখন race condition হওয়া বন্ধ করে দিতে পারে, যার ফলে বাগটি অদৃশ্য হয়ে যায়।
• React State Traps একটি setCount কল করার ঠিক পরেই স্টেট লগ করলে পুরনো মান দেখায়। এটি ক্লোজার (closures) এবং React কীভাবে আপডেট শিডিউল করে তার কারণে ঘটে। আপনি যে মানটি লগ করছেন তা বর্তমান রেন্ডারের (render), পরবর্তী রেন্ডারের নয়।
• Source Map Errors প্রোডাকশনে আপনার কোড মিনিফাই (minified) এবং বান্ডেল (bundled) করা থাকে। আপনার source maps যদি পুরনো বা ভুল হয়, তবে কনসোল কোডের ভুল লাইনের দিকে নির্দেশ করবে। এররটি বাস্তব, কিন্তু অবস্থানটি ভুল।
আরও ভালোভাবে ডিবাগ করার উপায়:
স্ন্যাপশট নিতে structuredClone ব্যবহার করুন আপনি যদি কোনো অবজেক্টকে ঠিক বর্তমান অবস্থায় দেখতে চান, তবে ব্যবহার করুন:
const snap = structuredClone(obj)console.log(snap)বড় অবজেক্টের পরিবর্তে primitives লগ করুন ID, টাইমস্ট্যাম্প বা স্ট্যাটাস স্ট্রিং লগ করুন। এটি lazy evaluation এবং পারফরম্যান্সের ওপর প্রভাব পড়ার ঝুঁকি কমায়।
debugger ব্যবহার করুন এক্সিকিউশন থামানোর জন্য ব্রেকপয়েন্ট (breakpoints) ব্যবহার করুন। এটি আপনার কোডের টাইমিং পরিবর্তন না করেই প্রকৃত স্টেট এবং কল স্ট্যাক (call stack) পরীক্ষা করতে সাহায্য করে।
ফ্রেমওয়ার্ক DevTools ব্যবহার করুন আপনি যদি React বা Vue ব্যবহার করেন, তবে তাদের নির্দিষ্ট DevTools ব্যবহার করুন। সেগুলো লগ করার চেয়ে লাইফসাইকেল (lifecycle) এবং রেন্ডার ফেজগুলো আরও নির্ভুলভাবে দেখায়।
দ্রুত অনুসন্ধানের জন্য কনসোল একটি চমৎকার টুল। এটিকে আপনার তথ্যের চূড়ান্ত উৎস হিসেবে ব্যবহার করবেন না।