Your Console Is Lying To You

DevTools ในเบราว์เซอร์ของคุณอาจทำให้คุณเข้าใจผิดระหว่างการดีบั๊ก (debugging) มันไม่ได้เสีย แต่มันถูกปรับแต่งมาเพื่อความเร็ว ไม่ใช่เพื่อความแม่นยำที่สมบูรณ์แบบ

นี่คือเหตุผลที่คุณไม่สามารถเชื่อถือ console.log ได้เสมอไป

• Lazy Evaluation เมื่อคุณ log วัตถุ (object) หนึ่งขึ้นมา เบราว์เซอร์จะไม่ได้คัดลอกมันในทันที แต่มันจะเก็บเป็น reference ที่เชื่อมโยงกับข้อมูลจริงไว้ เบราว์เซอร์จะอ่านค่า properties ต่างๆ ก็ต่อเมื่อคุณคลิกที่ลูกศรเพื่อขยายดูเท่านั้น หากโค้ดของคุณมีการเปลี่ยนแปลง object นั้นก่อนที่คุณจะคลิก คุณจะเห็นค่าใหม่ ไม่ใช่ค่าเก่า

• The Heisenbug Effect การเพิ่ม console.log เข้าไปอาจเป็นการซ่อนบั๊กเอาไว้โดยไม่รู้ตัว เนื่องจากการ log ต้องใช้เวลาและทรัพยากร ในโค้ดที่ทำงานเร็วมาก ความล่าช้าเพียงเล็กน้อยนี้สามารถเปลี่ยนจังหวะเวลา (timing) ของแอปพลิเคชันคุณได้ ซึ่งอาจทำให้ race conditions ไม่เกิดขึ้นในขณะที่คุณกำลังเฝ้าดู ส่งผลให้บั๊กหายไปเฉยๆ

• React State Traps การ log state ทันทีหลังจากเรียกใช้ setCount จะแสดงค่าเก่า สิ่งนี้เกิดขึ้นเนื่องจากเรื่อง closures และวิธีการที่ React จัดตารางการอัปเดต (schedules updates) ค่าที่คุณ log คือค่าที่อยู่ใน render รอบปัจจุบัน ไม่ใช่รอบถัดไป

• Source Map Errors ในสภาพแวดล้อม production โค้ดของคุณจะถูกทำ minified และ bundled หาก source maps ของคุณเก่าหรือผิดพลาด console จะชี้ไปยังบรรทัดโค้ดที่ผิด แม้ว่าข้อผิดพลาดนั้นจะเป็นของจริง แต่ตำแหน่งที่ระบุกลับไม่ถูกต้อง

How to debug better:

  • Use structuredClone to take snapshots หากคุณต้องการเห็น object ในสภาพที่เป็นอยู่ ณ ตอนนี้ ให้ใช้: const snap = structuredClone(obj) console.log(snap)

  • Log primitives instead of large objects ให้ log ค่าที่เป็น ID, timestamps หรือ status strings แทน วิธีนี้จะช่วยลดความเสี่ยงเรื่อง lazy evaluation และผลกระทบต่อประสิทธิภาพ (performance hits)

  • Use the debugger ใช้ breakpoints เพื่อหยุดการทำงานของโค้ด วิธีนี้จะช่วยให้คุณตรวจสอบ state และ call stack ที่แท้จริงได้โดยไม่ไปเปลี่ยนจังหวะเวลาของโค้ด

  • Use framework DevTools หากคุณใช้ React หรือ Vue ให้ใช้ DevTools เฉพาะของพวกมัน ซึ่งจะแสดง lifecycle และขั้นตอนการ render ได้แม่นยำกว่าการใช้ logs

Console เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสำรวจข้อมูลอย่างรวดเร็ว แต่อย่าใช้มันเป็นแหล่งข้อมูลที่ถูกต้องที่สุด (source of truth) เสมอไป

Source: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc