Cách Debug JavaScript như một Senior Developer

Đừng dùng console.log cho mọi thứ nữa. Bạn đang lãng phí hàng giờ mỗi tuần đấy.

Tôi đã dành 8 năm để xử lý các lỗi trên môi trường production. Quy trình làm việc này giúp giảm 60% thời gian debug.

Công cụ Trường hợp sử dụng Thời gian tiết kiệm được

  • Chrome DevTools Sources Debug từng bước (Step-through debugging) 40%
  • Conditional Breakpoints Thu hẹp phạm vi lỗi trong các vòng lặp 25%
  • Performance Panel Tìm các điểm nghẽn khi render 35%
  • Network Panel Các vấn đề về thời gian của API 30%
  • Console.assert Phát hiện sớm các lỗi logic 15%

Đừng rải log khắp nơi nữa. Hãy sử dụng các phương pháp sau đây.

  1. Sử dụng Conditional Breakpoints Mở DevTools Sources. Nhấp vào số dòng để đặt một breakpoint. Chuột phải vào đó và chọn Edit breakpoint. Thêm một điều kiện. Trình debugger sẽ chỉ dừng lại khi điều kiện của bạn đúng. Điều này giúp tiết kiệm hàng giờ khi làm việc với các vòng lặp lớn.

  2. Nghiên cứu Call Stack Khi trình debugger tạm dừng, hãy nhìn vào bảng Call Stack. Nó hiển thị lộ trình dẫn đến lỗi. Chuột phải vào một frame và chọn Copy stack trace để lưu lại.

  3. Sử dụng Log Points Nếu bạn muốn xem kết quả đầu ra mà không muốn dừng mã nguồn, hãy sử dụng Log points. Chuột phải vào số dòng và chọn Add log point. Cách này không làm thay đổi mã nguồn của bạn. Nó sẽ biến mất khi bạn đóng DevTools.

  4. Khắc phục ứng dụng chậm bằng Performance Panel Mở tab Performance. Nhấn Record. Sử dụng trang web của bạn trong 5 giây. Nhấn Stop recording. Tìm các "long tasks" trên 50ms trong Main thread. Điều này sẽ giúp phát hiện các vấn đề về layout và painting.

  5. Kiểm tra Network Panel Kiểm tra chế độ xem Waterfall. Các thanh màu đỏ hoặc tím có nghĩa là các yêu cầu (requests) đang bị chặn. Các khoảng trống lớn có nghĩa là JavaScript đang chặn main thread. Chuột phải vào một request và chọn Copy as cURL để kiểm tra các vấn đề API trong terminal của bạn.

Danh sách kiểm tra (checklist) khi debug của bạn:

  • Đặt một conditional breakpoint
  • Kiểm tra Call Stack để xem lộ trình thực thi
  • Sử dụng bảng Scope để xem các biến cục bộ
  • Thêm một log point để theo dõi các giá trị
  • Ghi lại Performance profile để tìm các vấn đề về thời gian
  • Kiểm tra Network panel để tìm các vấn đề API

Việc chuyển sang quy trình làm việc này sẽ mất khoảng hai tuần để thành thạo. Đây là sự nâng cấp năng suất tốt nhất cho sự nghiệp của bạn. Trình duyệt của bạn đã có sẵn các công cụ này rồi. Hãy sử dụng chúng.

Nguồn: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p