کنسول شما دارد به شما دروغ میگوید
DevTools مرورگر شما ممکن است در حین عیبیابی شما را گمراه کند. این به معنای خراب بودن آن نیست؛ بلکه برای سرعت بهینه شده است، نه برای دقت بینقص.
در اینجا دلایلی آورده شده که چرا همیشه نمیتوانید به console.log اعتماد کنید.
• ارزیابی تنبل (Lazy Evaluation) وقتی یک شیء (object) را لاگ میکنید، مرورگر بلافاصله از آن کپی نمیگیرد، بلکه یک ارجاع زنده (live reference) از آن ذخیره میکند. مرورگر ویژگیها (properties) را تنها زمانی میخواند که شما روی فلش برای باز کردن آن کلیک کنید. اگر کد شما قبل از کلیک کردن، آن شیء را تغییر دهد، شما مقدار جدید را خواهید دید، نه مقدار قدیمی را.
• اثر هایزنباگ (The Heisenbug Effect)
اضافه کردن یک console.log میتواند در واقع باعث پنهان شدن باگها شود. لاگ کردن زمان و منابع مصرف میکند. در کدهای سریع، این تأخیر بسیار کوچک میتواند زمانبندی (timing) اپلیکیشن شما را تغییر دهد. این اتفاق میتواند باعث شود در حین مشاهده، از وقوع race conditionها جلوگیری شود و در نتیجه باگ ناپدید شود.
• تلههای وضعیت در React (React State Traps)
لاگ کردن وضعیت (state) بلافاصله پس از فراخوانی setCount مقدار قدیمی را نشان میدهد. این اتفاق به دلیل closures و نحوه زمانبندی بهروزرسانیها توسط React رخ میدهد. مقداری که لاگ میکنید متعلق به رندر فعلی است، نه رندر بعدی.
• خطاهای Source Map در محیط production، کد شما minified و bundled شده است. اگر source mapهای شما قدیمی یا نادرست باشند، کنسول به خط اشتباهی از کد اشاره میکند. خطا واقعی است، اما مکان آن اشتباه است.
چگونه بهتر عیبیابی کنیم:
از
structuredCloneبرای گرفتن اسنپشات استفاده کنید اگر نیاز دارید یک شیء را دقیقاً همانطور که در لحظه هست ببینید، از این روش استفاده کنید: const snap = structuredClone(obj) console.log(snap)به جای اشیاء بزرگ، مقادیر primitive را لاگ کنید شناسهها (IDs)، برچسبهای زمانی (timestamps) یا رشتههای وضعیت (status strings) را لاگ کنید. این کار خطر ارزیابی تنبل (lazy evaluation) و کاهش عملکرد را کاهش میدهد.
از debugger استفاده کنید از breakpointها برای متوقف کردن اجرای برنامه استفاده کنید. این کار به شما اجازه میدهد بدون تغییر در زمانبندی کد، وضعیت واقعی و call stack را بررسی کنید.
از DevTools فریمورکها استفاده کنید اگر از React یا Vue استفاده میکنید، از DevTools مخصوص آنها استفاده کنید. آنها مراحل lifecycle و render را دقیقتر از لاگها به شما نشان میدهند.
کنسول ابزار فوقالعادهای برای کاوش سریع است. اما از آن به عنوان منبع نهایی حقیقت استفاده نکنید.
منبع: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc