Console đang lừa dối bạn

DevTools trên trình duyệt có thể khiến bạn hiểu lầm trong quá trình debug. Nó không hề bị lỗi. Nó được tối ưu hóa để đạt tốc độ cao, chứ không phải để đạt được độ chính xác tuyệt đối.

Dưới đây là lý do tại sao bạn không thể luôn luôn tin tưởng vào console.log.

• Lazy Evaluation (Đánh giá lười) Khi bạn log một object, trình duyệt không sao chép nó ngay lập tức. Thay vào đó, nó lưu trữ một tham chiếu trực tiếp (live reference). Trình duyệt chỉ đọc các thuộc tính khi bạn nhấn vào mũi tên để mở rộng nó. Nếu mã của bạn thay đổi object đó trước khi bạn nhấn vào, bạn sẽ thấy giá trị mới chứ không phải giá trị cũ.

• Hiệu ứng Heisenbug Việc thêm console.log thực tế có thể che giấu các lỗi (bugs). Việc ghi log tiêu tốn thời gian và tài nguyên. Trong các đoạn mã chạy nhanh, sự chậm trễ nhỏ này có thể làm thay đổi trình tự thời gian (timing) của ứng dụng. Điều này có thể ngăn chặn các tình trạng tranh chấp (race conditions) xảy ra trong khi bạn đang quan sát, khiến lỗi biến mất.

• Bẫy State trong React Việc log state ngay sau khi gọi setCount sẽ hiển thị giá trị cũ. Điều này xảy ra do closure và cách React lập lịch cập nhật (schedules updates). Giá trị bạn log thuộc về lần render hiện tại, chứ không phải lần tiếp theo.

• Lỗi Source Map Trong môi trường production, mã của bạn đã được minify và bundle. Nếu source map của bạn cũ hoặc không chính xác, console sẽ chỉ sai dòng code. Lỗi là có thật, nhưng vị trí thì sai.

Cách debug tốt hơn:

  • Sử dụng structuredClone để chụp snapshot Nếu bạn cần xem một object chính xác như trạng thái hiện tại của nó, hãy dùng: const snap = structuredClone(obj) console.log(snap)

  • Log các kiểu dữ liệu nguyên thủy (primitives) thay vì các object lớn Hãy log các ID, timestamp, hoặc các chuỗi trạng thái (status strings). Điều này giúp giảm thiểu rủi ro từ lazy evaluation và ảnh hưởng đến hiệu năng.

  • Sử dụng debugger Sử dụng breakpoint để tạm dừng thực thi. Điều này cho phép bạn kiểm tra trạng thái thực tế và call stack mà không làm thay đổi trình tự thời gian của mã.

  • Sử dụng DevTools của framework Nếu bạn sử dụng React hoặc Vue, hãy dùng các DevTools chuyên dụng của chúng. Chúng hiển thị các giai đoạn lifecycle và render chính xác hơn so với việc dùng log.

Console là một công cụ tuyệt vời để khám phá nhanh. Đừng coi nó là nguồn sự thật cuối cùng (source of truth).

Nguồn: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc