الكونسول يخدعك

قد تضللك أدوات المطورين (DevTools) في متصفحك أثناء عملية تصحيح الأخطاء (debugging). هي ليست معطلة، بل تم تحسينها من أجل السرعة وليس من أجل الدقة المطلقة.

إليك السبب في أنه لا يمكنك الوثوق بـ console.log دائمًا.

• التقييم الكسول (Lazy Evaluation) عندما تقوم بتسجيل كائن (object)، لا يقوم المتصفح بنسخه فوراً، بل يخزن مرجعاً حياً (live reference) له. لا يقرأ المتصفح الخصائص إلا عندما تنقر على السهم لتوسيع الكائن. إذا قام الكود الخاص بك بتغيير ذلك الكائن قبل أن تنقر، فسترى القيمة الجديدة وليس القديمة.

• تأثير هايزنبرغ (The Heisenbug Effect) إضافة console.log قد تؤدي في الواقع إلى إخفاء الأخطاء. فعملية التسجيل (logging) تستهلك وقتاً وموارد. في الكود السريع، يمكن لهذا التأخير الضئيل أن يغير توقيت تطبيقك، مما قد يمنع حدوث حالات التسابق (race conditions) أثناء مراقبتك، وبالتالي يختفي الخطأ.

• فخاخ حالة React (React State Traps) تسجيل الحالة (state) مباشرة بعد استدعاء setCount يظهر القيمة القديمة. يحدث هذا بسبب الـ closures وكيفية جدولة React للتحديثات. القيمة التي تسجلها تنتمي إلى عملية الرندر (render) الحالية، وليس التالية.

• أخطاء خرائط المصدر (Source Map Errors) في بيئة الإنتاج (production)، يتم تصغير (minified) ودمج (bundled) الكود الخاص بك. إذا كانت خرائط المصدر (source maps) قديمة أو غير صحيحة، فسيشير الكونسول إلى سطر الكود الخطأ. الخطأ حقيقي، لكن الموقع غير صحيح.

كيف تصحح الأخطاء بشكل أفضل:

  • استخدم structuredClone لأخذ لقطات (snapshots) إذا كنت بحاجة لرؤية كائن كما هو تماماً في هذه اللحظة، استخدم: const snap = structuredClone(obj) console.log(snap)

  • سجل القيم الأولية (primitives) بدلاً من الكائنات الكبيرة سجل المعرفات (IDs)، أو الطوابع الزمنية (timestamps)، أو سلاسل الحالة (status strings). هذا يقلل من مخاطر التقييم الكسول ويقلل من التأثير على الأداء.

  • استخدم الـ debugger استخدم نقاط التوقف (breakpoints) لإيقاف التنفيذ. يتيح لك ذلك فحص الحالة الفعلية ومكدس الاستدعاءات (call stack) دون تغيير توقيت الكود الخاص بك.

  • استخدم أدوات المطورين الخاصة بالإطار (framework DevTools) إذا كنت تستخدم React أو Vue، فاستخدم أدوات المطورين الخاصة بهما. فهي تظهر لك مراحل دورة الحياة (lifecycle) والرندر (render) بدقة أكبر من السجلات (logs).

الكونسول أداة رائعة للاستكشاف السريع. لا تستخدمه كمصدر نهائي للحقيقة.

المصدر: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc