Konsol Anda Sedang Berbohong kepada Anda

DevTools browser Anda mungkin menyesatkan Anda saat melakukan debugging. Ini bukan berarti rusak. DevTools dioptimalkan untuk kecepatan, bukan untuk akurasi yang sempurna.

Berikut adalah alasan mengapa Anda tidak selalu bisa mempercayai console.log.

• Lazy Evaluation Saat Anda melakukan log pada sebuah objek, browser tidak langsung menyalinnya. Browser menyimpan referensi langsung (live reference). Browser hanya membaca propertinya saat Anda mengklik tanda panah untuk memperluasnya. Jika kode Anda mengubah objek tersebut sebelum Anda mengkliknya, Anda akan melihat nilai yang baru, bukan nilai yang lama.

• Efek Heisenbug Menambahkan console.log sebenarnya dapat menyembunyikan bug. Melakukan logging membutuhkan waktu dan sumber daya. Pada kode yang berjalan cepat, jeda kecil ini dapat mengubah timing aplikasi Anda. Hal ini dapat menghentikan terjadinya race condition saat Anda sedang mengamati, sehingga membuat bug tersebut seolah menghilang.

• Jebakan State React Melakukan log pada state segera setelah pemanggilan setCount akan menampilkan nilai lama. Ini terjadi karena adanya closures dan bagaimana React menjadwalkan pembaruan (updates). Nilai yang Anda log adalah milik render saat ini, bukan render berikutnya.

• Kesalahan Source Map Di lingkungan produksi, kode Anda telah diminifikasi dan dibundel. Jika source map Anda sudah usang atau tidak tepat, konsol akan menunjukkan baris kode yang salah. Error-nya nyata, tetapi lokasinya salah.

Cara melakukan debugging dengan lebih baik:

  • Gunakan structuredClone untuk mengambil snapshot Jika Anda perlu melihat objek persis seperti kondisinya saat ini, gunakan: const snap = structuredClone(obj) console.log(snap)

  • Log tipe data primitif alih-alih objek besar Log ID, timestamp, atau string status. Ini mengurangi risiko lazy evaluation dan penurunan performa.

  • Gunakan debugger Gunakan breakpoint untuk menjeda eksekusi. Ini memungkinkan Anda memeriksa state dan call stack yang sebenarnya tanpa mengubah timing kode Anda.

  • Gunakan DevTools framework Jika Anda menggunakan React atau Vue, gunakan DevTools spesifik mereka. DevTools tersebut menunjukkan fase lifecycle dan render dengan lebih akurat daripada log.

Konsol adalah alat yang hebat untuk eksplorasi cepat. Jangan menggunakannya sebagai sumber kebenaran akhir Anda.

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